はじめに

仕事はどこにエネルギーを使うべきか

私たちは、業務としてサイト制作を行っています。その上で、担当ごとにエネルギーを使うべき場所とそうでない場所があります。

あなたがwebデザイナーであれば、デザインに力を注ぎたいと思うのではないでしょうか。また、エンジニアであれば、JavaScriptなどの動きの部分に力を注ぎたいと思うかもしれません。

エネルギーを使うべきは、 自分自身がやりがいを感じられる部分 だと私は考えていますし、担当として 自分にしかできないことに時間と力を使う 方がプロジェクトにとっても有意義でしょう。

エネルギーを温存するには

使うべき場所にエネルギーをつかうためには、その他の場所でエネルギーを温存する必要があります。

例えば、数十ページ存在するwebサイトの共通部分（ヘッダーやフッターなど）に修正がはいった時を考えます。

一つのページで修正完了すれば、完了したものをコピーして全てのページに置換していく作業が発生します。

もちろん、全ページを横断して検索置換などができる場合もありますが、複雑な正規表現を使う必要があったりなど、何かと神経を使うことがあるでしょう。

また、検索置換ができたところで、その行動すらもできることなら省くべきです。

理想は、一箇所修正すれば自動的に別のページにも同じように反映される、というのが一番エネルギーを使わずにすみます。

何度も同じ記述をすることを避ける 方法を考えましょう。

これは、DRY原則(Don”t repeat yourself) としてもよく知られています。

Don’t repeat yourself – Wikipedia

静的ページで共通化する手段

共通部分という言葉でピンと来た方がいるかもしれませんが、Wordpressはphpを用いてヘッダーやフッターを共通化しています。

これらのように、共通部分を外部化し、読み込むことで効率化を図ることは、サーバサイドではよく行われています。

しかし、案件の制約や導入コストなどを考えると、これで全てが解決するとは言えません。

特に、ローカルでは全ての静的HTMLページが存在する必要があることは多く、HTMLファイルの納品という形もよくあります。この時、サーバサイドで読み込みを行う作りにはできません。

そこで、テンプレートエンジン という手法を用います。

これを用いて、ローカルで、「共通部分を外部化し、読み込み、それを元に静的HTMLファイルを生成する」 ということを行おうという考えです。

テンプレートエンジンにはいくつか種類がありますが、今回は EJS という手法を用います。

EJSでHTMLを便利に書く

EJSとは、テンプレートエンジンの１つです。

EJS – Embedded JavaScript

“Embedded JavaScript”の頭文字をとったもので、その名の通り、HTML内にJavaScriptを埋め込むような記述をします。
EJSファイルは、拡張子.ejsを用います。

JavaScriptと聞くと少し敬遠してしまうかもしれませんが、複雑なプログラムを書くわけではありません。コピペで使える決まった記述だけでも非常に便利に使えます。

ですので、普段書いているHTMLがそのまま使え、かつ便利な記法が合わさったもの と考えて差し支えありません。

Sassをご存知の方は、CSSにとってのSassのようなもの、というイメージが合うかもしれません。

EJS記法で記述したファイルをコンパイルすることで、普段扱っているHTMLファイルを作成することができます。

EJSのメリット

EJSで一度書いたものを、コンパイルすることは一見手間のように感じられるかもしれません。

しかし、コンパイルに関しては gulpを用いて自動化する ことで解決が可能です。

ここでは、コンパイルのことは一旦置いておいて、EJSのメリットを紹介します。

パーツを共通化できる

WordPressを触ったことがある人は、インクルードタグを思い浮かべるといいでしょう。

それに似たようなことが、サーバー上ではなくローカルで実現できます。

ローカルサーバーを立ち上げる必要もありません。 HTML一式納品が必要だからphpは使えない！という場合も安心です。

コンパイルして書き出されるファイルは、いつも扱っているHTMLそのものです。

学習コストが低い

EJSは、HTML記法がそのまま使えます。

そのため、「0か100か」で考える必要はありません。

最初は、includeだけ使ってみる、次に、ループを使ってみる、といった風に、徐々にできることを増やしてくことができます。

あれもこれもと記法を覚えなくても触っていけるので、比較的学習コストは低めです。

一定の品質を保てる

EJSに限らず、テンプレートエンジンはテンプレートと文字列の組み合わせでHTMLを生成します。

そのため、共通テンプレートを用いた部分は全て同様の形式で出力されます。

インデント、改行タイミングなどちょっとしたことですが、全てのファイルに気をつかい、こだわらずとも、元ファイルのみ整形すれば一貫性の保ったコードが生成されます。

今あるHTMLファイルもEJS化できる

便利さは分かったから次の案件で取り入れよう……と後回しにしなくても大丈夫です。

EJSは、今あるHTMLファイルをまったくの１から書き直さなくても使えます。

まずはヘッダーとフッターだけ、別ファイルに抜き出してインクルードを使った運用にしてみるだけでもEJSの便利さは実感できるでしょう。

その時新しく覚える記法は、ほんのわずかです。

EJSのデメリット

EJSはHTMLに便利機能を組み合わせたものなので、導入そのものがデメリットをもたらすことはありません。

強いて言うならば 「EJSファイルをHTMLファイルに変換する環境を作る手間」 が挙げられます。

ですが、今回は即導入していただき、便利さを感じて欲しいと思っています。

そこで、本稿内では 「環境構築から今あるHTMLのEJS化してコンパイル」 までをコード及び図も交えて解説します。

それでは、早速EJSに触れていきましょう。

コンパイル環境を整備する

EJSを使う際は、EJSファイルをHTMLファイルにコンパイルする環境を整えなければなりません。

手段はいくつかあるのですが、本稿では gulp をつかってコンパイルしていきます。

そこで、今回は、本稿に従うだけでEJSファイルをコンパイルできる環境をあらかじめつくりました。

まず、ベースとしてその前にnpmとgulpをPCにインストールすることになります。

詳しくは、次のリンクをご参照ください。

これらの導入が完了しましたら、実際にEJSファイルをコンパイルする環境を作ります。

5分でできるnpmとgulpのインストール（GIFアニメ付き） – to-R Media

EJSをインストール

本稿では、わかりやすいようにホームディレクトリでの作業を行います。

ホームディレクトリとは ホームディレクトリとは、マルチユーザのコンピュータにおいて、ユーザが自由にファイルやサブディレクトリを作成、保存できるディレクトリです。

Macでは、Macintosh HD → ユーザー → （自分のログインユーザ名）がホームディレクトリにあたります。 ターミナル上では「~」で表されます。

ターミナルの現在位置が「~」になっていることを確認してください。 もしなっていない場合は、ターミナル上で下記のコマンドを実行してください。

cd ~

これで、現在位置がホームディレクトリになりました。

実行イメージ

簡単な動画は以下の通りです。

手順

筆者のGithubより必要なファイルをダウンロードします。 ターミナルを起動し、下記のコマンドを実行することでダウンロードがはじまります。
nayucolony/boiler-plate

git clone https://github.com/nayucolony/boiler-plate.git

次に、ダウンロードしてきたフォルダ内に現在位置を移動します。

cd boiler-plate

続いて、必要なパッケージをダウンロードします。 boiler-plate/package.json内に必要ファイルが記述されており、下記のコマンドを実行することで自動ダウンロードが行われます。

npm install

ここまでで、EJSファイルをコンパイルするための作業環境が整いました。

gulpでEJSファイルをコンパイルしてみる

それでは、実際にサンプルファイルを用いてEJSファイルをコンパイルしてみましょう。

まずは、boiler-plateフォルダに移動して下記のコマンドを実行します。

gulp

このgulpを実行することで、あらかじめ私の記述したgulpfile.jsに則った動作が自動で実行されます。

簡単な内容は下記の通りです。

• boiler-plate/src/scss/フォルダ内を監視し、変更があったら自動でSassファイルのコンパイルを行う
• boiler-plate/src/ejs/フォルダ内を監視し、変更があったら自動でEJSファイルのコンパイルを行う
• ローカルサーバーを起動し、boiler-plate/distフォルダ内をhttp://localhost:8000/に公開する。以降、ライブリロードを行う

EJSに関連する部分を少し詳しく説明すると、boiler-plate/src/ejs/直下にある.ejsファイルがboiler-plate/distフォルダ内に書き出されます。

実際に、boiler-plate/distフォルダ内に、新しくHTMLファイルが生成されています。

サンプル解説

非常に簡素なサンプルではありますが、ここではincludeを用いています。

以下はコンパイルされる前のEJSファイルindex.ejsの内容です。

<% include _partial/header %>
  
<main>メイン部分テキスト</main>

<% include _partial/footer %>

詳しい解説は次回以降で行うので、今回は簡単に説明します。

includeで外部ファイルを読み込む

index.ejsにて<% include _partial/header.ejs %>と記述することで、_partialフォルダ内のheader.ejsを読み込むことができます。
また、EJSファイルをincludeする際、_partial/headerのように拡張子を省略できます。（サンプルでは省略しています）

includeされるheader.ejsは以下の内容です。

<header>ヘッダーテキスト</header>

includeされるfooter.ejsは以下の内容です。

<footer>フッターテキスト</footer>

EJSファイルindex.ejsをコンパイルして生成されたindex.htmlは以下の内容です。

<header>ヘッダーテキスト</header>

<main>メイン部分テキスト</main>

<footer>フッターテキスト</footer>

この様にして、includeを記述した部分にそっくりそのまま代入されるようになっています。
シンプルでわかりやすいですね。

外部パーツはコンパイルされないの？

外部パーツは、単体でコンパイルされる必要はありません。

今回は、boiler-plate/ejs直下の.ejsファイルをコンパイル対象としているので、boiler-plate/ejs/_partial内はincludeはされてもコンパイルされることはありません。

今回は、よく使う方法として、gulpfile.jsの読み込みフォルダ設定時に「_で始まる名前のフォルダを除く」という方法があるので、それにならって_partialのように命名しています。

まとめ

まずはここまでで、環境構築と、EJSを使ってinclude機能を用いたパーツの外部化を行うことができました。

次回は、より実践的なEJSの書き方を取り上げていきます。