HTML

もともと1枚の静的HTMLで作っていた事業用サイト。 こちらに少しページを足したくなったのですが、いざ静的HTMLでページを増やそうと思うと、ちょっとした悩みが… 「HTMLファイルを増やして後からヘッダーとかフッターとか変更した時に各ページにコピペは面倒だなぁ… パーツ化して使えるようにしたいなぁ…」 ということで、やり方は色々あると思いますが、今回はお勉強を兼ねて「Pug」というテンプレートエンジンを使ってみました！ その入門備忘録をまとめます Pugとは 今回はざっくりとした説明とさせていただきますが、「Pug」とはHTMLを書くためのJavaScriptテンプレートエンジンです Pug Pugで書いたファイルはサーバー上にアップロードしてもそのままWebページとしては表現できないので、Pug→HTMLに変換する必要があります Sassを使ったことがあれば、Sass→CSSに変換して使う…といった流れに似た形になりますのでイメージしやすいかと思います！ 今回やりたかったこと 今回Pugに入門するにあたり、期待していたことはこちら▼ ページ自体は静的なHTMLで作りたい header,footerなど各ページ共通な部分はパーツ化して変更に強い状態にしておきたい とりあえずコレだけ。 他の方法もあったかもしれませんが、ひとまずキーワード的に頭にあったのと、gulpで簡単に開発環境構築できそうだったのでPugを使ってみることにしました Pugの書き方と開発環境構築 まずはPugの構文についてのまとめと、gulpでの開発環境についてまとめます Pugの書き方 ※各コードの説明の先頭行にある//Pug,&lt;!--HTML--&gt;は本記事での説明用に付けているもので、実際の変換結果とは違います。ご了承下さい タグの書き方 PugでHTMLタグを書く場合、「[HTMLタグ] + スペース + テキスト」のように書いていきます 閉じタグなどは必要ありません // Pug p ああああ &lt;!-- HTML --&gt; &lt;p&gt;ああああ&lt;/p&gt; 入れ子の書き方 Pugはインデントで階層を表現します インデントはスペースでもタブでも大丈夫ですが、スペースとタブが混在するとエラーになるので注意が必要です （Editorconfig等で固定しておくと安心） // Pug h1 第1階層 div h1 第2階層 div h1 第3階層 div ああああああ &lt;!-- HTML --&gt; &lt;h1&gt;第1階層&lt;/h1&gt; &lt;div&gt; &lt;h1&gt;第2階層&lt;/h1&gt; &lt;div&gt; &lt;h1&gt;第3階層&lt;/h1&gt; &lt;div&gt;ああああああ&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; id,classの付け方 id,classは#,.を使って表現します Emmetを使ったことがあれば特に難しいことは無いと思います idとclassをつける順に指定はなく、複数のクラスを付ける場合はそれぞれ.でつなげていきます // Pug div#id-sample div.class-sample div.class-sample#id-sample.class-sample2.class-sample3 &lt;!-- HTML --&gt; &lt;div id=&quot;id-sample&quot;&gt;&lt;/div&gt; &lt;div class=&quot;class-sample&quot;&gt;&lt;/div&gt; &lt;div class=&quot;class-sample class-sample2 class-sample3&quot; id=&quot;id-sample&quot;&gt;&lt;/div&gt; 属性の付け方 aタグのhrefだったり、titleなどの属性は「HTMLタグ + (属性)」の形で書いていきます // Pug a(href=&quot;#&quot;) コレはリンクです img(src=&quot;hoge.jpg&quot; title=&quot;画像&quot;) div(v-bind:title=&quot;message&quot;) &lt;!-- HTML --&gt; &lt;a href=&quot;#&quot;&gt;コレはリンクです&lt;/a&gt; &lt;img src=&quot;hoge.jpg&quot; title=&quot;画像&quot;/&gt; &lt;div v-bind:title=&quot;message&quot;&gt;&lt;/div&gt; テキストを改行する 長い文章などを改行して書きたい場合は|とbrを使います // Pug p | 1行目 br | 2行目 &lt;!-- HTML --&gt; &lt;p&gt;1行目&lt;br/&gt;2行目&lt;/p&gt; HTMLタグをそのまま書く HTMLタグの後ろに.を付けて入れ子にすることで書いたタグをそのままHTMLに反映してくれます // Pug div. &lt;iframe src=&quot;https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3211.764543391398!2d139.05838716530198!3d36.39069363003499!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601ef322960966dd%3A0xcfe5b33052dd7d72!2z44CSMzcxLTAwMjYg576k6aas55yM5YmN5qmL5biC5aSn5omL55S677yR5LiB55uu77yRIOe-pOmmrOecjOW6gQ!5e0!3m2!1sja!2sjp!4v1512255596808&quot; width=&quot;600&quot; height=&quot;450&quot; frameborder=&quot;0&quot; style=&quot;border:0&quot; allowfullscreen&gt;&lt;/iframe&gt; &lt;!-- HTML --&gt; &lt;div&gt; &lt;iframe src=&quot;https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3211.764543391398!2d139.05838716530198!3d36.39069363003499!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x601ef322960966dd%3A0xcfe5b33052dd7d72!2z44CSMzcxLTAwMjYg576k6aas55yM5YmN5qmL5biC5aSn5omL55S677yR5LiB55uu77yRIOe-pOmmrOecjOW6gQ!5e0!3m2!1sja!2sjp!4v1512255596808&quot; width=&quot;600&quot; height=&quot;450&quot; frameborder=&quot;0&quot; style=&quot;border:0&quot; allowfullscreen&gt;&lt;/iframe&gt; &lt;/div&gt; コメント Pugのコメントは行の先頭に//を書きます。 また、//-のように二重スラッシュの後にハイフンをつけることでHTMLに残らないコメントにできます // Pug // コメント //- HTMLに変換されないコメント &lt;!-- HTML --&gt; &lt;!-- コメント --&gt; Pugの開発環境をgulpで構築 自分がいつも使っているということもありまして、本記事ではgulpを使ってPugの開発環境を構築してみます ▲今回はこんな感じなフォルダ構成になるようにしてみました pugフォルダ以下の階層はHTML変換後も保ってくれるのでひと安心 gulpのインストール ※npm init等は済んでいるものとします gulpとPugの変換に必要なパッケージgulp-pugをインストールしておきます $ npm install gulp --save-dev $ npm install gulp-pug --save-dev gulpfile.js 今回は以下のようなgulpfile.jsを用意しました var gulp = require('gulp'); var pug = require('gulp-pug'); var src_pug = [ './src/pug/**/*.pug', '!./src/pug/**/_*.pug' ]; gulp.task('pug', function(){ return gulp.src(src_pug) .pipe(pug({ pretty: true })) .pipe(gulp.dest('./')); }); 準備ができたら以下のコマンドでPug→HTMLの変換を実行します $ gulp pug 無事変換が出来ればOKです Pugファイルの変更を監視して自動で変換する これまでの状態だと、Pug→HTMLの変換は毎回コマンドを叩く必要がありますので、ファイルの変更があったら自動で変換してくれるようにカスタマイズしてみます ファイル監視用のパッケージとエラー処理用のパッケージをインストールします $ npm install gulp-watch --save-dev $ npm install gulp-plumber --save-dev gulpfile.jsも編集します var gulp = require('gulp'); var pug = require('gulp-pug'); var plumber = require('gulp-plumber'); var watch = require('gulp-watch'); var src_pug = [ './src/pug/**/*.pug', '!./src/pug/**/_*.pug' ]; gulp.task('pug', function(){ return gulp.src(src_pug) .pipe(plumber({ errorHandler: function(err){ console.log(err.messageFormatted); this.emit('end'); } })) .pipe(pug({ pretty: true })) .pipe(gulp.dest('./')); }); gulp.task('watch',['pug'],function() { watch( './src/pug/**/*.pug', function(event) { gulp.start('pug'); }); }); あとは以下コマンドを1回実行すれば、ファイルが変更されるたびに自動でPug→HTMLの変換を実行してくれます $ gulp pug おまけ：atomユーザーはlanguage-pugを入れておくといい 僕はエディタにatomを使っているので、atomの話を少し… もし、pugファイルを編集中にシンタックスハイライトが効かない場合は「language-pug」というパッケージをインストールすることをオススメします だいぶ編集しやすくなると思います Pugファイルを分割してパーツごとに読み込む これまでPugの基礎的な部分を学んだので、ここからは実際にやりたかった「パーツごとに分割したファイルをくっつけて1つのHTMLを作る」ということに挑戦します 「include」でファイルを読み込む 別のPugファイルを読み込むためにはincludeという構文を使います 今回は例としてindex.pugからinc/_header.pugファイルを読み込んで1つのHTMLを作ってみます ※読み込むファイルはindex.pugと同階層にincというフォルダを作りその中にまとめて置きました // index.pug doctype html html(lang=&quot;ja&quot;) head meta(charset=&quot;utf-8&quot;) title Pugに挑戦 body include inc/_header main h2 コンテンツ部分です p コンテンツコンテンツコンテンツ… // inc/_header.pug header h1 ここはヘッダーです includeにつづいて読み込むファイルまでのパスを記述します includeするファイルの拡張子は省略して書くことができます 出来上がったHTMLはこちら▼ &lt;!-- index.html --&gt; &lt;!DOCTYPE html&gt; &lt;html lang=&quot;ja&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Pugに挑戦&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;h1&gt;ここはヘッダーです&lt;/h1&gt; &lt;/header&gt; &lt;main&gt; &lt;h2&gt;コンテンツ部分です&lt;/h2&gt; &lt;p&gt;コンテンツコンテンツコンテンツ…&lt;/p&gt; &lt;/main&gt; &lt;/body&gt; &lt;/html&gt; 無事、index.pugと_header.pugを組み合わせて1つのHTMLファイルを作ることができました！ 「extends」でレイアウトを継承する includeだけでも僕のやりたいこととしては十分そうですが、extends(継承)を使うと複数ページを作る時にもっと効率よくできそうなので頑張って覚えてみます まずはHTMLの型とでも言ったらいいでしょうか…レイアウトを定義するファイルを用意します // layout/_layout.pug doctype html html head meta(charset='utf-8') block title body include ../inc/_header block content h1 Default Content include ../inc/_footer _layout.pugでincludeしている_header.pugと_footer.pugはこちら▼ // inc/_header.pug header h1 ここはヘッダーです // inc/_footer.pug footer p フッター ここまでのファイルは個々のページで読み込むファイルになります。 実際に作成するページをindex.pugとして作ってみます // index.pug extends layout/_layout block title title Pugの練習 block content section h1 ココはコンテンツ部分 section h1 block + [ブロック名]で対応するブロックの内容を書いていきます 先頭のextends layout/_layout.pugで、_layout.pugを元にページを構成していきます extendsより下に書かれているblock [ブロック名]は_layout.pug内のblock [ブロック名]に対応しています 対応する_layout.pug内のblockの内容がindex.pugに書いたblockの内容に置き換わります block [ブロック名]部分を個々のページで拡張していくイメージですかね 出来上がったHTMLはこんな感じになります▼ &lt;!-- index.html --&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Pugの練習&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;header&gt; &lt;h1&gt;ここはヘッダーです&lt;/h1&gt; &lt;/header&gt; &lt;section&gt; &lt;h1&gt;ココはコンテンツ部分&lt;/h1&gt; &lt;/section&gt; &lt;section&gt; &lt;h1&gt;block + [ブロック名]で対応するブロックの内容を書いていきます&lt;/h1&gt; &lt;/section&gt; &lt;footer&gt; &lt;p&gt;フッター&lt;/p&gt; &lt;/footer&gt; &lt;/body&gt; &lt;/html&gt; _layout.pugでincludeしたヘッダー・フッターが展開されていることはもちろん、index.pugに書いたblockの内容がちゃんと展開されました！ まとめ それでもページ内の要素をパーツごとに分割して使えるのは非常にありがたいですね あとは、pugファイル内で変数やfor文が使えるなど、プログラミングチックなことも出来るようなので、徐々に挑戦していきたいと思います。 今回お勉強に使ったファイルはGitHubに上がっています▼ yosiakatsuki/try-pug: pug練習用 Pug→HTMLへ変換する為の環境を用意しなければならないという点がEmmetに比べてちょっと面倒ですが、LP制作案件とか来たら効率よくなりそうなので仲良くしていこうと思います！ ワンワン ではまた。

共通部分はパーツ化してHTMLページを作りたい！ということでPugに入門してみた

新着記事

著書です