コーススケジュール

Node.js チュートリアル

Node.js Express フレームワーク

Node.js Web モジュール Node.js RESTful API

Express の概要

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

Express を使用して、完全に機能する Web サイトをすばやく構築します。

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

HTTP リクエストに応答するようにミドルウェアをセットアップできます。
さまざまな HTTP リクエストアクションを実行するために使用されるルーティングテーブルを定義します。
パラメータをテンプレートに渡すことで、HTML ページを動的にレンダリングできます。

Express をインストールする

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

$ cnpm install Express --save

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

body-parser - JSON、Raw、Text、および URL エンコードされたデータを処理するための Node.js ミドルウェア。
cookie-parser - これは Cookie を解析するためのツールです。 req.cookies を通じて、渡された Cookie を取得し、オブジェクトに変換できます。
multer - enctype="multipart/form-data" でフォームデータを処理するための Node.js ミドルウェア (フォームの MIME エンコーディングを設定します)。

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

インストール後、express で使用されるバージョン番号を確認できます。

$ cnpm list express
/data/www/node
└── express4.15.2  -> /Users/tianqixin/www/node/node_modules/.4.15.2express

Express フレームワークの最初のインスタンス

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

次の例では、Express モジュールを導入し、クライアントがリクエストを開始した後、「Hello World」文字列で応答します。

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 アプリケーションは、コールバック関数パラメータである リクエスト オブジェクトと レスポンス オブジェクトを使用して、リクエストデータとレスポンスデータを処理します。

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

request オブジェクトと response オブジェクトの具体的な紹介:

Request オブジェクト - request オブジェクトは、リクエストクエリ文字列、パラメータ、コンテンツ、HTTP ヘッダー、その他の属性を含む HTTP リクエストを表します。共通の属性は次のとおりです。

req.app: callback が外部ファイルの場合、req.app を使用して express のインスタンスにアクセスします
req.baseUrl: ルートの現在のインストールの URL パスを取得します
req.body / req.cookies: 「リクエストボディ」/ Cookies を取得
req.fresh / req.stale: リクエストがまだ「新鮮」であるかどうかを判断します
req.hostname / req.ip: ホスト名と IP アドレスを取得する
req.originalUrl: 元のリクエスト URL を取得します
req.params: ルートの parameters を取得します
req.path: リクエストのパスを取得する
req.protocol: プロトコルタイプを取得する
req.query: URL のクエリパラメータ文字列を取得します
req.route: 現在一致するルートを取得します
req.subdomains: サブドメインを取得する
req.accepts(): 受け入れ可能なリクエストドキュメントタイプを確認する
req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages: 指定された文字セットの最初の許容可能な文字エンコーディングを返します
req.get(): 指定された HTTP リクエストヘッダーを取得します
req.is(): リクエストヘッダー Content-Type の MIME タイプを決定します

Response オブジェクト - response オブジェクトは HTTP 応答、つまりリクエストの受信時にクライアントに送信される HTTP 応答データを表します。共通の属性は次のとおりです。

res.app: req.app と同じ
res.append(): 指定された HTTP ヘッダーを追加します
res.set() は、res.append() の後に以前に設定されたヘッダーをリセットします
res.cookie(name, value [, option]): Cookie を設定します
オプション: domain / expires / httpOnly / maxAge / path / secure / signed
res.clearCookie(): Cookie をクリア
res.download(): 指定されたパスのファイルを転送します
res.get(): 指定された HTTP ヘッダーを返します
res.json(): JSON レスポンスを送信
res.jsonp(): JSONP レスポンスを送信
res.location(): ステータスコードを設定したり、応答を閉じたりせず、応答の Location HTTP ヘッダーのみを設定します。
res.redirect(): 応答の Location HTTP ヘッダーを設定し、ステータスコード 302 を設定します
res.render(view,[locals],callback): ビューをレンダリングし、同時にレンダリングされた文字列をコールバックに渡します。レンダリングプロセス中にエラーが発生した場合、next(err) は次のようになります。自動的に呼び出されます。コールバックには考えられるエラーとレンダリングされたページが渡されるため、自動的には出力されません。
res.send(): HTTP レスポンスを送信する
res.sendFile(path [, options] [, fn]): 指定されたパスのファイルを送信します -Content-Type はファイル拡張子に従って自動的に設定されます
res.set(): HTTP ヘッダーを設定します。受信オブジェクトは一度に複数のヘッダーを設定できます
res.status(): HTTP ステータスコードを設定する
res.type(): Content-Type の MIME タイプを設定します

ルーティング

HTTP リクエストの基本的なアプリケーションについて学習しました。ルーティングによって、クライアントリクエストに誰 (指定されたスクリプト) が応答するかが決まります。

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

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

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 は、画像、CSS、JavaScript などの静的ファイルを設定するための組み込みミドルウェア express.static を提供します。

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

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

次のように、いくつかの写真を public/images ディレクトリに置くことができます:

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

「Hello World」アプリケーションを再度変更して、静的ファイルを処理できる機能を追加しましょう。

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 (w3cstudy ロゴ) にアクセスすると、結果は次の図のようになります。

GET メソッド

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

Index.html ファイルのコード:

<html>
<body>
<form action="http://127.0.0.1:8081/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 の管理

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

// 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 にアクセスして、以下に示すように端末情報の出力を表示できるようになります。

コーススケジュール

Node.js チュートリアル

Node.js Express フレームワーク

Express の概要

Express をインストールする

Express フレームワークの最初のインスタンス

リクエストとレスポンス

ルーティング

静的ファイル

GET メソッド

POST メソッド

ファイルのアップロード

Cookie の管理

関連情報