クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【Emmet, Haml, Markdown, Slim, Pug】HTMLテンプレートエンジン事始め

HTMLをより少ない記述量で書くことができる「テンプレートエンジン」。Haml, Slim, Pagなどをよく見聞きしますね。
これらの形式をブラウザで表示するためにはHTMLにコンパイル(変換)する必要があります。その環境構築が第一難関です。
が!CodePenを使えば環境構築なしにテンプレートエンジンを体験することができます!!早速やってみました。

目次:

※参考:HTMLの基本についてはこちら
【HTMLの基本】書ける前に読む!HTML、CSS、JSの書式-2

CodePenのSetting(設定)変更

CodePenでどうやってテンプレートエンジンを体験するか。まずは設定を変更する必要があります。
右上にある「Setting」をクリックしてください。「HTML」「CSS」「JavaScript」などのタブがありますので、変えたいタブを開くと、「HTML Preprocessor>HAML」などが選択できます。jQueryのCDNリンクなどもこのSettingで設定します。
英語メニューのため、何気にここに辿り着くのもハードルかもしれません…。 f:id:idr_zz:20170911063123p:plain

さあ、それではCodePen Settingの旅の幕開けです!

Emmet

とその前に…初めにいきなり「テンプレートエンジン」とは少し違うのですがCodePenが標準で対応しているという「Emmet」を試してみたいと思います。 テキストエディタにプラグインとして拡張するツールのようですが、CodePenでは標準機能のためSettingも何も変える必要はないようです。

例えば「div>h1+p」などタグ名を足し算のように「+」で繋げて書いて、その後にタブをクリックするとパッと変化してくれるらしいのですが…

おお!<div><h1></h1><p></p></div>に変化した!
ここに中身を入れていくわけか。これば便利!しかしながら、変化した後の修正は通常のHTMLと変わらないわけね。不可逆。

Emmetは昔は「Zen-Coding」と呼ばれていたそうです。禅コーディング!渋い!HTML以外にCSSにも色々使えるようです。JSはないみたい。

Haml

お待たせしました。それではCodePen、Settingの旅を始めましょう。ズラズラと並んでいますが、正直何がどう良いのかなどの知識も気迫なので上から順番に体験してみたいと思います。

最初はHAML。ハムル。ハムスターのような可愛い名前ですね。

HAMLの主な記法

  • タグにしたいものの前に「%」をつける。
  • インデントは半角スペース2個分。
  • 入れ子もOK。
  • 閉じタグは不要。

実際にやってみました。 「HAML」などのタブを切り替えてみてください。「Result」が最終的な表示です。

こ、これは、かなり楽ですね!Emmetと違って修正もそのままできるのがいいです。

コンパイル後のコード表示

HAMLを実際にHTMLにコンパイルするにはRubyの開発環境が必要です。CodePenの場合は右上の「v」アイコンから「View Compiled HTML」をクリックすると… f:id:idr_zz:20170911071229p:plain コンパイル後のHTMLが確認できます! f:id:idr_zz:20170911071157p:plain 同じ場所からHAMLにまた戻れます。

Markdown

2番目は「Markdown」。マークダウン。色々なブログなどで採用されていてWordpressでも拡張が可能。このはてなブログの投稿もマークダウンで書いています。

Markdownの主な記法

  • 見出しは「# 」をつける。
  • 「##」が2つだと見出し2になる。
  • 「###」が3つだと見出し3になる。
  • 改行2つで段落になる。
  • アスタリスク1つでイタリック
  • アスタリスク2つで太字になる。

Slim

3番はSlim。スリムに書けそうな名前です。

Slimの主な記法

  • インデントが半角スペース
  • idの書き方
    タグの後ろに#hogeと続ける。
  • classの書き方
    タグの後ろに.hogeと続ける

Hamlと比べるとタグに「%」の印も不要で確かにスリムです!

Slimを実際に使うには、Hamlと同様にRubyの開発環境が必要なようです。

Pug

最後はPug。なんとも愛らしい名前ですが、昔は「Jade」というV系バンドのようなカッコいい名前だったようです。

Pugの主な記法

  • pugはタグはなくて、閉じタグも不要。
  • インデントによって入れ子を作る。
  • 複数行のテキストは「|」を入れる。
  • idは「#」、classは「.」を要素に続けてかく。

なんだかSlimとほとんど違いがないような。

PugとSlimの一番の違いはコンパイル方法で、Pugの場合はRubyではなくNode.jsでコンパイルするようです。

まとめ

HTMLを楽に記述する方法としては、テキストエディタの拡張機能であるEmmet、ブログなどで採用されてるマークダウンと、テンプレートエンジンHaml、Slim、Pugなどがあります。

テンプレートエンジンではHamlが先発で、さらにスリムにしたのがSlim、Pug。どちらを採用するかは、RubyならSlim、NodeならPug、など開発環境で決める。という理解でいいでしょうかね。

CodePenのSettingではCSSやJSを楽に記載できるAltCSS、AltJSも体験できます。
次回は「AltCSS」についてまとめます!


※参考:HTMLテンプレートエンジン、AltCSS、AltJSまとめました!

HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ(3記事) - クモのようにコツコツと idr-zz.hatenablog.com