コーダー日誌
公開日：2019/11/22
派遣先の某web制作会社にて「pugって知ってる？」と突然言われました。
犬かいな？と思って話を聞いてみると、そう言えば、むかーし何かの記事で読んだことがあるなぁと思いだしてきました。
結局のところ、pugで書かれたhtmlの修正案件だったわけですが、実務で遭遇したのはこれが初めだったので、貴重な体験をさせていただきました。
pugは昔はjadeって呼ばれてたらしいですが、大人の事情で改名されたっぽいです（そういや、jadeももっと昔に聞いたことあるなぁ）。正確な情報はGoogle先生におまかせします。
テンプレートエンジンと呼ばれるもののひとつで、pugはjsベースでできています。
pugとはなんぞやでよく聞くのは、HTMLのsassみたいなものという説明です。
記法とか、コンパイルが必要なところもsassに似ています（以前の記事、「sassとかflocssとか」で紹介しているリンク先のほとんどは、scss記法で説明されていますが、ここでいうsassはsass記法の方を言っています）。
htmlコーディングの効率化というやつですね。
でも、それだけではなくて、テンプレートエンジンと呼ばれるだけあって、たとえば、ヘッダー・フッターといった共通部分を分割してファイルを分けることもできます。
ほかにifで条件分岐できたり、forで繰り返しができたり、変数やら配列やらが使えたり、プログラムチックなこともできます。
使うための準備さえ乗り越えれば、pugもそんなに難しいものではありません。
慣れちゃば、<と>を書かなくても良くなるだけでも、かなりハッピーになるんじゃないかな？
gulpなどを導入したことがあるひとは、設定とかもそれほど難しくないはず（gulpが必須なわけじゃないよ！Node.jsは必要だよ！）。
注意点としては、pugに限らずですが、導入前に作業環境や使っているツールなどとの相性を確認し、なにかしらの問題があったとしても導入すべきなのか、そこまでしてリスクを負うべきではないのかを検討することです。
メリットのほうが大きければ、問題を回避する方法を探るか、放置してもいい問題かなども調査・検討して、対策すると安心でしょう。
ちゃんと調査・検討して、関係各所にも根回しして、導入にかかる（人的）コストやその他諸々認識合わせをしておかないと、かえって面倒なことになるかもしれません・・・。
ちらっとGoogle先生に打診したところでは、以下のような話があるようです。参考までに。
というわけで、pugさんの参考記事のリンクをどうぞ。
例によって、最新情報や、もっと詳しくはGoogle先生たちにお願いしたいと思います。
テンプレートエンジン関連でもうひとつ。
このコーダー日誌では、以前の記事「超雑い！gulpの話」でもちらっと触れたとおり、ejsを使っています。
ejsもnode.jsで動くjsテンプレートエンジンです。
pugとの大きな違いは、htmlを記述するのに独特の記法を使わずに、いつもの<と>で囲んだタグを使用する点かなぁ。（htmlに関しては）記法についての学習は必要ないので、導入してもすんなり受け入れられるのは良い点かと思われます。
ejsも各ページの共通部分を別ファイルに分割して使いまわせたり、条件分岐とか変数とかプログラムチックに使えたりします。
このようにテンプレートエンジンもいろいろあります。
jsだけじゃなくてphpベースだったりというものもあるので、環境に合わせて選択してみてください。
以下、ejsさんの参考記事のリンクをどうぞ。
せっかくなので。
これを機会にコーダー日誌でもmeta管理をjsonさんでしようかなぁと急に思い立ちました。上記のリンク先を参考に対応してみます。
コーダー日誌はgulpでejsを利用していて、すでに諸々設定済ですが、参考までに関係するgulpfile.jsのコードを抜粋してみます。
const gulp = require('gulp');
const fs = require('fs');
const ejs = require('gulp-ejs');
const rename = require("gulp-rename"); //.ejsの拡張子を変更
const json = JSON.parse(fs.readFileSync("JSONさんのパス","utf-8"));
const ejsFunc = () =>
gulp
.src(["../ejs/**/*.ejs", "!" + "../ejs/**/_*.ejs"])
.pipe(ejs({json:json}, {}, { ext: '.html' }))
.pipe(rename({extname: ".html"})) //拡張子をhtmlに
.pipe(gulp.dest("出力先のパス")); //出力先変数jsonに使いたいjsonファイルをパースして、.pipe(ejs(～))でejsでjsonさんを使えるようにしています。
JSONさんの中身は以下のような感じになっています。
{
"sample0002": {
"title": "超雑い！gulpの話",
"description": "省略",
"tag": "<span>[備忘録]</span><span>[gulp]</span>",
"url": "sample0002.html"
},
"sample0001": {
"title": "超雑い！バージョン管理の話",
"description": "省略",
"tag": "<span>[備忘録]</span><span>[バージョン管理]</span>",
"url": "sample0001.html"
},
"old": {
"title": "旧コーダー日誌",
"description": "",
"tag": "<span>[html]</span><span>[css]</span><span>[js]</span>",
"url": "old/index.html"
},
"index": {
"title": "コーダー日誌 coder's log",
"description": "省略",
"tag": "",
"url": "index.html"
}
}たとえば、コーダー日誌ではトップ（ホーム/index）ページにある各ページへのリンクと、各ページ共通のメニューは同じ_gnav.ejsというファイルを読み込んでいます。
これまでは各ページのタイトルをコピペしてリストを作っていましたが、こんな感じに繰り返し処理で自動生成してくれるようになりました。
<ul><% for (var key in json) { %>
<% switch ( key ) {
case "index":
continue;
} %>
<li><a href="<%= json[key].url %>"><%- json[key].tag %><span><%= json[key].title %></span></a></li>
<% } %></ul>JSONさんのデータは各ページのタイトル表示やdescriptionでも利用しているので、JSONさんさえ修正すれば、同じデータをよみこんでいるところは一気に書き換わるので、修正漏れがないという安心感があります。
効率化の流れで昔なつかしzen-coding改め、emmetさんについても少し触れます。
emmetさんはテンプレートエンジンではなくて、入力補助をしてくれるテキストエディタの拡張機能です（いろいろなエディタに対応しています）。
たとえば、テキストエディタでdivと入力して特定のショートカットキーを押すと、<div></div>と変換してくれます。
実はhtmlだけではなくcss(style内やcssファイル内)なら、例えばmtと入力して特定のショートカットキーを押すと、margin-top: と変換してくれます。
近頃の高機能エディタはわざわざ拡張しなくても予測変換してくれたりもするので不要かもしれませんが、慣れや好みに左右されるものの、わりと直感的に使える便利な機能かと思います。
最近はemmetさんのダウンロードから始めなくても、標準搭載しているエディタもあれば、webブラウザの拡張機能（アドオン）のような感覚で拡張できるエディタもあります。カスタマイズの仕方もネットに落ちているので、emmetさんを発動させるショートカットキーを変更するとか、入れ子のときに改行するかしないかといった程度のカスタマイズなら簡単にできたりもします。詳しくはGoogle先生たちに訊いてください。
emmetさんも極めればいろいろ便利な機能がありますが、単純にキーワードを入力してショートカットで変換程度でも、<と>の入力をわざわざしなくても良い分、かなりコーディングが楽になると思います。閉じ忘れも回避できますし。
emmetさんのポテンシャルをすべて引き出す必要はないので、憶えられる機能や自分のコーディングのクセに合いそうな機能だけでも使ってみると良いと思います。
pugはともかく、htmlの特別な記法がないejsのようなテンプレートエンジンを使うときも、強い味方になってくれそうです。
go to homeindex