ejsとその記法について
ebi_yu背景
仕事の関係でEJSを使うことが多くなってきたので、軽くまとめる
ebi_yuEJSとは
EJS (Embedded JavaScript）はJavaScriptのテンプレートエンジン。
拡張子は「.ejs」で、ビルドするとHTMLが書き出される。
テンプレートエンジンとは
静的な生のHTMLにサーバサイドのデータを埋め込んで、動的なwebページを生成するためのツール。
ebi_yu歴史的な背景
1. テンプレートエンジン（EJS）の背景
初期のWebサイト開発において、HTMLに動的データを埋め込んでページを生成するのが主流でした。この頃、サーバー側でHTMLファイルを生成し、ユーザーにそのHTMLを直接送信するという仕組みが一般的だったため、サーバーサイドテンプレートエンジンが多く使われました。
- 代表例：EJS、Pug、Handlebarsなど
- 動作：テンプレートエンジンはHTMLに簡単なJavaScriptやテンプレートタグを埋め込み、サーバーサイドでHTMLとしてレンダリングします。
テンプレートエンジンを使うことで、動的に変化するコンテンツを含むページを素早く生成し、サーバーから一度にクライアントへ送ることができました。しかし、この方式には限界もありました。例えば、クライアント側でのインタラクティブなUIの実現が難しく、ページの一部のみを更新するような動的な操作には向いていませんでした。
2. フロントエンドフレームワーク（Vue/React）の登場
フロントエンドが進化すると、ユーザー体験を向上させるためによりインタラクティブでリアルタイムに反応するUIが求められるようになりました。そこで登場したのが、ReactやVueといったフロントエンドフレームワークです。
- 代表例：React（Facebook）、Vue（Evan Youによって開発）
- 動作：フロントエンドフレームワークは、クライアント側でJavaScriptを用いてコンポーネント単位でUIを管理し、DOMを効率的に操作します。
これらのフレームワークは、DOMの変更を効率的に管理する「仮想DOM」を用いるなど、従来のサーバーサイドテンプレートエンジンでは実現できなかった複雑で動的なインターフェイスの開発を可能にしました。また、シングルページアプリケーション（SPA）という新しいアプローチも促進され、ページ遷移のないスムーズな操作が可能になりました。
3. サーバーサイドレンダリング（SSR）の登場
SPAのメリットは大きいものの、SEOや初回読み込みのパフォーマンス面で課題もありました。例えば、検索エンジンがクライアントサイドでレンダリングされたコンテンツをうまく認識できなかったり、初回表示に時間がかかることが問題視されました。
この課題を解決するために、サーバーサイドレンダリング（SSR） が導入されました。SSRでは、サーバー上でVueやReactのコンポーネントを一度レンダリングし、完成したHTMLをクライアントに送信します。これにより、次のようなメリットが得られます。
- SEOの改善：初期のHTMLがサーバー側でレンダリングされているため、検索エンジンがコンテンツを認識しやすい。
- 初回表示速度の向上：ユーザーはサーバーで生成されたページをすぐに表示できる。
4. EJSとサーバーサイドVue/React（SSR）の違い
| 項目 | EJS | サーバーサイドVue/React（SSR） |
|---|---|---|
| 技術的背景 | 初期のテンプレートエンジンの一部 | SPAやインタラクティブなUIの需要に対応 |
| 使用用途 | シンプルなHTMLテンプレートのレンダリング | コンポーネントベースの動的なUIとSEO対策 |
| 動的インタラクションの強み | 弱い | 強い |
| 開発の複雑さ | 比較的簡単 | やや複雑（クライアント/サーバー両方に対応） |
| 主な使用目的 | 静的または軽量なページ向け | 複雑なUIやSEOが求められるSPA |
EJSなどのテンプレートエンジンは、動的コンテンツを含むシンプルなWebページを迅速に構築するには十分です。しかし、VueやReactなどのフレームワークは、クライアント側での動的な操作や状態管理ができ、特にSSRによってサーバーサイドでもフル機能を発揮できるため、よりインタラクティブでSEO対策が必要なアプリケーションに適しています。
まとめ
- EJSは従来のサーバーサイドテンプレートエンジンで、シンプルで軽量なWebページに最適です。
- サーバーサイドVue/Reactは、ユーザー体験やSEOが重要な場合に使われることが多く、コンポーネントベースのUI設計や高度なインタラクションが必要なアプリケーションに向いています。
これらの技術は、Web開発の歴史の中で異なるニーズに応じて発展してきました。シンプルな動的ページにはEJSが効率的ですが、複雑なUIやインタラクティブ性が求められる場合はVueやReact（SSRを含む）の方が適しており、プロジェクトの規模やニーズに応じた選択が重要です。
ebi_yuEJS記法
| 記法 | 説明 | 使用例 |
|---|---|---|
<% %> |
JavaScriptコードの埋め込み | <% if (user.isAdmin) { %> |
<%_ _%> |
トリム付きのコード埋め込み | <%_ for(let i=0; i<5; i++) { _%> |
<%= %> |
値の出力（HTMLエスケープ付き） | <%= user.name %> |
<%- %> |
値の出力（HTMLエスケープなし） | <%- user.description %> |
<%# %> |
コメントアウト（HTMLに表示されない） | <%# これはコメントです %> |
1. JavaScriptコードの埋め込み (<% %>)：
条件分岐やループ処理などのJavaScriptコードをテンプレート内で使用できます。
表示させずに処理だけを実行したい場合にも利用されます。
<% const user = { name: "田中", isAdmin: true }; %>
<% if (user.isAdmin) { %>
<p>テストです</p>
<% } %>
出力
<p>テストです</p>
2. トリム付きのコード埋め込み (<%_ _%>)：
出力の前後に空白や改行が不要な場合に使用します。コードの整形に便利です。
<ul>
<%_ for(let i = 0; i < 3; i++) { _%>
<li>Item <%= i %></li>
<%_ } _%>
</ul>
出力
<ul>
<li>Item 0</li>
<li>Item 1</li>
<li>Item 2</li>
</ul>
3. 値の出力 (<%= %> と <%- %>)：
<%= %> はHTMLエスケープされた値を出力します。セキュリティ上、XSSのリスクを避けるために安全です。
<%- %> はエスケープせずに値をそのまま出力します。HTMLタグを含むデータなどをそのまま表示したい場合に使用します。
<% const user = { name: "<p>田中</p>", description: "<p>test</p>" }; %>
<%= user.name %>
<%- user.description %>
出力
<p>田中</p>
<p>test</p>
4. コメントアウト (<%# %>)：
テンプレート内でコメントを残すために使用します。HTMLには出力されません。
<div>
<%# comment %>
</div>
出力
<div></div>
使用方法
node.jsでの使用
インストール
npm install ejs
使用
const ejs = require('ejs');
const people:string[] = ['geddy', 'neil', 'alex'];
// 文字列型で出力
// "geddy, neil, alex"
const html : string = ejs.render('<%= people.join(", "); %>', { people });
ブラウザでの使用
<script src="ejs.js"></script>
<script>
let people = ['geddy', 'neil', 'alex'];
let html = ejs.render('<%= people.join(", "); %>', {people: people});
</script>