よくプログラミングのスキルとかにHTMLできますとか書かれたりするけれど
「プログラミングって順次、分岐、反復の3つの処理ができて初めてプログラミングというような気がするんだ。だから文書構造をタグで挟んで指定するマークアップ言語ってプログラミング言語と呼べない気がするんだよね。」
「果たしてそれはどうかな?」
「誰だお前は!! お前はっ!? Pug!!」
ここまで茶番
Pugでなにか作ろう
そんなわけでPugを使って、何か作ろうと思います。
Pugってなんぞや
PugはHTMLテンプラートエンジンです。HTMLの作成を助けてくれり簡単にしてくれる雛形です。テンプレだけど前述した3つの処理っぽいことが普通に実装できたりするのでちょっと高度なことをしたい時に便利かもしれません。
ちなみに利用するにはNode.jsが必須なので注意。
$ npm install pug
でインストール。
友達測定器をつくった
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>友達力診断</title> </head> <body> <h2>友達力測定</h2> <p>君に友達はいないよ。友達力は0だ。</p> <h2>友達並べ</h2> <p>君の友達をランキングにしたよ</p> <ol> <li>ウィルソン (バレーボール)</li> <li>......</li> </ol> <p>無理して友達を並べなくていいよ。</p> </body> </html>
こうしたものをつくりました。
出来たものは何の変哲もないHTMLファイルです。面白みがないのでHTMLになる前のファイルを確認していきましょう。
doctype html html(lang="ja") head meta(charset="utf-8") title 友達力診断 body h2 友達力測定 //- 友達の数を入力してね - var friends = 0 - var friendsPowerRnd = Math.floor(Math.random() * 10) - var friendsPower = friends * 10 + friendsPowerRnd case friends when 0 p 君に友達はいないよ。友達力は#{friendsPower}だ。 default p 君の友達の数は#{friends}人だよ。友達力は#{friendsPower}だ。 h2 友達並べ //- listに友達を入力してね p 君の友達をランキングにしたよ ol - list = ["ウィルソン (バレーボール)", "......"] each friends2 in list li= friends2 if friends === 0 p 無理して友達を並べなくていいよ。 else p 以上だよ。
こちらをPugファイル(.pug)で保存します。
そして、pug (作成したファイル名).pug -P
コマンドでコンパイルします。すると上のようなものをつくることができます。
変数にMath.random()を使えばおみくじみたいなものもできるね。でも、ローカルでそんなものを作ってもアレだよね...勉強にはなりそうだけど......
ところでコンパイルして使うこの手のテンプレートエンジンってHTMLに分類されるの?