あれから１ヶ月弱。Harpを仕事で使いつつ、コーディングをjadeでやっています。まだ使いこなしてるとは言い難いですが、だいぶ慣れてきました。
Harp内でのjadeの位置付けについて
Harpは、スタティック・サイト・ジェネレータです。Harp内では、下記の3種類の方法でHTMLを書くことが可能です。
* EJS documentation
* Jade templating
* Markdown
この記事は、Harp内で、jadeを書いてみたこざるの感想記事です。
jadeとは
jadeは、テンプレートエンジンです。（テンプレートエンジンが何かというのは、正直まだよくわかりません。いつか追記できればと思います。）
jadeのリファレンスには下記のように書かれています。
Language Reference
Jade is a terse language for writing HTML templates.・ Produces HTML
・ Supports dynamic code
・ Supports reusability (DRY)
言語リファレンス（こざる訳）
Jadeは、 HTMLテンプレートを記述するための簡潔な言語です。
- HTMLを生成
- 動的なコードをサポート
- 再利用性（ DRY ）をサポート
コードサンプル（http://jade-lang.com/より引用）
タグの階層をインデントで表現します。終了タグや<>などの記号がいらないので、通常のHTMLより簡潔なコードになります。
|
1 2 3 4 5 6 7 8 9 10 |
doctype html html(lang="en") head title= pageTitle script(type='text/javascript'). if (foo) { bar(1 + 5) } body h1 Jade - node template engine |
気づいたポイントなど
HTML生成前のjadeで書いたファイルは、ブラウザ上で、file:///…では、表示されません。Harpなどのツールでlocalサーバを起動し、localサーバ上でブラウザ確認ができます。
現時点では、HTMLの簡潔化程度でしか使っていませんが、それだけでも十分利用価値があるなぁと思いました。
①入れ子構造が見やすい
例１
|
1 2 |
h2 タイトル p 本文 |
pタグが、h2タグにネストしたタグになるので、HTMLは下記のようになります。
|
1 2 3 |
<h2>タイトル <p>本文</p> </h2> |
例２
|
1 2 |
h2 タイトル p 本文 |
h2タグ内とpタグが同じ階層となります。
|
1 2 |
<h2>タイトル</h2> <p>本文</p> |
入れ子構造で、中に入るタグや文章が多くなる場合、すっきりと見やすくなります。
（とはいえ、100行など入るとわかりづらくなりますが、そのあたりはケースバイケースなのではと思っています）
②１行でネストしたタグを書く
- Bootstrapのグリッド内に別のタグ素を置く
- セクショニングタグと中のコンテンツのタグは別にする
- インラインタグを複数つかって表示する
上記のような場合、他の要素に比べ、HTMLの構造が深くなり、ここまでのjadeのルールに従って書くと、HTMLで書くより、行数が必要な場合も出てきます。
|
1 2 3 4 5 6 |
.navbar.navbar-inverse.navbar-fixed-top(role="navigation") .container .navbar-header // 省略 .collapse.navbar-collapse // 省略 |
その場合、タグを : (コロン) でつなぐことで、1行内に複数のタグを書くことができます。
|
1 2 3 4 5 |
.navbar.navbar-inverse.navbar-fixed-top(role="navigation"): .container .navbar-header // 省略 .collapse.navbar-collapse // 省略 |
※ divは省略できます。
③インデントを統一する必要がある
jadeの同一ファイル内で、インデントを Tab にするか Space にするか統一する必要があります。
混ざるとエラーがでます。HTMLの場合、インデントが混ざってもエラーにならないので、ちょっとめんどくさいです。
エラーが出た場合は、SublimeTextの機能（Convert Indentation to Tabs）を使って、書き換えています。
インデントを Tab か Space にコンバートするショートカットがあるといいのになぁと思っています。（どこかを触れば、設定できるのではと思っていますが、そこまで達していない…あぅ…）
黒い画面と今後など
今の環境は、黒い画面（Macの場合、Terminal）を使用する必要があります。黒い画面「最初は怖い」です。でも、今のこざるには「強い味方」になってくれています。
少し話が飛びますが、先日、Node.jsをnodebrewから読んでいないことに気づいて、PATHを通すなどの設定を行いました。その他のトラブルも併発したりで、所要時間1.5時間くらいかかりましたが、自力で復旧できました。nodebrewを使い始めたのは、ちょうど1年ほど前です。1年くらいの間、何かしら使うことで、慣れたところはあります。
そう思うと、新しいツールなどは、最初にパソコンを使った頃と同じ気持ちで使ってみるのがいいのかもしれないです。
今は、Harpを中心に、自分がやりたいことに近づけるため、BrowserSync/gulpjs/Bootstrap などを組み合わせて使っています。この組み合わせがベストなのかどうかわからないですが、ある程度使い込むことで見えてくるものもあると思うので、もうしばらくこの環境で頑張ってみようと思います。Harpを使うと、jsonデータを読み込むことができるので(※)、いつか、ナビゲーションなどをもっと簡潔に書けるようになるといいなと思っています。
次回は、Harpを使ってみて気づいたことなどをまとめられたらなと思います。
※ jadeだけでも読み込めるのかもなのですが、その辺はまだ未知です。精進します。
