はじめに
投稿時点で、筆者は知識ゼロの状態から勉強を初めて2ヶ月程度の実力です。
そのため、理解不足や説明不足、誤った内容や呼び方をしている可能性があります。
万が一参考にする場合は上記の点を考慮した上でご一読ください。
説明文の内容はChatGPT先生からの引用も多いです。
今回は内容をかなり省略しています。本当に備忘録です。
今回のGitHubはこちらです。
目的
GulpでEJSを使う
何でEJSを使う？
調べていてまず悩んだのが、EJSとExpressを組み合わせているのが鉄板パターンらしかったこと。
以下、ChatGPT先生に質問したこと。
EJSとは？
EJS（Embedded JavaScript）は、JavaScriptテンプレートエンジンの一種です。EJSは、JavaScriptのコードをHTMLテンプレートに埋め込むことができます。これにより、動的なウェブページを作成することができます。
EJSは、HTMLを基盤としており、HTMLの構造にJavaScriptコードを埋め込むことができます。例えば、EJSを使用して、サーバーサイドで処理されたデータを表示することができます。また、EJSは、JavaScriptのif文やforループなどの制御構造を使用することができます。
EJSは、Node.jsで使用されることが多く、ExpressなどのWebフレームワークと組み合わせて使用することができます。EJSは、簡単に学習することができ、柔軟性があります。
Expressとは？
Expressは、Node.jsのWebアプリケーションフレームワークの一つで、簡単にWebアプリケーションを構築するための様々な機能を提供します。Expressは、Node.jsのhttpモジュールをラップし、より高水準のAPIを提供します。
Expressの主な特徴は、ルーティング、ミドルウェア、ビューエンジンのサポート、セッション管理、クッキーのサポート、静的ファイルの提供、フォームデータの処理、データベースの操作などです。これらの機能は、開発者がWebアプリケーションを構築する際に非常に便利であり、簡単に使用することができます。
Expressは、Node.jsのWebアプリケーションフレームワークの中でも最も人気が高く、多くの開発者や企業が採用しています。また、豊富なドキュメントやコミュニティが存在するため、初心者でも比較的簡単に学ぶことができます。
EJSを使用するにはExpressが必要？
EJSを使用するには、必ずしもExpressを使用する必要はありません。EJSは、独自のテンプレートエンジンを持っているため、EJSのみを使用して、サーバーサイドでHTMLを生成することができます。
ただし、Expressを使用すると、EJSをより簡単に使用することができます。Expressは、EJSをサポートしており、res.renderメソッドを使用して、EJSテンプレートをレンダリングすることができます。
また、Expressを使用することで、サーバーのルーティング、リクエストとレスポンスの処理、セッションの管理など、ウェブアプリケーションの開発に必要な多くの機能を簡単に実装することができます。
したがって、EJSを使用する場合、Expressを使用しなくても可能ですが、Expressを使用することで開発効率を高めることができます。
しかし調べていくと、Express使わなくてもgulp-ejsを入れればEJSを使えることがわかった。
EJSをEXpressで使う場合と、Gulpで使う場合の違いを教えてもらった。
Expressを使用する場合は、サーバー側でEJSをレンダリングすることができます。
Gulpを使用する場合は、クライアント側でのEJSのレンダリングを行うことが多いです。
Gulpはタスクランナーであり、EJSのコンパイルを行うためには、Gulpプラグインである「gulp-ejs」を使用することができます。この場合、Expressは必要ありません。
ただし、Gulpを使用してEJSをコンパイルする場合、EJSテンプレート内で使用できるExpressの機能（たとえばres.render()など）は使用できません。代わりに、Gulpタスク内で必要なデータを定義して、それをEJSテンプレート内で使用する必要があります。
Expressを使用する場合は、サーバー側でEJSをレンダリングすることができますが、Gulpを使用する場合は、クライアント側でのEJSのレンダリングを行うことが多いです。Gulpを使用する場合は、EJSテンプレートをHTMLにコンパイルすることができるため、HTMLとしてブラウザで表示することができます。
サーバー側でEJSをレンダリングするメリット、デメリット
メリット
- クライアント側での処理が不要: クライアント側では、EJSテンプレートをレンダリングするためにJavaScriptを実行する必要があります。これにより、ページの読み込みに時間がかかることがあります。一方、サーバー側でレンダリングする場合は、クライアント側ではHTMLがすでに生成されているため、読み込み速度が向上します。
- セキュリティの向上: サーバー側でEJSをレンダリングする場合、クライアント側でのJavaScript実行を必要としないため、クロスサイトスクリプティング攻撃（XSS攻撃）を防止することができます。
デメリット
- サーバーの負荷: サーバー側でEJSをレンダリングする場合、サーバーの負荷が高くなる可能性があります。これは、リクエストが多数ある場合や、EJSテンプレートの複雑さが高い場合に特に顕著です。
- ページの更新に時間がかかる: サーバー側でEJSをレンダリングする場合、クライアント側でEJSをレンダリングする場合よりもページの更新に時間がかかることがあります。これは、サーバー側でHTMLを生成するため、通信のレイテンシーやサーバーの処理速度によっては、ページが表示されるまでに時間がかかることがあるからです。
クライアント側でEJSをレンダリングするメリット、デメリット
メリット
- サーバーの負荷が軽減される: クライアント側でEJSをレンダリングする場合、サーバー側での処理が軽くなります。これは、リクエストが多数ある場合や、EJSテンプレートの複雑さが高い場合に特に顕著です。
- SPAのような高度なUIを実現できる: クライアント側でEJSをレンダリングすることで、SPA（Single Page Application）のような高度なUIを実現することができます。これは、JavaScriptを使って、データを動的に更新したり、非同期で通信したりすることができるためです。
デメリット
- セキュリティリスク: クライアント側でEJSをレンダリングする場合、XSS（クロスサイトスクリプティング）攻撃のリスクが高くなる可能性があります。これは、JavaScriptがブラウザ上で実行されるため、攻撃者がコードを注入することができるからです。
- SEOの影響: クライアント側でEJSをレンダリングする場合、クローラーによって正しく解釈されない可能性があります。これは、クローラーがJavaScriptを実行しない場合、コンテンツが表示されないためです。これにより、SEO（検索エンジン最適化）のランキングに悪影響を与えることがあります。
導入
gulp-ejsをインストール。
これだけGulpでEJSを使用できる。
素のEJSやExpressをインストールする必要はなかった。
npm install -D gulp-ejs
gulp-renameをインストール。
保存する際に拡張子をejsからhtmlに変更するのに必要
npm install -D gulp-rename
gulp-html-beautifyをインストール。
使ってくればわかるが、ejsの記述をhtmlに変換すると、空行が多くなってしまう。
このモジュールでhtmlに変換した際に構文を整えてもらう。
他の記事ではgulp-replaceでやってるところもあったが、gulp-html-beautifyさえあればOK
npm install -D gulp-html-beautify
あとはページ量産するのに必要なものをインストールしていく。
下記はJSONデータをEJSで利用するために必要なのでインストール。
npm i fs -D
インストールしたのはここまで。
導入手順は参考サイトを参照。
今回は丁寧に記事を書く時間と気力がありませんでした。
本当に備忘録です。
苦戦したこと
最初に参考にしてた記事では、
<% include ../common/_header %>
と記述していたが、シンタックスエラー（構文エラー）が出てしまう。
様々な記事を参考にして検証した結果、下記の記述であればOKだった。
<%- include('../common/_header') %>
なぜ前述の記述ではエラーになってしまうのかは原因がつかめなかった。
モジュールのアップデート等により変わってしまったのか定かではないが、ひとまずは動いたのでヨシとした。
追記：
上手くいかなかったほうの記述は「includeディレクティブ」というやつだと思う。
こちらはパラメータを送れないとのこと。
こちらの記事に書いてあった。
参考サイト
特に参考になった
【Gulp】EJSを使ってHTMLを量産する
gulp+EJS+JSONで大量のHTMLを効率的に生成する
テンプレートエンジンEJSで使える便利な構文まとめ
【HTML】EJSをGulpでコンパイルしてみる（SyntaxErrorでちょい苦戦）
テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング
EJSの使い方！静的なHTMLサイトで「共通パーツ」と「変数」を使おう
gulpを使ってファイルの徹底効率化をはかる