node.js の epxress フレームワークにて、「Router」を使用する事によって、効率的なルーティングをする事ができます。
今回は、その Router について書いていこうと思います。
ルーティングとは
まず、簡単にルーティングについて説明をしていきます。
(分かる人は読み飛ばして下さい。)
例えば、以下のようなファイル構成があったとします。
aaaaa.com のルートディレクトリ
├ bbb.html
└ ccc.html
bbb.html にアクセスする場合、「http://aaaaa.com/bbb.html」というURLにアクセスをする事になります。
同様に、ccc.html にアクセスをする場合、「http://aaaaa.com/ccc.html」にアクセスをする事になります。
ですが、もし ccc.html が他の人に見られたくないページだった場合、ヤバいですよね。
なので、
基本的にはどのファイルにもアクセスができない様にし、許可したファイルのみアクセスができるようにする。
という風にすれば、見られたくないファイルは守れますよね。
この、「許可したファイルのみ、アクセスができるようにする」という事を実現する仕組みが「ルーティング」です。
node.js/expressでのルーティング
ルーティングでは、
「~のURLにアクセスがあった場合、~のページを表示してね!」
という設定を行います。
node.js だと、具体的には以下のようなコードになります。
//================================
// app.jsファイル
//================================
const express = require('express');
const app = express();
// bbb.htmlのルーティング
app.get('/bbb.html', (req, res) => {
res.sendFile(__dirname + '/bbb.html');
});
// ccc.htmlのルーティング
app.get('/ccc.html', (req, res) => {
res.sendFile(__dirname + '/ccc.html');
});
なんとなくルーティングのイメージは理解できたでしょうか。
ちなみに、「http://aaaaa.com/ppppppppp」にアクセスがあった場合、bbb.html を表示させるという事もできます。
app.get('/ppppppppp', (req, res) => {
res.sendFile(__dirname + '/bbb.html');
});
Routerの役割
Router を使用する事で、様々なルーティングの設定を機能ごとにファイルを分け、管理しやすくできます。
例えば、いくつものルーティングの設定が必要だとしましょう。
//================================
// app.jsファイル
//================================
const express = require('express');
const app = express();
・~へのルーティング設定
・~へのルーティング設定
・~へのルーティング設定
・~へのルーティング設定
・~へのルーティング設定
以下、多数。
これだと、app.js ファイルがごちゃごちゃします。
- メインの app.js ファイル
- ユーザー関連のルーティング設定ファイル
- 商品関連のルーティング設定ファイル
という風に、各機能へのルーティングごとに、別ファイルに移したいですよね。
そこで使うのが Router です。
【app.js ファイル】 > 宣言:「ユーザールーティング.js」のファイルを使用します! > 宣言:「商品ルーティング.js」のファイルを使用します! > このURLに来たら「ユーザールーティング.js」に任せるね! > このURLに来たら「商品ルーティング.js」に任せるね!
【ユーザールーティング.js ファイル】 > ルーターの機能を読みこむよ! > 「ユーザー一覧表示」時のルーティングを行います! > 「ユーザー詳細表示」時のルーティングを行います! > 「ユーザー登録」時のルーティングを行います! > 宣言:ルーターとしてエクスポートします!
【商品ルーティング.js ファイル】 > ルーターの機能を読み込むよ! > 「商品一覧表示」時のルーティングを行います! > 「商品詳細表示」時のルーティングを行います! > 「商品登録」時のルーティングを行います! > 宣言:ルーターとしてエクスポートします!
という感じです。
Routerの具体的なコード
このままでは何となくしか分からないと思うので、node.js のコードを表示します。
コメントの書き方は参考にしないでください。
//================================
// app.jsファイル
//================================
const express = require('express');
const app = express();
// ユーザー関連のルーティングファイル読み込み
const userRouter = require('./userRouter');
// 商品関連のルーティングファイル読み込み
const productRouter = require('./productsRouter');
// 「http://aaaaa.com/users」充てに来た場合
app.use('/users', userRouter);
// 「http://aaaaa.com/products」充てに来た場合
app.use('/products', productsRouter);
app.listen(3000, () => {
console.log('サーバーがポート3000で起動しました');
});
//================================
// userRouter.jsファイル
//================================
const express = require('express');
// ルーター機能読み込み
const router = express.Router();
router.get('/', (req, res) => {
// ユーザー一覧を表示する処理
});
router.get('/:id', (req, res) => {
// 特定のユーザーの詳細を表示する処理
});
router.post('/', (req, res) => {
// ユーザーを作成する処理
});
// ルーターオブジェクトをエクスポート
module.exports = router;
//================================
// productsRouter.jsファイル
//================================
const express = require('express');
// ルーター機能読み込み
const router = express.Router();
router.get('/', (req, res) => {
// 商品一覧を表示する処理
});
router.get('/:id', (req, res) => {
// 特定の商品の詳細を表示する処理
});
router.post('/', (req, res) => {
// 商品を作成する処理
});
// ルーターオブジェクトをエクスポート
module.exports = router;
この様に、「ルーティングを別ファイルに任せる」という事が可能になります。
もう少し説明
例えば、全ユーザーの年齢増をグラフで表すページ「ppppp.html」を作ったとします。
ppppp.html は zzz フォルダの下に配置しましょうか。
aaaaa.com のルートディレクトリ
└ zzz
└ ppppp.html
ファイル名など色々ツッコミ所がありますが、無視してください。
「http://zzz/ppppp.html」にアクセスが来たとします。
この場合のルーティングはどうしたら良いでしょうか?
この場合は、単純に userRouter.js ファイル内に「ppppp.html」への道を作る事で実現できます。
//================================
// userRouter.jsファイル
//================================
// 以下を追加
router.get('/zzz/ppppp.html' (req,res) => {
res.sendFile(__dirname + '/zzz/ppppp.html');
});
「router.get( ‘/zzz/ppppp.html’ )」の部分ですが、ここは拡張子を付けなくても大丈夫です。
拡張子を付けず「router.get( ‘/zzz/ppppp’ )」にしたとすると、アクセスするURLも「http://aaaaa.com/zzz/ppppp」になるので注意して下さい。