くまだどうも、くまだです。
CSSを楽に書くための言語（Sassなど）があるように、HTMLも楽に書くための言語があります。その一つがEJSです。
今回はEJSのメリット、デメリットを超ざっくり簡単に紹介していきます。
ちなみに私は以前Pugについての記事を書きました。PugもEJSと同じくHTMLを楽に書ける言語です。
書き方はEJSと違いますが、考え方としては同じようなイメージです。
CSSを楽に書ける「Sass」については下記の記事をご覧ください。（Dart-Sass対応）
EJSとは
EJSとは、JavaScriptで使用されるテンプレートエンジンです。HTMLを分割管理して記述することができます。
GulpやWebpackなどを使って〇〇.ejs→〇〇.html、みたいな感じでコンパイルして使用します。SassをコンパイルするとCSSになるイメージです。
EJSのメリット
EJSのメリットは、次のものが挙げられます。
- Sassのように、ファイルを分割管理することができる
- ひとつ修正すれば、それを使用している部分すべて反映される
Sassの場合、例えば以下のようにファイルを用途ごとに分割管理することができます。
- _color.scss
- _font.scss
- _base.scss
- style.scss
_○○.scssをstyle.scssでまとめて、コンパイルしてstyle.cssにする、みたいな。
これと同様に、EJSを使うと、SassのようにHTMLをパーツとして管理できるようになります。
- _header.ejs
- _footer.ejs
- index.ejs
なので、例えば_button.ejsみたいなパーツでもそのファイルだけを修正すれば、button.ejsを使っている全てのところが修正されます。
〇_header.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
～～省略～～
</head>
<body>
<header>
～～省略～～
</header>〇_footer.ejs
<footer>
～～省略～～
</footer>
</body>
</html>〇index.ejs
<%- include('_header') %>
<main>
～～コンテンツが入る～～
</main>
<%- include('_footer') %>index.ejsで_header.ejsと_footer.ejsを呼び出し、コンパイルするとHTMLでひとつのファイルとして出力されます。
〇index.html
<!DOCTYPE html>
<html lang="ja">
<head>
～～省略～～
</head>
<body>
<header>
～～省略～～
</header>
<main>
～～コンテンツが入る～～
</main>
<footer>
～～省略～～
</footer>
</body>
</html>下層ページが複数ある場合、共通パーツは
<%- include('○○') %>のような形でコピペしておきます。
EJSを使わない場合は全ファイルで修正が必要になりますが、EJSを使えば呼びだすそのファイルを修正すれば、呼び出している全てのページで反映されることになります。
EJSのデメリット
EJSをつかって感じたデメリットは以下です。
- 導入まで時間がかかる
- 慣れるまで時間かかる
- ファイルが増えてくると管理が大変
上で述べたように、GulpやWebpackなど使って環境構築しないと使えないので、そこまでいくのに時間がかかります。導入したら今度は、EJSに慣れないとなりません。
そして分割管理できることはメリットでもありますが、何事もメリットなところは裏を返せばデメリットにもなります。
Sassでも分割管理するとファイルの数はなかなかの数になりますが、そこにEJSも分割管理したとするとめちゃめちゃファイル数が多くなります。どこになにがあるか把握するのに大変かもしれません。
この辺りは、Pugも同様です。
データを用意してページごとに動的に変える
jsonファイルを用意して、それをページごとに読み込ませて動的に変更することができます。
例えば以下のようなjsonファイル。
{
"siteInfo": {
"name": "サイト名",
"siteUrl": "サイトのドメイン"
},
"pages": {
"home": {
"name": "トップページ",
"description": "トップページの説明",
},
"news": {
"name": "ニュースページ",
"description": "ニュースページの説明",
}
}
}上記のjsonファイルをページごとに出しわけます。
〇_header.ejs
<% let title = (pageId === 'home') ? jsonData.siteInfo.name : jsonData.pages[pageId].name + ' | ' + jsonData.siteInfo.name%>
<% let description = jsonData.pages[pageId].description %>
<!DOCTYPE html>
<html lang="ja">
<head>
<title><%= title %></title>
<meta name="description" content="<%= description %>" />
</head>
<body>
<header>
～～省略～～
</header>〇index.ejs
<% let pageId = 'home'; %>
<%- include('_header', {pageId:pageId}) %>
<main>
～～コンテンツが入る～～
</main>
<%- include('_footer') %>〇news.ejs
<% let pageId = 'news'; %>
<%- include('_header', {pageId:pageId}) %>
<main>
～～コンテンツが入る～～
</main>
<%- include('_footer') %>という感じでlet pageIdの中身をページごとに書き換えます。それをコンパイルすると、
〇index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>サイト名</title>
<meta name="description" content="トップページの説明" />
</head>
<body>
<header>
～～省略～～
</header>
<main>
～～コンテンツが入る～～
</main>
<footer>
～～省略～～
</footer>
</body>
</html>〇news.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>ニュースページ | サイト名</title>
<meta name="description" content="ニュースページの説明" />
</head>
<body>
<header>
～～省略～～
</header>
<main>
～～コンテンツが入る～～
</main>
<footer>
～～省略～～
</footer>
</body>
</html>といった感じで情報をページごとに出しわけて出力してくれます。
EJSとPugの違い
Pugは閉じタグがないです。
Pugのほうが、いつもの書き方と比べると違和感を感じると思います。その点、まだEJSのほうがやりやすいかもしれません。ちなみにPugは下のような書き方です。
// _header.pug
header.header
h1.header__title
閉じタグがない分、インデントが分かりにくいです。閉じタグがないことが、ある意味EJSよりも慣れないと思います。
EJSを極めれば爆速でコーディングできる
CSSを勉強した後、Sassを勉強してすぐに慣れなかった人はいると思います。それでも時間をかければ使えるようになっているはずです。
それと同様に、EJSも導入さえ時間かかるものの書き方に慣れてしまえば、Sass並に使えるようになると思います。（ちなみに私はまだそこまでいっていない）
ここまで読んでくださりありがとうございました。