2019年10月5日htmlを楽に作るため、Pugの基本的な使い方を解説します。筆者は先日までejsでhtmlを作っていましたが、Pugに乗り換えました。Pugの基本的な書き方Pugでhtmlを作るのに知っておくと便利な使い方を紹介します。Pugを使ってみたいejsからPugに乗り換えたいという人におすすめな内容です。まとめPugのメリット最初にPugでhtmlを作るメリットをまとめます。ヘッダーやフッターの共通部分のhtmlを別ファイルに作れる変数やfor文を使って、htmlを楽にたくさん生成できるレイアウト毎に使用するテンプレートを切り替えれる共通部分をパーツ化して作れるため、htmlで大量ページを制作するときに便利です。ejsを使っていたので、ejsとPugの違いを比較します。閉じタグがないため、ejsよりもPugの方がソースコードの行数が少なくシンプルにPugはejsと違い、基本的にhtmlで記述しないため、ejsよりもPugの方が導入コストがちょい高い(といっても、難しくないのでそんな差はありませんが。)Pugなら、PreprosやCodekitなどのGUIタスクランナーでコンパイルできる。ejsはコンパイルにGulpなどが必要ejsはほぼほぼhtmlで、変数やループなど細かい部分はjavascriptなので学習コストほぼない感じですが、Pugは書き方を最低限覚える必要があるため、ちょっとだけ学習コストかかります。両方やった身としてはpugの方がシンプルにかけると思います。pugやPreprosやCodekitで簡単にコンパイルできるので、とりあえずコンパイルさせる環境作るだけならpugが楽です。Pugの導入Pugをコンパイルさせるだけなら、Guiのタスクランナーである、CodekitやPreprosを導入するのが楽です。SassやPugを楽にコンパイルするならPreprosでOKちゃんとやるのなら、GulpやWebpackなど使うことになるかなと。Gulp:GulpでPugとSassをビルドしてBrowserSyncでライブプレビューするWebpack:webpackだけでpugをビルドする環境を作るちなみに、ブラウザでサクッとコンパイルすることもできたりします。https://html2jade.org/試しにPug触ってみたいなら、↑のページで遊んでみるといいかなと。Pugの使い方Pugの書き方は少し特殊です。htmlで言う閉じタグがない「>」や「<」などがない実際のソースコードは↓のような形です。TOP↑のような形でPugは記述されまして、ものすごくシンプルです。↑をコンパイルすると↓のようになります。</div></main>こう見ると、Pugだとコード数が少なくhtmlで記述できるのがわかるかと。以下に、Pugでの基本的な記述方法をまとめます。テキストテキスト↑を出力すると↓に。#{item}↑を出力すると↓に。include/_head.pugPugのテンプレートサンプル全てのインクルードを入れると長いので一部だけ。rel="stylesheet">こんな感じにやるとhtmlで大量ページを作るのに楽になります。まとめ基礎的なPugの使い方をまとめてみました。レイアウト周りの内容があるのですが、まだ使いこなしていないので一旦飛ばしています。Pugを使って見るのならこの記事の内容だけである程度はいけるんじゃないかなと。単純なLPを作るだけでもPug使って、変数+foreachでhtml作るだけでも結構楽に作れるようになります。テンプレートエンジンejsの使い方まとめ【読み放題】kindleアンリミテッドで実は技術書が読めるAmazonに、読み放題のkindleアンリミテッドがあるのですが、実は技術書もあります。3,000円とかが当たり前の値段だったりして結構高いのでkindleアンリミテッドで技術書を読むのも結構アリだなと思ってます。kindleアンリミテッドは月額980円するのですが、全部無料で読むことができるため、本を買うよりお得。月に1冊技術書を読むのなら、確実に得するので、本で勉強するのが好きな人は、kindleアンリミテッドに入るのがおすすめです。初回は30日の無料体験ができて微妙ならすぐに解約できるので、一度登録してみるのはアリなんじゃないかと。...テンプレートエンジンejsの使い方まとめ静的htmlで大量ページを作ったりした時に便利なejsの使い方を紹介します。...Webサイト高速化の改善ノウハウが溜まったので知見をまとめた一時期、webサイトの高速化にハマってました。エックスサーバーオススメの理由エンジニア向け最近エックスサーバーから移行しました。