tanatiyo この記事では、Gulp導入時に出会ったpugというものについて簡単に触れておきたいと思います。
Pug（パグ）とは、HTMLを効率的に書くための記述方法で、テンプレートエンジンと呼ばれるものの一つ。
Pugでできることなどを、記事最下部の参考サイトより参照してまとめました。
①開始タグと閉じタグを書かなくていい→インデントすることで入れ子構造になる。逆にそこに気を付ける。
②pug内の文章中にHTMLも記述できる
③CSSと同じようにclassなら「.～」、idなら「#～」と書くことが出来る→CSSからコピぺが簡単にできる。
④divタグの省略した書き方ができる→タグ名を記載せずに「.～」、「#～」で記載すると自動的にdivタグに変換される。
⑤ファイルを分割して読み込みできる→大きいサイトでもヘッダーの修正はheader.pugの修正で対応が可能だったりする。
⑥共通の画像パスやリンクパスを変数に代入し、適宜呼び出して使える。
⑦繰り返し処理が書ける→配列に必要事項を記述することで自動的に繰り返される。クラス名を変更したい場合も、一か所だけの変更で済む。
以上です。ページ数が多くなっていったり、階層が深くなっていったりする時ほどより力を発揮しますね。
とくに⑤、⑥、⑦あたりはJavaScriptみたいで面白いなと感じます。
Web制作独学ロードマップの中級に現在いますが、Sassの勉強をして、モジュールを別ファイルで管理することが「とても便利！」と感じていました。HTMLにも似たようなことができるんですね。JavaScriptの方はwebpackで出来ますし、ここら辺をマスターして使いこなせるようになれば、大きなサイトや階層が深いページも安心して扱っていけそうです。
とりあえず、今日はここまで。次回はpugについてもっと詳しく書いてみたいと思います。
参考サイト：https://and-ha.com/coding/what-is-pug/
：https://haniwaman.com/pug/