ejsとは？
JavaScriptのテンプレートエンジンです。
メリット
サイトの共通パーツなどを使いたい場合は従来はPHPやRailsなどを使わないとダメだったのですが、JSだけで分割することができます。
また、JSONファイルなどを用意して外部から固定値を読み込ませるなどの用途にも使えます。
ユースケース
フロントエンドとバックエンドの開発が全く分かれているプロジェクト かつ ReactやVue.jsをまだ使用していない（開発人員のスキル的に採用できない）場合に採用されます。ReactやVue.jsよりはejsの方が単なるライブラリということもあり学習コストは低めのためです。
フロントエンドやバックエンドが分かれていない案件であればRailsやLaravelなどで一気通貫で作ってしまう方が早いためです。
（現実的には昨今はReactやVue.jsなどのモダンJSフレームワークでフロント開発は行われていることが主流です。）
インストール
|
1 2 |
npm init -y npm i -D ejs-cli |
html
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>タイトル</title> <% var hoge = '<p>hello, World</p>' %> </head> <body> <%- hoge %> </body> </html> |
package.json
以下のコマンドを記述します。
|
1 2 3 |
"scripts": { "ejs": "ejs-cli --base-dir ejs/ 'index.ejs' --out dest/" } |
| オプション名 | 説明 |
|---|---|
| –base-dir | コンパイルするファイルの参照先 |
| –out | 出力先 出力ファイル名、上記サンプルではdestディレクトリに出力します。 |
| -e | コンパイル、出力が不要なディレクトリです。（例えば、includeすることが前提のファイルとかであればここに指定します。） |
| -O | もしJSONファイルを読み込ませてHTMLに値を埋め込みたい場合などに使えます。 |
ejs以外のテンプレートエンジン
Edge.js
Node.jsや.NET環境などで使用することができます。なので.NETでも使えるのでJavaScriptだけでなくC#などの言語でも使われていたりします。
Handlebars.js
フロントエンドだけでなく、バックエンドでも使えます。
この記事へのコメントはありません。