こんにちは！
仕事でHTMLのマークアップとかをゴリゴリにやっているのですが、今回は僕の開発環境を教えます。

僕が仕事する上で一番重視しているのが「速さ」です。
TitleやDescriptionに入れるテキストが決まってなかったりと要件定義が曖昧な状態でもスタートせざるを得ない「しんどい状況」の時があります。

そんな状況の時は「鬼チェック&鬼リターン」がくることは想定できるので、納期のことも考慮して「とにかく早く！まず早く！」作業することを心がけています。

では、下記が僕の環境です。

注意：インストール方法や使い方の説明は今回してませんツール名や簡単な紹介だけに留めておきます。※需要があれば書きます。

・Gulp 4系
・PUG
・Sass​

■Gulp
言わずと知れたnode.jsをベースに動くタスクランナーです。
PugやSassもGulpの上で動かすことができます。

必要なプラグインを入れることによってCSSやJSのminfy化・画像の圧縮・ライブリロードなど本当にめんどうな処理をやってくれるのでこっちは余計なことを気にせずにマークアップに集中できます。

Gulpでサーバーを立ち上げると「スマフォ・タブレット・PCなどのデバイス間で、リロードやスクロールなどを同期」してくれるので「ソース更新→3デバイスのブラウザ更新」をいちいち手動でやらないで済むのが個人的に一番ストレスなくて助かってます。

これがなかったら仕事できませぬ！

※なお、Gulp 3x系と4x系で書き方が変わるので注意が必要です。

■PUG
PUG（パグ）と読みます。拡張子は.pugです。
Pugは、HTMLを効率的に書くためのテンプレートエンジンです。
使い方はSassみたいな感じでビルド時に.pugファイルをHTMLファイルに変換して出力してくれます。

僕がPUGを使ってて、いいやんこれ！と思ったのは下記の3つ

・変数がつかえる
・ヘッダーやフッターなど共通部分をテンプレート化できる
・配列を元にループ出力できる。

こんな時に役立ちます！
●ケース①
ディレクター「ごめーん。サイトに表示する電話番号が間違えてたみたい。直してくれる（20ページぐらいあったっけ）？」
僕「了解です。（1分後）できました。（変数に入れてたんでそこだけ変更すりゃOK）」

●ケース②
ディレクター「ごめーん。グロナビに項目追加してくれる？今の5個から7個に変更（20Pぐらいあったっけ）？」

僕「了解です。（5分後）できました。（配列をループして出力してるので配列を調整すればOK）」

●ケース③
ディレクター「ごめーん。サイドバーのレイアウト変更だわ。このレイアウトに変えてくれる（20Pぐらいあったっけ）？」

僕「了解です。（15分後）できました。（テンプレート化してたんでそこだけ変更してCSS調整すりゃOK）」

上記みたいなことはよくあります。ディレクターが本当に〇〇だったりクライアントの返答が遅すぎたりという理由で。。。

※Vue.jsのテンプレートをPugで書くこともできます。


■Sass
Sass（サース、サス）と読みます。拡張子は.scssです。
Sassは、 CSSを効率的に書くためのテンプレートエンジンです。
膨大な数のCSSファイルを扱う場合や同じようなスタイルを何回も定義する場合などの時にSassはとても便利です。

いいやんこれ！と思ったところはPUGと似てますが下記の通り。

・変数がつかえる
・関数を定義できる（Mixin）
・関数を継承できる（Extends）
・セレクタ指定に入れ子にできる
※セレクタ指定を入れ子にしすぎるとわけわからなくなるので、あまり深い入れ子にしない方がいいです。

こんな時に役立ちます！
●ケース①
ディレクター「ごめーん。クライアントが違う配色パターンも見て見たいって言ってるからちょっと変更してくれる？」
僕「了解です。（5分後）できました。（配色は全て変数に入れてたんでそこだけ変更すりゃOK）」

●ケース②
ディレクター「ごめーん。ブレイクポイントを600pxから768pxに変更して？」

僕「了解です。（5分後）できました。（ブレイクポイントは全て変数にしてたのでそこを変更すりゃOK）」

●ケース③
ディレクター「ごめーん。このブロックの縦並びじゃなくて横並びにしてくれる？」

僕「了解です。（10分後）できました。（Mixinで定義してるのでそこだけ変更すりゃOK）」

とまぁ、簡単ではありますが「PugとSassを使うとこんな時に便利だよ！」というケースをあげてみました。

もちろん、Rubyを使えばSassも使えるし、PHPを使えば変数もテンプレート化もできることは承知の上です。

しかし、上記の場合Xampp（Mamp）やDocker起動したり、ライブリロードが使えないなどの地味なデメリットもあります。
速さに重点を置いた時にはGulpが一番いいと個人的には思っています。

特にレスポンシブのマークアップなんてスマフォ・タブレット・PCの表示確認しないといけませんので、「ソース更新→3デバイスのブラウザ更新」なんて手動で何百回もやってられませぬ。

以上です。では、よいマークアップライフを。

※Gulpの環境の構築方法などの、「もっと細かく具体的に！」のリクエストはコメントなどでお知らせください。多いようでしたら書きます。

最後まで読んでいただいてありがとうございます。