Expressの使い方
node.js(JavascriptでWebサーバやWebアプリを作るソフトウェア)の使い方。
Expressフレームワークのインストール
// プロジェクトディレクトリの作成 $ mkdir express-project $ cd express-project // npm(nodeのパッケージマネージャ) の初期化 $ npm init -y // Expressのインストール // --save は、package.jsonファイルにexpressモジュールのバージョンなどを記録するオプション $ npm install --save expres
const express = require('express'); //Expressモジュールの読みこみ const app = express(); const portNo = 8000; // TCPポート番号 // http://localhost:8000/ にGETアクセスしたとき、 //「GET受信しました」と返す。 app.get('/', (req, res) => { res.send('GET受信しました'); }); // Webサーバを起動 app.listen(portNo, ()=>{ console.log('起動しました: http://localhost:8000/:' + portNo); });
※以下、モジュールの読み込みとWebサーバの起動部分は省略します。
モジュールの読み込みとWebサーバの起動:
const express = require('express'); //Expressモジュールの読みこみ const app = express(); const portNo = 8000; // TCPポート番号 // Webサーバを起動 app.listen(portNo, ()=>{ console.log('起動しました: http://localhost:8000/:' + portNo); });
http://localhost:8000/hello/ にアクセスしたとき、返事を返す。
app.get('/hello/', (req, res) => { res.send('GET受信しました'); });
http://localhost:8000/1 にアクセスしたとき、返事を返す。
「1」を変数(URLのパターンマッチ)として扱います。
app.get('/:num', (req, res) => { // URLパターンの末尾に:num を指定する res.send('GET受信しました: ' + req.params.num); // req.params.num で:numの値を取得する });
http://localhost:8000?q=hi にアクセスしたとき、クエリー文字列を取得する
app.get('/', (req, res) => { res.send('GET受信しました: ' + req.query.q); // req.query.q でqの値を取得する。(qをキーと呼ぶ) });
フォームから送信されたPOSTメソッドを受け付ける
「body-parser」というライブラリをインストールします。
GitHub - expressjs/body-parser: Node.js body parsing middleware
$ npm install --save body-parser
const express = require('express') const app = express(); const bodyParser = require('body-parser'); // body-parser モジュールを読み込みます app.use(bodyParser.urlencoded({extended: true}); // body-parser モジュールを使えるようにセットします // http://localhost:8000/ にアクセスすると、入力フォームが表示される。 app.get('/', (req, res) => { res.send('<form method="POST">' + '<input type="text" name="test" value="テスト">' + '<br /><input type="submit" value="送信">'+ '</form>' ); }); app.post('/', (req, res) => { // app.post でPOSTメソッドを受け付ける res.send('POST受信しました: ' + JSON.stringify(req.body)); });
POST受信しました: {"test":"テスト"}