前回の記事では、fsモジュールを利用してHTMLファイルを表示するということをやりました
今回は、HTMLファイルを使わずにWebページにコンテンツを表示する方法を勉強していきたいと思います
そのために利用するのが「テンプレートエンジン」と呼ばれるものです
テンプレートエンジンとは
まず、テンプレートというのは「ひな形」のことです
「ひな形」は何かを大量に作成するときなどに同じ形式で作るための型枠です
そこにデータを流し込んで固有の製作物をつくるわけです
テンプレートエンジンはテンプレートにデータを埋め込んで、それをHTMLに変換して出力するという仕組みです
ですので、テンプレートエンジンを利用してWebページ表示する手順としては
- テンプレートを作成する
- データをテンプレートに埋め込む
- テンプレートエンジンでHTMLを生成して画面に表示する
ということです
なんだかややこしそうですが、やってみると簡単です
というか、テンプレートエンジンがやってくれるので我々は普通にテンプレートと埋め込むデータを準備するだけです
npmを使ってEJSを準備しよう
今回のタイトルにもなっていますが、Node.jsのテンプレートエンジンで使いやすいものがこのEJSです
しかし、EJSはNode.jsに標準で準備されていないので、使えるようにインストールする必要があります
そこで利用するのが「npmパッケージマネージャー」です
パッケージマネージャーとは、Node.jsで利用可能な様々なパッケージ（任意の機能を利用するためのプログラムがセットになったもの）が管理されている専用のツールです
もともとはNode.jsで機能を拡張する際に、必要なパッケージを検索してそのサイトにアクセスし、ダウンロードしてインストールするということをやっていました
現在はパッケージが増えてしまい、以前のやり方だと対応が難しくなりました
そこで、リリースされたパッケージを一か所にまとめるようになったのです
それがパッケージマネージャーです
npmを使ったインストールの仕方はとても簡単です
まずは、ターミナルやコマンドプロンプトでjsファイルを作成するディレクトリに移動してください
そして、以下のコマンドを実行します
npm install パッケージ名
これだけです
今回利用するパッケージはEJSですので
npm install ejs
です
WARNとか出ていますが、大丈夫です
+ ejs…となっていれば成功です
インストールしたディレクトリを除いてみると、node_modulesというフォルダとpackage-lockというJSONファイルが自動的に作られていると思います
ざっくり説明するとnode_modulesには今回作成に利用するmodule群です
今回ejsをインストールしただけですが、それを利用するために必要なものがセットでついてきていると考えてください
また、他のパッケージをインストールするとこのフォルダの中に入ることになります
package-lockはバージョンなどの情報が入っています
これらのファイルを触る必要はないのでご安心ください
EJSを使ってテンプレートを作ろう
まずテンプレートファイルを作成します
拡張子を.ejsにしましょう
今回のコードです
下がejsファイルです
index.ejsとしています
こちらが今回のサンプルコードです
見てわかると思いますが、今回は普通のHTMLです
ここから徐々に手を加えていきたいと思います
テンプレートを表示する
本体のapp.jsファイルのconst ejs = require(‘ejs’);でejsモジュールをロードしています
ejsファイルはconst index = fs.readFileSync(‘./index.ejs’,’utf8′);で読み込んでいます
今回はサーバーを起動する前に同期処理でファイルを読み込んでいます
同期処理：実行されたプログラムが終了してから次に進む
→コールバック関数は不要になる
非同期処理：プログラムの完了を待たずに次に進む
→完了後の処理をコールバック関数で指示する必要がある
ここも変更していますvar server = http.createServer(getFromClient);
前回はcreateServer()の引数にアロー関数を直接書き込んでいました
今回は関数を切り分けてサーバーの処理と分けて書いています
書き方を分けただけでやっていることは同じです
サーバー起動後の処理は11行目以降の関数の中に書いています
レンダリング
関数の処理の中で、var content = ejs.render(index);という行が新しく付け加わっています
このejsオブジェクトのrendar()メソッドによってレンダリングが行われます
この場合index.ejsに書かれたコードをHTMLに変換しているということになります
そしてHTMLに変換されたコードをcontentという変数に入力してその後で処理をres.write(content);
で書き込んで処理を終えています
実行した画面がこれです
今回は普通のHTMLでしたので、次回はこれをテンプレートにしてデータをapp.jsファイル側からデータを渡す方法を勉強しましょう
コメント