どーも、ぐるたか@guru_takaです。
Node.jsのフレームワークであるExpressを使う機会があったので、備忘録として基本的なチュートリアルを３つまとめました。
- localhostにアクセス→Hello Worldが表示
- ミドルウェアでレスポンスのログを出力
http://localhost:3000/aboutのルーティング設定
初学者の参考になれば幸いです。
目次
準備：expressのインストール
expressの試すディレクトリを適当に作成し、expressをインストールしましょう。
~/express_sample
$ npm install express --save
チュートリアル
localhostにアクセス→Hello Worldが表示
app.jsを作成し、以下のコードをコピペして下さい！解説はコメントで記載しています。
~/express_sample/app.js
// moduleをrequire
const express = require('express')
const app = express()
//GET処理：ブラウザからサーバに対し、情報を取得しようとした時
app.get('/', (request, response) => {
//レスポンスステータスコード200（レスポンス成功時）をセット
//レスポンス成功時、Hello Worldを返す
response.status(200).send('Hello World')
})
// ポート指定で接続
app.listen(3000)
以下の記事を参考にしています。
参考
Node.js + Expressの使い方 - Qiita
そして、以下のようにコマンドラインを叩きましょう。
~/express_sample
$ node app.js
http://localhost:3000/に、「Hello World」が表示されます！
ミドルウェアでレスポンスのログを出力
次はミドルウェア（処理）でシンプルなログを出力してみます。ミドルウェアの基本的な構文は以下の通りです。
基本構文
app.use((req, res, next) => {
// 処理
});
以下、簡単なログを出力するサンプルになります。
~/express_sample/app.js
// moduleをrequire
const express = require('express')
const app = express()
// app.useにミドルウェアを引き渡す
app.use((req, res, next) => {
// 日付
const date = new Date().toISOString()
// リクエストメソッド
const method = req.method
// リクエストURL
const url = req.url
// ログ出力
console.log(`[${date}] "${method} ${url}"`)
// 次のミドルウェアを呼ぶ
next()
})
//GET処理：ブラウザからサーバに対し、情報を取得しようとした時
app.get('/', (request, response) => {
//レスポンスステータスコード200（レスポンス成功時）をセット
//レスポンス成功時、Hello Worldを返す
response.status(200).send('Hello World')
})
// ポート指定で接続
app.listen(3000)
http://localhost:3000/aboutのルーティング設定
次は、http://localhost:3000/aboutにアクセスできるように設定してみます。
コードは以下の通りです。
~/express_sample/app.js
// moduleをrequire
const express = require('express')
const app = express()
// app.useにミドルウェアを引き渡す
app.use((req, res, next) => {
// 日付
const date = new Date().toISOString()
// リクエストメソッド
const method = req.method
// リクエストURL
const url = req.url
// ログ出力
console.log(`[${date}] "${method} ${url}"`)
// 次のミドルウェアを呼ぶ
next()
})
//GET処理：ブラウザからサーバに対し、情報を取得しようとした時
app.get('/', (request, response) => {
//レスポンスステータスコード200（レスポンス成功時）をセット
//レスポンス成功時、Hello Worldを返す
response.status(200).send('Hello World')
})
// 「/about」のルーティング設定
app.get("/about", (req, res) => {
res.status(200).send("aboutページ");
});
// ポート指定で接続
app.listen(3000)
すると、http://localhost:3000/aboutにアクセスすると、「aboutページ」とブラウザに表示されるでしょう。
Webアプリケーションが大きくなった場合は、ルーティングのモジュール化すると、スッキリしたコードになります。
参考
Expressにおけるミドルウェアとルーティング方法 - Qiita
コメントを残す