Node.js Express フレームワーク

Express の紹介

Express は、簡潔で柔軟な node.js Web アプリケーションフレームワークであり、さまざまな Web アプリケーションを作成するための一連の強力な機能と、豊富な HTTP ツールを提供します。

Express を使用すると、完全な機能を備えた Web サイトを迅速に構築できます。

Express フレームワークのコア機能：

  • HTTP リクエストに応答するミドルウェアを設定できます。

  • さまざまな HTTP リクエストアクションを実行するためのルーティングテーブルを定義します。

  • テンプレートにパラメータを渡すことで、HTML ページを動的にレンダリングできます。

Express のインストール

Express をインストールして依存関係リストに保存します：

$ cnpm install express --save

上記のコマンドは、Express フレームワークを現在のディレクトリのnode_modulesディレクトリにインストールします。node_modulesディレクトリ内に express ディレクトリが自動的に作成されます。以下に、express フレームワークと一緒にインストールする必要がある重要なモジュールをいくつか示します：

  • body-parser- node.js ミドルウェア。JSON、Raw、Text、URLエンコードされたデータを処理するために使用します。

  • cookie-parser- これはCookieを解析するためのツールです。req.cookies を使用して送信されたCookieを取得し、それらをオブジェクトに変換します。

  • multer- node.js ミドルウェア。enctype="multipart/form-data"（フォームのMIMEエンコーディングを設定）のフォームデータを処理するために使用します。

$ cnpm install body-parser --save
$ cnpm install cookie-parser --save
$ cnpm install multer --save

インストールが完了したら、express で使用されているバージョン番号を確認できます：

$ cnpm list express
/data/www/node
└── [email protected]  -> /Users/tianqixin/www/node/node_modules/.4.15.2@express

最初の Express フレームワークの例

次に、Express フレームワークを使用して「Hello World」を出力します。

次の例では、express モジュールを導入し、クライアントがリクエストを送信した後に「Hello World」という文字列を応答します。

express_demo.js ファイルを作成し、コードは次のとおりです：

express_demo.js ファイルのコード：

//express_demo.js ファイル var express = require('express'); var app = express(); app.get('/', function (req, res) { res.send('Hello World'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("アプリケーションの例、アクセスアドレスは http://%s:%s", host, port) })

上記のコードを実行します：

$ node express_demo.js 
应用实例，访问地址为 http://0.0.0.0:8081

ブラウザで http://127.0.0.1:8081 にアクセスすると、結果は次の図のようになります：

リクエストとレスポンス

Express アプリケーションはコールバック関数のパラメータを使用します：requestとresponseオブジェクトを使用してリクエストとレスポンスのデータを処理します。

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

requestとresponseオブジェクトの具体的な説明：

Request オブジェクトrequest オブジェクトは HTTP リクエストを表し、リクエストのクエリ文字列、パラメータ、コンテンツ、HTTP ヘッダーなどの属性が含まれます。一般的な属性は次のとおりです：

  1. req.app：callbackが外部ファイルの場合、req.appを使用してexpressのインスタンスにアクセスします
  2. req.baseUrl：ルートが現在インストールされているURLパスを取得します
  3. req.body / req.cookies：「リクエストボディ」/ Cookie を取得します
  4. req.fresh / req.stale：リクエストがまだ「新鮮」かどうかを判断します
  5. req.hostname / req.ip：ホスト名とIPアドレスを取得します
  6. req.originalUrl：元のリクエストURLを取得します
  7. req.params：ルートのパラメータを取得します
  8. req.path：リクエストパスを取得します
  9. req.protocol：プロトコルの種類を取得します
  10. req.query：URL のクエリパラメータ文字列を取得します
  11. req.route：現在一致しているルートを取得します
  12. req.subdomains：サブドメインを取得します
  13. req.accepts()：受け入れ可能なリクエストのドキュメントタイプをチェックします
  14. req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages：指定された文字セットの最初に受け入れ可能な文字エンコーディングを返します
  15. req.get()：指定されたHTTPリクエストヘッダーを取得します
  16. req.is()：リクエストヘッダー Content-Type の MIME タイプを判断します

Response オブジェクト- response オブジェクトは HTTP レスポンスを表し、リクエスト受信時にクライアントに送信される HTTP レスポンスデータです。一般的なプロパティは次のとおりです：

  1. res.app：req.appと同じ
  2. res.append()：指定したHTTPヘッダーを追加します
  3. res.set() は res.append() の後に、以前に設定したヘッダーをリセットします
  4. res.cookie(name，value [，option])：Cookie を設定します
  5. opition: domain / expires / httpOnly / maxAge / path / secure / signed
  6. res.clearCookie()：Cookie をクリアします
  7. res.download()：指定されたパスのファイルを送信します
  8. res.get()：指定されたHTTPヘッダーを返します
  9. res.json()：JSONレスポンスを送信します
  10. res.jsonp()：JSONPレスポンスを送信します
  11. res.location()：レスポンスの Location HTTP ヘッダーのみを設定し、ステータスコードまたは close response は設定しません
  12. res.redirect()：レスポンスの Location HTTP ヘッダーを設定し、ステータスコード 302 も設定します
  13. res.render(view,[locals],callback)：ビューをレンダリングし、レンダリング後の文字列をコールバックに渡します。レンダリング中にエラーが発生した場合は、next(err) が自動的に呼び出されます。コールバックには、発生する可能性のあるエラーとレンダリング後のページが渡されるため、自動出力は行われません。
  14. res.send()：HTTPレスポンスを送信します
  15. res.sendFile(path [，options] [，fn])：指定されたパスのファイルを送信します - ファイルの拡張子に基づいて Content-Type を自動的に設定します
  16. res.set()：HTTPヘッダーを設定します。objectを渡すと複数のヘッダーを一度に設定できます
  17. res.status()：HTTPステータスコードを設定します
  18. res.type()：Content-Type の MIME タイプを設定します

ルーティング

HTTP リクエストの基本的な応用についてはすでに理解しました。ルーティングは、誰が（指定されたスクリプトが）クライアントリクエストに応答するかを決定します。

HTTP リクエストでは、ルーティングを通じてリクエストの URL と GET/POST パラメータを抽出できます。

次に、Hello World を拡張し、より多くの種類の HTTP リクエストを処理する機能を追加します。

express_demo2.js ファイルを作成し、コードは次のとおりです：

express_demo2.js ファイルのコード：

var express = require('express'); var app = express(); //ホームページに「Hello World」を出力 app.get('/', function (req, res) { console.log("ホームページ GET リクエスト"); res.send('Hello GET'); }) //POST リクエスト app.post('/', function (req, res) { console.log("ホームページ POST リクエスト"); res.send('Hello POST'); }) ///del_user ページのレスポンス app.get('/del_user', function (req, res) { console.log("/del_user は DELETE リクエストに応答"); res.send('削除ページ'); }) ///list_user ページ GET リクエスト app.get('/list_user', function (req, res) { console.log("/list_user GET リクエスト"); res.send('ユーザーリストページ'); }) //ページ abcd、abxcd、ab123cd などに対して GET リクエストで応答 app.get('/ab*cd', function(req, res) { console.log("/ab*cd GET リクエスト"); res.send('正規表現マッチング'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("応用例、アクセスアドレスは http://%s:%s", host, port) })

上記のコードを実行します：

$ node express_demo2.js 
应用实例，访问地址为 http://0.0.0.0:8081

次に、http://127.0.0.1:8081 の異なるアドレスにアクセスして、結果を確認できます。

ブラウザで http://127.0.0.1:8081/list_user にアクセスすると、結果は下図のようになります：

ブラウザで http://127.0.0.1:8081/abcd にアクセスすると、結果は下図のようになります：

ブラウザで http://127.0.0.1:8081/abcdefg にアクセスすると、結果は下図のようになります：

静的ファイル

Express は組み込みのミドルウェアを提供しています express.static 画像、CSS、JavaScript などの静的ファイルを設定します。

以下を使用できます： express.static ミドルウェアを使用して静的ファイルのパスを設定します。例えば、画像、CSS、JavaScript ファイルを public ディレクトリに置く場合、次のように記述します：

app.use('/public', express.static('public'));

public/images ディレクトリに画像をいくつか配置してみましょう。次のようになります：

node_modules
server.js
public/
public/images
public/images/logo.png

次に、"Hello World" アプリケーションを修正して、静的ファイルを処理する機能を追加しましょう。

express_demo3.js ファイルを作成します。コードは次のとおりです：

express_demo3.js ファイルのコード：

var express = require('express'); var app = express(); app.use('/public', express.static('public')); app.get('/', function (req, res) { res.send('Hello World'); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("応用例、アクセスアドレスは http://%s:%s", host, port) })

上記のコードを実行します：

$ node express_demo3.js 
应用实例，访问地址为 http://0.0.0.0:8081

上記のコードを実行します：

ブラウザで http://127.0.0.1:8081/public/images/logo.png にアクセスすると（この例では菜鳥教程のロゴを使用しています）、結果は下図のようになります：

GET メソッド

以下の例では、フォームで GET メソッドを使用して2つのパラメータを送信する方法を示します。server.js ファイル内のprocess_getルーターを使用して入力を処理できます：

index.html ファイルのコード：

<html> <body> <form action="/process_get" method="GET"> First Name: <input type="text" name="first_name"> <br> Last Name: <input type="text" name="last_name"> <input type="submit" value="Submit"> </form> </body> </html>

server.js ファイルのコード：

var express = require('express'); var app = express(); app.use('/public', express.static('public')); app.get('/index.html', function (req, res) { res.sendFile( __dirname + "/" + "index.html" ); }) app.get('/process_get', function (req, res) { //JSON 形式で出力 var response = { "first_name":req.query.first_name, "last_name":req.query.last_name }; console.log(response); res.end(JSON.stringify(response)); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("応用例、アクセスアドレスは http://%s:%s", host, port) })

上記のコードを実行します：

node server.js 
应用实例，访问地址为 http://0.0.0.0:8081

ブラウザで http://127.0.0.1:8081/index.html にアクセスすると、図のように表示されます：

では、フォームにデータを入力して送信してみましょう。次のデモのとおりです：

POST メソッド

以下の例では、フォームで POST メソッドを使用して2つのパラメータを送信する方法を示します。server.js ファイル内のprocess_postルーターを使用して入力を処理できます：

index.html ファイルのコード：

<html> <body> <form action="http://127.0.0.1:8081/process_post" method="POST"> First Name: <input type="text" name="first_name"> <br> Last Name: <input type="text" name="last_name"> <input type="submit" value="Submit"> </form> </body> </html>

server.js ファイルのコード：

var express = require('express'); var app = express(); var bodyParser = require('body-parser'); //application/x-www-form-urlencoded エンコード解析を作成 var urlencodedParser = bodyParser.urlencoded({ extended: false }) app.use('/public', express.static('public')); app.get('/index.html', function (req, res) { res.sendFile( __dirname + "/" + "index.html" ); }) app.post('/process_post', urlencodedParser, function (req, res) { //JSON 形式で出力 var response = { "first_name":req.body.first_name, "last_name":req.body.last_name }; console.log(response); res.end(JSON.stringify(response)); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("応用例、アクセスアドレスは http://%s:%s", host, port) })

上記のコードを実行します：

$ node server.js
应用实例，访问地址为 http://0.0.0.0:8081

ブラウザで http://127.0.0.1:8081/index.html にアクセスすると、図のように表示されます：

では、フォームにデータを入力して送信してみましょう。次のデモのとおりです：

ファイルアップロード

以下では、ファイルアップロード用のフォームを作成します。POST メソッドを使用し、フォームの enctype 属性を multipart/form-data に設定します。

index.html ファイルのコード：

<html> <head> <title>ファイルアップロードフォーム</title> </head> <body> <h3>ファイルアップロード：</h3>アップロードするファイルを選択してください：<br /> <form action="/file_upload" method="post" enctype="multipart/form-data"> <input type="file" name="image" size="50" /> <br /> <input type="submit" value="ファイルをアップロード" /> </form> </body> </html>

server.js ファイルのコード：

var express = require('express'); var app = express(); var fs = require("fs"); var bodyParser = require('body-parser'); var multer = require('multer'); app.use('/public', express.static('public')); app.use(bodyParser.urlencoded({ extended: false })); app.use(multer({ dest: '/tmp/'}).array('image')); app.get('/index.html', function (req, res) { res.sendFile( __dirname + "/" + "index.html" ); }) app.post('/file_upload', function (req, res) { console.log(req.files[0]); //アップロードされたファイル情報 var des_file = __dirname + "/" + req.files[0].originalname; fs.readFile( req.files[0].path, function (err, data) { fs.writeFile(des_file, data, function (err) { if( err ){ console.log( err ); }else{ response = { message:'File uploaded successfully', filename:req.files[0].originalname }; } console.log( response ); res.end( JSON.stringify( response ) ); }); }); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("応用例、アクセスアドレスは http://%s:%s", host, port) })

上記のコードを実行します：

$ node server.js 
应用实例，访问地址为 http://0.0.0.0:8081

ブラウザで http://127.0.0.1:8081/index.html にアクセスすると、図のように表示されます：

では、フォームにデータを入力して送信してみましょう。次のデモのとおりです：

Cookie 管理

ミドルウェアを使用して Node.js サーバーに Cookie 情報を送信できます。以下のコードは、クライアントが送信した Cookie 情報を出力します：

express_cookie.js ファイルのコード：

//express_cookie.js ファイル var express = require('express') var cookieParser = require('cookie-parser') var util = require('util'); var app = express() app.use(cookieParser()) app.get('/', function(req, res) { console.log("Cookies: " + util.inspect(req.cookies)); }) app.listen(8081)

上記のコードを実行します：

$ node express_cookie.js

では、http://127.0.0.1:8081 にアクセスして、ターミナル情報の出力を確認できます。次のデモのとおりです：

関連資料

その他の拡張