Jadeに触れてみる

1.はじめに

みなさん、こんばんは。

今回はNode.jsのテンプレートエンジンである、Jadeに触れていきます。

ちなみにテンプレートエンジンとは、

テンプレートと呼ばれるHTMLのひな形を元にプログラムで加工し、画面に出力するためのライブラリ。プログラマーとWebデザイナーとの分業を目的とし、特別なタグを解釈して実行することで処理を行う。PHPではSmartyなどが代表例。

ということです。

Jade公式ページ:http://jade-lang.com/


2.Jade導入

Jadeの導入は簡単です。

Node.jsをインストールしていれば、以下のコマンドで簡単にJadeがインストールされます。

npm install -g jade

npmとは、「Node Package Manager」の略で、Node.js で作られたパッケージモジュールを管理するツールです。

「g」はグローバルインストールを行うために指定しています。

グローバルインストールとは、インストールしたマシン内全てのディレクトリ等でインストールしたパッケージモジュールを使用できるようにするために指定します。


3.Jade

Jadeとは、簡単に言うとHTMLの記述をお手軽にしてくれるものです。

Jadeで記述したソースコードを解析し、HTMLとして生成されます。

実際にソースコードを見ていきます。 まず、普段よく目にするHTMLが以下です。

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        テストページです
    </body>
</html>

次のようなページを表示します。

testHtml※クリックすると大きく表示されます

「テストページです」と表示するだけです。

これをJadeの記法で記述すると以下のようになります。

!!!
html
    head
    body
        テストページです
※「!!!」はDOCTYPE宣言、インデントは要素の入れ子をとして解析されます。

2つの記述を見比べると、Jadeの記法に沿ったソースコードの記述量が減っているのが一目瞭然です。

このように、Jadeを用いると、簡単にHTMLを記述出来ます。

ただ、記述法にいろいろと注意点があります。

その中でも、基本的な記法で注意しなくてはいけないのは、インデントです。

Jadeではインデントを記述しないと、要素の入れ子関係を意図したとおりに解析してくれません。

実際にインデントをなくして、記述したソースコードが以下です。

!!!
html
head
body
テストテストです

このソースコードをHTMLに変換すると以下のようになります。

<!DOCTYPE html>
<html>
</html>
<head>
</head>
<body>
</body>
テストテストです

見ての通り、要素の入れ子関係がおかしなHTMLが生成されました。

インデントを間違えると、意図しない解析が行われてしまい、意図したHTMLになりません。

そのため、Jadeで記述する場合はインデントに気を付けなければいけません!


4.Jade感想

Jadeで記述したソースコードはぱっと見、HTMLに見えません。

Jadeを知ってるいる方なら問題はないですが、知らない人から見たら、どんなHTMLが出力されるか分かり辛いです。

けれど、Jadeは導入が簡単にでき、記述量が少なくて済みます。

導入に時間がかからない・短い時間でさくっとソースコードを記述出来るという点は生産性向上にもつながり、良い点だと思います。

どんなHTMLが出力されるか分かり辛いと述べましたが、Jadeを勉強しておけば、そんなことは些細な問題だと思います。

(私自身、まだ基本的な部分しか触れていないので、現状の把握した範囲での話ですが。。)

Jadeを導入することにより、後々の開発の生産性が向上すると思うので、Jadeを勉強するコストとJadeで開発する利点を天秤にかければ、

Jadeは使うべきものだと、私は思います。


5.最後に

今回初めてテンプレートエンジンというものに触れてみました。

少ない記述で本当にHTMLが生成されるのかと疑ってましたが、実際にHTML変換をしたところ、 ちゃんとしたHTMLが生成されたことに驚きました。

開発をするうえで楽に記述できるものって開発者からするとすごい嬉しいものですね。

では、ここらへんで失礼します!!

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中