【node.js】Express+EJS使い方メモ1 EJSを読み込む

SAGA.TXT > 学習メモ > node.js > 【node.js】Express+EJS使い方メモ1 EJSを読み込む

【node.js】Express+EJS使い方メモ1 EJSを読み込む

2016-03-30

node01

こんにちは。さがっとです！

WEBアプリを作成できる。
を目標にnode.jsについて学習したことをメモしていきたいと思います。

前回まで、ejsテンプレートエンジンの使い方を学習していましたが、そろそろnode.js単体では実装が複雑になってきたので「Express」を導入したいと思います。

Expressは、npmを使ってインストール済みです。

やりたい事

とりあえずEJSを読み込んでみます。

今回の構成

Express

■「node_modules」フォルダ

Expressインストール時に作成される。Expressのファイルが保管されているところ。今回はEJSもインストールしたので、「ejs」フォルダも格納されている。

■「views」フォルダ

このフォルダ内に「test.ejs」を作成する。

Expressでは、画面表示のテンプレートを「views」フォルダに格納する決まり。（設定で変更可能）

■app.js

スクリプトファイル

■pacage.json

projectのpackageを管理するためのファイル。
mavenで言うところのpom.xml。
node.jsのlibraryを公開する時のファイルなので、しばらくは弄らない。

各テンプレートファイル

まず、test.ejsを「views」フォルダに用意。

test.ejs（表示用のテンプレート）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><%=title %></title>
</head>
<body>

<h1><%=title %></h1>

<p><%-content %></p>

</body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

</body>

</html>

<%=title %>と<%-content %>にスクリプトファイルで用意したデータを書き出す。

スクリプトファイル

app.js

//★1 Expressのライブラリをロード
var express = require('express');
//★2 ExpressのApplicationオブジェクトを作成しておく
var app = express();

//★3 EJSのロード
var ejs = require('ejs');
//★4 テンプレートエンジンの設定
app.engine('ejs',ejs.renderFile);

//★5 GETを登録する
//第１引数：アクセスしたパス、第二２引数：実行する関数
app.get('/', function(req, res){
 //★6 テンプレートファイルのレンダリング
 res.render('test.ejs', 
 {title : 'Express + EJS' , 
 content: '大分シンプルになった！'});
});
//★7 指定のポート番号で待ち受け状態を開始
var server = app.listen(3000, function(){
 console.log('Server is running!');
})

//★1 Expressのライブラリをロード

var express = require('express');

//★2 ExpressのApplicationオブジェクトを作成しておく

var app = express();

//★3 EJSのロード

var ejs = require('ejs');

//★4 テンプレートエンジンの設定

app.engine('ejs',ejs.renderFile);

//★5 GETを登録する

//第１引数：アクセスしたパス、第二２引数：実行する関数

app.get('/', function(req, res){

//★6 テンプレートファイルのレンダリング

res.render('test.ejs',

{title : 'Express + EJS' ,

content: '大分シンプルになった！'});

});

//★7 指定のポート番号で待ち受け状態を開始

var server = app.listen(3000, function(){

console.log('Server is running!');

})

★1 Expressのライブラリをロード

Expressの機能を使用するため、Expressのライブラリをロードする。

★2ExpressのApplicationオブジェクトを作成しておく

続けてexpress()関数を呼び出し、Expressアプリケーションであるappオブジェクトを作成しておく。

★3EJSのロード

EJSのライブラリもロードする。

★4 テンプレートエンジンの設定

appオブジェクトの「engine」メソッドを使うことでテンプレートの設定ができる。

app.engine('テンプレートファイルの拡張子',テンプレートエンジンのコールバック関数);

1	app.engine('テンプレートファイルの拡張子',テンプレートエンジンのコールバック関数);

コールバック関数には、ejsオブジェクトのrenderFileプロパティを設定する。

★5GETを登録する

appオブジェクトの「get」メソッドで、HTTPのGETによるアクセスの登録ができる。

app.get('/', function(req, res){・・・・・});

1	app.get('/', function(req, res){・・・・・});

第１引数のパスにアクセスがあったとき、第２引数の関数を呼び出し実行する。

第２引数のコールバック関数では、requestとresponseのオブジェクトがそれぞれ引数として渡される。

★6　テンプレートファイルのレンダリング

responseオブジェクトのの「render」メソッドでテンプレートファイルのレンダリングができる。

res.render('テンプレートファイル名', {オブジェクト);

1	res.render('テンプレートファイル名', {オブジェクト);

第２引数はテンプレートに渡す変数などの情報を連想配列で記載する。(キーにejsのタグ名、値に入れ込むデータを記載)

テンプレートファイル名は「./views」からパス名を書く必要はない。

★7 指定のポート番号で待ち受け状態を開始

appオブジェクトの「listen」メソッドで、指定ポート番号の待ち受け状態を開始できる。

app.listen(指定ポート, コールバック関数);

1	app.listen(指定ポート, コールバック関数);

第二引数にコールバック関数を記載することで、リッスン開始後の処理を用意しておくことができる。

動かしてみる

コマンドプロンプトでスクリプトファイルを起動。

node app.js

1	node app.js

http://localhost:3000へアクセス。

Express

Expressを利用するメリット

やはりフレームワークを使うと、実装が短くすんで楽だなぁ。

ただ、実際にフレームワークが何をやってくれているのかを知っておくことは重要だと再認識。

Expressを利用して実際に楽になったこと

１．テンプレートファイルのレンダリング→書き出しが楽

以前、Expressを利用せずにテンプレートエンジンを読み込んでいた時はテンプレートファイルのレンダリングと書き出しを分けて書いていましたが、今回は一回の処理で完了している。

２．ルーティングが超楽

前回、HTTPメソッドを見分けるためにrequestオブジェクトの「method」を取得して、if文でPOSTや、GETの処理を分けて書いていました。そのようなルーティング処理は今回必要無し！

この記事がお役に立てたら、是非シェアをお願いします^^

SAGA.TXT

【node.js】Express+EJS使い方メモ1 EJSを読み込む

やりたい事

今回の構成

各テンプレートファイル

test.ejs（表示用のテンプレート）

スクリプトファイル

app.js

★1 Expressのライブラリをロード

★2ExpressのApplicationオブジェクトを作成しておく

★3EJSのロード

★4 テンプレートエンジンの設定

★5GETを登録する

★6　テンプレートファイルのレンダリング

★7 指定のポート番号で待ち受け状態を開始

動かしてみる

Expressを利用するメリット

Expressを利用して実際に楽になったこと

■さがっと

最近の投稿

アーカイブ