コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

常々思うけれどHTMLってプログラミング言語なのかなって

Pug
よくプログラミングのスキルとかにHTMLできますとか書かれたりするけれど

「プログラミングって順次、分岐、反復の３つの処理ができて初めてプログラミングというような気がするんだ。だから文書構造をタグで挟んで指定するマークアップ言語ってプログラミング言語と呼べない気がするんだよね。」
「果たしてそれはどうかな？」
「誰だお前は！！ お前はっ！？ Pug!!」

ここまで茶番

Pugでなにか作ろう

そんなわけでPugを使って、何か作ろうと思います。
Pugってなんぞや
PugはHTMLテンプラートエンジンです。HTMLの作成を助けてくれり簡単にしてくれる雛形です。テンプレだけど前述した3つの処理っぽいことが普通に実装できたりするのでちょっと高度なことをしたい時に便利かもしれません。

公式
Getting Started – Pug

ちなみに利用するにはNode.jsが必須なので注意。
$ npm install pugでインストール。

友達測定器をつくった

f:id:andron:20161010113935p:plain

<!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に分類されるの？

[トップへ]