さあ、未来へ旅立とう

日々のこと、チーム紹介

  • 12 Jul. 2018

    時は加速する・・・!!Pugとstylusで天国の扉を開ける!!

    CATEGORYBlog TAG

     

    こんにちは!
    本当は週5で行きたいくらいコメダ珈琲が好きな男、デザイナーの山嵜です。

     

    暑い夏の日差しも負けず、

    私はジムで筋トレに励んでおりますが
    Web業界の従事者足るもの、筋肉以外にも身につけるべき力があるのではないかという
    自責に駆られました。
    それはつまり・・・・・・そう・・・・・

     

    コーディングスピードですね。

     

    圧倒的な速度でのコーディングをものにすれば、
    よりコードの質に時間をかけられ、
    空前絶後の納期へのコミット、
    積み上げられる厚い信頼、
    そして千客万来・・・・webクリエイターとして
    前人未到の領域に達することも夢ではないはず。

     

    コーディングスピードを上げることの重要性。

     

    スピードを制することは、勝負を制するといっても過言ではないのです。

    というわけで今回は、既存のhtml・scssの組み合わせから一皮むけるため、
    Pugとstylusの導入を検討する運びとなりました。

     

    以前から気になっていたものの、
    せっかく同時に触ってみたいい機会ですので、
    その感想を率直にお伝えします。

     

    現在のコーディング

    Pugとstylus導入後

     

     

    導入その1:コンパイル環境を作る

    sassのコンパイルもできる、万能GUI「prepros」を使用します。
    https://prepros.io/

    なんとPugとstylusのコンパイルもできるんです。偉い。

    sassのコンパイルと同様に、
    「Add project」からコンパイルしたいデータを選んであげれば自動コンパイルがスタートします。

    ※Pugの拡張子は「.pug」
    ※stylusの拡張子は「.styl」

     

    導入その2:Pugを使ってみる

    Pag

    コンパイルされたhtml

    htmlのタグで囲む必要がないのは
    見た目もとってもスタイリッシュでよいですね。

    コーディング作業のスピードアップももちろん大事ですが、
    作ったデータの「可読性」も、作業全体の進行に大きく影響してくる部分なので見過ごせません。

    変数やincludeなど、静的なhtmlをよりプログラマブルに開発していける感触にとても新鮮さを感じました。
    これはぜひ導入していきたい。

     

    導入その3:stylusを使ってみる

    scss

    stylus

    閉じ括弧が不要なのは楽だ!
    でもそれはscssではなく、sassの記法でも実現可能。

    拡張子によって書き方が変わらることがないstylusの良いところ。
    でも違う書き方が同ソースに混在するのはどうなんだろう。

    cssしか扱えない人でも、scssはコンパイル可能な面を考えると、
    stylusはやや扱いに難があるような印象を受けます。

     

     

    感想

    Pugは慣れが必要。

    stylusはまぁsassでもいいような気がする。
    楽といえば楽だけど、ずば抜けた恩恵はまだ実感できないです。

    現場からは以上です。

    それではまた。

    茅ヶ崎市在住。雲南省の秘境からMac book片手に湘南の海へ流れ着いた無頼派。ディスプレイの秘孔を突き、気を送り込んで爆発させることを奥義としている。毎週、公用車で湯河原へ通っている若きクリエイターである。