こんにちは！
本当は週５で行きたいくらいコメダ珈琲が好きな男、デザイナーの山嵜です。
暑い夏の日差しも負けず、
私はジムで筋トレに励んでおりますが
Web業界の従事者足るもの、筋肉以外にも身につけるべき力があるのではないかという
自責に駆られました。
それはつまり・・・・・・そう・・・・・
コーディングスピードですね。
圧倒的な速度でのコーディングをものにすれば、
よりコードの質に時間をかけられ、
空前絶後の納期へのコミット、
積み上げられる厚い信頼、
そして千客万来・・・・webクリエイターとして
前人未到の領域に達することも夢ではないはず。
コーディングスピードを上げることの重要性。
スピードを制することは、勝負を制するといっても過言ではないのです。
というわけで今回は、既存のhtml・scssの組み合わせから一皮むけるため、
Pugとstylusの導入を検討する運びとなりました。
以前から気になっていたものの、
せっかく同時に触ってみたいい機会ですので、
その感想を率直にお伝えします。
現在のコーディング
Pugとstylus導入後
導入その１：コンパイル環境を作る
sassのコンパイルもできる、万能GUI「prepros」を使用します。
https://prepros.io/
なんとPugとstylusのコンパイルもできるんです。偉い。
sassのコンパイルと同様に、
「Add project」からコンパイルしたいデータを選んであげれば自動コンパイルがスタートします。
※Pugの拡張子は「.pug」
※stylusの拡張子は「.styl」
導入その２：Pugを使ってみる
Pag
コンパイルされたhtml
htmlのタグで囲む必要がないのは
見た目もとってもスタイリッシュでよいですね。
コーディング作業のスピードアップももちろん大事ですが、
作ったデータの「可読性」も、作業全体の進行に大きく影響してくる部分なので見過ごせません。
変数やincludeなど、静的なhtmlをよりプログラマブルに開発していける感触にとても新鮮さを感じました。
これはぜひ導入していきたい。
導入その３：stylusを使ってみる
scss
stylus
閉じ括弧が不要なのは楽だ！
でもそれはscssではなく、sassの記法でも実現可能。
拡張子によって書き方が変わらることがないstylusの良いところ。
でも違う書き方が同ソースに混在するのはどうなんだろう。
cssしか扱えない人でも、scssはコンパイル可能な面を考えると、
stylusはやや扱いに難があるような印象を受けます。
感想
Pugは慣れが必要。
stylusはまぁsassでもいいような気がする。
楽といえば楽だけど、ずば抜けた恩恵はまだ実感できないです。
現場からは以上です。
それではまた。
