はじめに

以下の記事の続きです。前回は簡単なレスポンスをブラウザ表示するだけの内容でしたが、
今回もう少しWebアプリケーションらしいものにするため、ルーティング機能を紹介しようと思います。

【Node.js】Express の使い方～簡単なWebサーバー構築～ - まるノート

前の記事で app.js に以下の記述をして、ブラウザへのアクセス時に「こんにちは！」が表示されることを確認しました。

const express = require('express');
const app = express();

app.get("/", (req, res) => {
  console.log("hello express");
  res.send("こんにちは！")
});

app.listen(3000, () => {
    console.log('Server listening on port 3000');
  });

エンドポイントとルーティング

エンドポイントの変更

app.get() の第1引数に指定した「/」はエンドポイントと呼びます。
ここを変えることで「http://localhost:3000」から後ろに続くアクセス先のURLを色々と変更することができます。

app.get("/pokemon", (req, res) => {
  res.send("ポケモンです")
});

app.get("/pokemon/info", (req, res) => {
  res.send("ポケモン情報です")
});

「/」の部分を「/pokemon」「/pokemon/info」に変えて二つのapp.get() の処理を追加しました。
Webサーバーを起動してブラウザからそれぞれのエンドポイントにアクセスしてみます。

上の例ですと、「ポケモン」と「ポケモン情報」の二つしかありませんでしたが、
例えば町情報、アイテム情報、認証など、どんどん増やすことが出来ます。

しかしエンドポイントを増やすほど、処理が長く煩雑になってしまいます。
そこで、次項ではルーティングという機能を使って、エンドポイントをまとめてみます。

ルーティング設計

下の画像のように、「routes」というフォルダに「pokemon.js」というファイルを作ります。

pokemon.js には以下を記載しましょう。

const express = require('express');
const router = express.Router();

router.get("/", (req, res) => {
    res.send("ポケモンです")
  });
  
router.get("/info", (req, res) => {
res.send("ポケモン情報です")
});

module.exports = router;

2行目の「const router = express.Router();」でルーターのインスタンスを作成します。
代入先の変数（router）を用いることでルーティングの設計ができるようになります。

さらに変更した点は以下です。

「app.get 」は「router.get」に書き換える
エンドポイントの共通部分「/pokemon」は「/」に置き換える
「module.exports = router;」で「app.js」でこのルーターを使えるようにする。

以上でpokemon.js 側の記載になります。

app.js を修正する

今度は app.js 側を書き換えてゆきます。

追加する行は以下の通りです。
1行目の require 文で pokemon.js をインポート、
2行目のapp.use() を使うことで、第1引数のエンドポイントは共通で使って、あとのURLは「pokemonRouter」に任せる、といった設定が可能になります。

const pokemonRouter = require("./routes/pokemon");
app.use("/pokemon", pokemonRouter);

追加したのは赤枠部分です、「app.get」は pokemon.js 側に移したのでコメントアウトしましょう。

再度Webサーバーを起動して、pokemon.js を追加する前と同様にブラウザで以下が表示できれば成功です。

ランダムな文字列をエンドポイントに設定したい場合

こちらは少し高度な内容かもしれません。
例えばポケモン情報の中で、さらに151番目の情報を取得したいなどの場合に用いることが出来ます。

上述の pokemon.js に追記をします。

const express = require('express');
const router = express.Router(); 

//・・略・・//

router.get("/info/:id", (req, res) => {
  res.send(`${req.params.id}番目のポケモン情報です`)
  });

module.exports = router;

この「:id」のようにコロンのあとにパラメータを指定することで、エンドポイントを任意の文字列や数値に設定することが出来ます。

そして「${req.params.id}」を記載することで、パラメータを利用できます。文字列として表示したい場合はバッククオートで囲みます。

これまでと同様にブラウザからアクセスしてみます。再度に指定した数値が表示されれば成功です。

以上が express のルーティング機能を利用したエンドポイントの設定方法です。
少しずつWebアプリケーションっぽくなってきたのではないでしょうか。もう少し別記事を用意して追加機能の紹介はしてゆこうと思います。
最後までご覧頂きありがとうございます。

まるノート

備忘録も兼ねて、様々なお役立ち情報をまとめています。

【Node.js】Express の使い方～ルーティングの設定をしてみる～