【Node.js】ejsでページのコンテンツを動的に表示する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年11月03日に投稿されました。)

Node.jsでサーバー側にて操作したコンテンツをページに表示するにはejsを使用します。

ejsとはNode.jsで使用できるテンプレートエンジンにになります。

そのため、ejsを使用することでJavaScript側で操作したコンテンツをWebページ上に表示することができるようになります。

また、読み込んだURLによって表示するファイルを操作することもできるため、動的にWebページを表示したい場合はejsを使用するようにしましょう。

今回はNode.jsのejsでページのコンテンツを動的に表示する方法について紹介していきます。

この記事はこんな方におすすめ

Node.jsでWebページを動的に読み込んで表示したい場合

Node.jsとは

Node.jsとは、JavaScriptでサーバーサイドの環境を実行することができる、オープンソースのランタイム環境となります。

非常に幅広い用途に適しており、特にWebアプリケーションのバックエンド、APIサーバー、リアルタイムアプリケーションの開発に使用されています。

Node.jsのロゴ

ejsとは

ejsとは、「Embedded JavaScript Templates」といい、Node.jsで使用するテンプレートエンジンになります。

こちらは、Node.jsでは標準では準備されていないため、Nodeをインストールするだけでは使用できません。

そのため、Nodeのインストール後に別でejsをインストールする必要があります。

ejsの使い方

ejsは下記のような流れで使用することができます。

1
ejsをインストールする
ejsモジュールをインストールします。
2
ejsファイルを作成する
ejsファイルを作成します。
3
ejsファイルを読み込む
ejsファイルを読み込みます。
4
ejsのデータを受け取る
読み込んだejsのデータを受け取って画面に表示します。

ejsをインストール

まず、ejsをインストールします。

インストールを行うにはコマンドプロンプトやターミナルで下記のようなコマンドを入力します。

すると下記のような画像が表示されます。

ターミナルでejsモジュールをインストールした結果

また、package.jsonを開くと、「ejs: バージョン名」が追加されるようになります。

ejsモジュールをインストールした後にpackege.jsonを開いた結果

ここまで確認ができると、ejsのインストールは完了です。

ejsファイルを作成

ejsのインストールが完了したら、エディターアプリ、もしはファイルにてejsファイルを作成します。

今回はNode.jsを使用するjsファイルと同じ階層に「sample.ejs」と名前を付けたファイルを作成します。

ejsファイルを作成した結果

ファイルの作成ができましたら、ファイルの中身に下記のコードを入力します。

ここまでできましたら、ejsファイルの作成は完了です。

ejsファイルを読みこむ

ejsファイルの作成が完了しましたら、作成したejsファイルを読み込んでいくようにします。

「sample.ejs」と同じ階層に「main.js」を作成し、下記のコードを入力します。

require(“ejs”)でejsモジュールを読み込みます。

そして、読み込んだからreadFileSync()を使用して指定したejsファイルを読み込みます。

ejsのデータを受け取る

ejsファイルを読み込むことができましたら、読み込んだファイルを受け取ります。

先ほど記載した「main.js」に続きとして下記の「ここから下を追記」から下のコードを追記します。

render()で指定したejsファイルのデータを受け取り、HTMLのソースコードに変換して表示しています。

これで、ejsの使い方は完了です。

ejsでページのコンテンツを動的に表示するサンプルコード

ejsでページのコンテンツを動的に表示するサンプルコードをご紹介します。

ここでは、下記の2パターンでejsを使用します。

  1. 指定したejsファイルをが存在する場合
  2. 指定したejsファイルをが存在しない場合

指定したejsファイルをが存在する場合

指定したejsファイルが存在する場合は、指定したejsファイルのデータ読み込んで画面に表示します。

● index.ejs

● main.js

実行結果

指定したejsファイルをが存在する場合にejsでページのコンテンツを動的に表示した結果

ejsでページのコンテンツを動的に表示しています。

そのため、index.ejsに記載されている内容がHTML要素となってWebページで表示されています。

指定したejsファイルをが存在しない場合

指定したejsファイルが存在しない場合は、エラーの画面を表示します。

● index.ejs

● main.js

実行結果

指定したejsファイルをが存在しない場合にejsにてページのコンテンツを動的に表示した果

ejsでページのコンテンツを動的に表示しています。

今回は「index2.ejs」を読み込もうとしてますが、存在しないためエラー画面が表示されています。

ejsで処理した値をページのコンテンツとして動的に表示する方法

ejsで処理した値をページのコンテンツとして動的に表示するにはejsファイルに「<% %>」を使用します。

「<% %>」の中はejsの独自機能になりますので、こちらでかこまれたコードはJavaScriptとして読み取ることができます。

そのため「<% %>」を使用することで、ejsでサーバー側にて処理した値を表示することが可能になります。

ここでは、下記の2パターンで「<% %>」を使用します。

  1. 設定した値をHTML要素として表示する場合
  2. HTML要素を動的に作成する場合

 

設定した値をHTML要素として表示する場合

 

設定した値をHTML要素として表示するには開始タグと終了タグ内に<%= 変数 %>を追記します。

● index.ejs

● main.js

実行結果

ejsで設定した値をHTML要素として表示した結果

ejsで設定した値をHTML要素として表示しています。

そのため、h1タグ要素には「title」変数の値が、pタグ要素には「content」変数の値が表示されています。

HTML要素を動的に作成する場合

HTML要素を動的に作成するには「<% %>」に実行するスクリプトを追記します。

● index.html

● main.js

実行結果

ejsでHTML要素を動的に作成した結果

ejsでHTML要素を動的に作成しています。

今回はejsファイルでfor-in文を使用し、table要素の項目を作成しています。

そのため、オブジェクトのデータがtable要素となって表示されています。

ejsでJSONデータをページのコンテンツとして動的に表示する場合

ejsでJSONデータをページのコンテンツとして動的に表示するにはJSON.parse()を使用します。

JSON.parse()とは、JSONデータをデコードするメソッドとなります。

そのため、ejsでJSONデータを受け取り、デコードすることで、JSONファイルを読み込むことができるようになります。

● index.ejs

● index.json

● main.js

実行結果

ejsでJSONデータをページのコンテンツとして動的に表示した結果

ejsでJSONデータをページのコンテンツとして動的に表示しています。

今回はJSONデータをJSON.parse()にてオブジェクトに変更し、オブジェクトのデータをejsファイルで受け取っています。

そのため、JSONファイルのデータがtable要素となって表示されています。

ejsでページのコンテンツを動的に切り替えて表示する場合

ejsでページのコンテンツを動的に切り替えて表示するにはURLオブジェクトを使用します。

URLオブジェクトを使用することで、読み込んだURLを文字列して取得することができます。

つまり、読み込んだURLを条件にすることで表示するejsファイルを変更することが可能になります。

● index1.ejs

● index2.ejs

● main.js

実行結果

ejsでページのコンテンツを動的に切り替えて表示した結果

URLオブジェクトでejsのページのコンテンツを動的に切り替えて表示しています。

今回はswitch-case文を使用して、取得したURLによって受け取るejsファイルのデータを変更しています。

そのため、「index2に移動」をクリックすると、index2.ejsのページが表示され、「index1に戻る」をクリックすると「index1.ejs」のページが画面に表示されています。

まとめ

⚫︎ Node.jsとは、JavaScriptでサーバーサイドの環境を実行することができる、オープンソースのランタイム環境である。

⚫︎ ejs(Embedded JavaScript Templates)とは、Node.jsで使用するテンプレートエンジンである。

⚫︎ 指定したejsファイルが存在する場合は、指定したejsファイルのデータを画面に表示する。

⚫︎ 指定したejsファイルが存在しない場合は、エラーの画面を表示する。

⚫︎ ejsで処理した値をページのコンテンツとして動的に表示するにはejsファイルに「<% %>」を使用する。

⚫︎ 設定した値をHTML要素として表示するには開始タグと終了タグ内に<%= 変数 %>を追記する。

⚫︎ HTML要素を動的に作成するには「<% %>」に実行するスクリプトを追記する。

⚫︎ ejsでJSONのデータをページのコンテンツに表示するには、JSON.parse()を使用する。

⚫︎ ejsでページのコンテンツを動的に切り替えて表示するにはURLオブジェクトを使用する。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA