こんにちは！
LIGフィリピン支社代表のせいと(@seito_horiguchi)です。
突然ですがみなさん、EJSってご存じですか？
EJSっていうのはですね、なんかもう、こう、すんごいツールでして！ とにかく、使うとコーディングがめっちゃ早くなるんですよ！！
今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。
EJSとは？
EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。
ざっっっっくり言い表すと、SassとCSSの関係に近いです。
「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。
これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます。
つまり！
- 何度も同じようなコードを書かなくて済む
- headerとかfooterとかを後から修正することになった際に、一箇所書き換えるだけでよくなる
といった恩恵を受けることができます。
そんなに難しくないので、JSがわからない人も最低限の使い方を押さえることができます。
そんなEJSを、今回はタスクランナーGulpを使って動かしてみようと思います。
Gulpわかんねーよという方、ご安心ください。我が師匠がわかりやすい記事「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」を書いています。
また、今回の記事に合わせてサンプルデータも用意しました。こちらも合わせてご覧ください。
※動作させるにはnode.js、Gulp.js、Sassを事前にインストールする必要があります。（ソースを見るだけなら不要です）
https://github.com/seito2014/demo-sample
1. EJSが使えるよう環境を作る
まずは、Gulp.jsでEJSが動く環境を作りましょう。そのために、gulp-ejs使います。
以下のコマンドをターミナルorコマンドプロンプトで実行します。
npm install gulp-ejs --save-dev
//または
sudo npm install gulp-ejs --save-dev参考：gulp-ejs
https://www.npmjs.com/package/gulp-ejs
つづいて、gulpfile.jsにgulp-ejsのタスクを追記します。
ひとまずサンプルデータに沿って書くと、以下のようになります。
gulp.task("ejs", function() {
gulp.src(
["app/dev/ejs/**/*.ejs",'!' + "app/dev/ejs/**/_*.ejs"] //注1
)
.pipe(ejs())
.pipe(gulp.dest("app/public")) //注2
});注1にはEJSファイルの参照先ディレクトリ名、注2にはEJSファイルをHTMLに変換／出力する先のディレクトリ名を入れます。
ちなみに、「/**/*.ejs)」この部分は「/*.ejs)」でもいいです。
- /**/*.ejs ・・・対象ディレクトリ内以下の全ての.ejsファイルを監視対象にする
- /*.ejs ・・・対象ディレクトリ直下の.ejsファイルのみを監視対象にする
という違いがあります。
また、「’!’ + “app/dev/ejs/**/_*.ejs”」の部分で、「_(アンダーバー)で始まるejsファイルは参照しない」という設定を行っています。こうしておくことで、HTMLとして出力したくないファイルにはアンダーバーをつければよくなります。
ひとまず、これで環境は整いました。
2. EJSをとりあえずHTMLに変換／出力してみる
では次に、EJSで書いたデータがHTMLにちゃんと変換／出力されるかどうか、やってみましょう。
EJSファイル(index.ejs)を作成
任意の参照先フォルダ（サンプルデータでいうと“app/dev/ejs”）にEJSファイルを作成します。
名前はなんでもいいですが、ここではとりあえずindex.ejsとします。
普段、HTMLファイルを作成するのと同じ容量で作っていただいて大丈夫です。その後、拡張子を.ejsに変更して保存してください。
index.ejsの中身を書く
続いて、中身を書きます。
中身はとりあえず適当なHTMLで構いません。HTMLなら何でもいいですが、間違ったコードだとエラーになるのでご注意ください。
HTMLに出力
中身が書けたら、ターミナルorコマンドプロンプトでコマンド「gulp ejs」を実行します。
すると、任意の出力先フォルダ（サンプルデータでいうと”app/public”）にindex.htmlが吐き出されているはずです。
ひとまず、ここまででEJSを使うことができるようになりました。
3. EJSの基本テクニック「include」を使ってみる
さて、EJSが動くようにはなりましたが、これだけだとHTMLで書くのと変わりません。そこでEJSの簡単な命令である「include」を書いてみましょう。
include文を使うと、一部のHTMLを別ファイル化して、複数のページで共通で使いまわすことができます。
これだけ覚えるだけでも、だいぶ効率が違ってくるはずです。
とりあえずサンプルデータに沿いつつやってみましょう。
_head.ejsを作成
まず「/ejs」ディレクトリ内に新たに「/common」ディレクトリを作成し、_head.ejsファイルを作成します。
_head.ejsはindex.ejsに読み込ませるためだけのパーツにすぎないので、_(アンダーバー)をつけてHTMLには出力しないようにします。
_head.ejsの中身を書く
_head.ejsの中身を書きます。
<!DOCTYPE html> <!--[if lt IE 9]> <html lang="ja" class="no-js lt-ie9" prefix="og: http://ogp.me/ns#"> <![endif]--> <!--[if gt IE 9]><!--> <html lang="ja" class="no-js" prefix="og: http://ogp.me/ns#"><!--<![endif]--> <head> <meta charset="UTF-8"> <title>EJS DEMO PAGE</title> <meta name="description" content=""> <meta name="keywords" content=""> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=10,initial-scale=1.0"> <meta property='base_url' content='./' id="base_url"> <link rel="stylesheet" href="./css/common.css"> <!-- build:js js/init.min.js --> <script src="lib/modernizer/modernizr.js"></script> <script src="js/load.js"></script> <!-- endbuild --> </head>index.ejs内に_head.ejsを読み込ませる
index.ejs内に以下を記述します。
<% include common/_head %>「<% include "参照したいEJSファイルのパス" %>」を書くことで、そのEJSファイルの中身を呼ぶことができます。また、拡張子.ejsは省略できます。
HTMLに出力
さて、ここでもう一度コマンド「gulp ejs」を実行してみてください。
どうですか？ 出力されたindex.htmlを見てみると、_head.ejsに書いた内容が含まれているはずです。さて、せっかくなのでhead以外にも分割してみましょう。
ejs/common/_header.ejs
<body> <div class="wrapper" id="js_wrapper"> <header class="header"> <div class="header_inner"> <div class="header_logo"></div> <div class="header_module"></div> <div class="header_module"></div> <div class="header_module"></div> </div> </header>ejs/common/_footer.ejs
<footer class="footer"> <div class="footer_inner"> <small>copyright</small> </div> </footer> </div> <!-- end wrapper -->ejs/common/_script.ejs
<script src="lib/jquery/dist/jquery.js"></script> <script src="js/animation.js"></script> </body> </html>でもって、これらをすべてindex.ejsにincludeします。
ejs/index.ejs
<% include common/_head %> <% include common/_header %> <!-- start contents --> <div class="main_visual"> <div class="main_visual_inner"> <img src="http://placehold.it/980x520" height="520" width="980" alt=""> </div> </div> <!-- start contents --> <div class="contents"> <div class="contents_inner"> <div class="main"></div> <aside class="side"></aside> </div> </div> <!-- end contents --> <% include common/_footer %> <% include common/_script %>改めてコマンド「gulp ejs」を実行してみてください。
出力されたindex.htmlのソースを見てみると、すべてが合体していることがわかると思います。4. include応用 一部の値を変えてみる
さて、includeでheaderやfooterを共通化できたまではいいですが、実際の制作ではページごとに一部の値を変えたい場合があるかと思います。
たとえばtitleタグ内のテキストや、metaタグのdescriptionなどはユニークにしたいですよね。というわけで、includeをちょいと応用してみましょう。
index2.ejsを用意＆編集
先ほど使用したindex.ejsをまんまコピーしてindex2.ejsを用意します。
そして、ファイルの1,2行目を以下のようにします。<% var title = "Index2"; %> <% include common/_head2 %>_head2.ejsを用意＆編集
同様に、先ほど使用した_head.ejsをまんまコピーして_head2.ejsを用意します。
その上で、titleタグの部分を以下のように編集します。<title><%= title %></title>出力してみる
再度、コマンド「gulp ejs」を実行してみましょう。
index2.htmlを確認すると、title部分が“Index2”に変わっているはずです。ここでは、“title”という引数を用意した上で、index2.ejs上では“Index2”という値を渡すように、また_head2.ejs上では値“Index2”を受け取る処理をしています。
これを利用すれば、titleやdescriptionなど、一部の値をユニークに設定しつつ、共通パーツを複数のページで使いまわすことができます。
まとめ
いかがでしょうか？？
EJSを使うとコーディングが楽になる理由が、おわかりいただけたかと思います！
ぜひ積極的に利用して、爆速コーディングライフを満喫してみてください。
【爆速☆シリーズ】
※ エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順
※ 所要時間3分!? Github PagesとHEXOで爆速ブログ構築してみよう！
※ Sublime Text2 と Emmet LiveStyleをかけあわせて、爆速でCSS開発☆！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
