Express Routerを使ったルーティングの構造化

概要: このチュートリアルでは、Express Routerを使ってルーティングロジックをモジュール化し、整理する方法を学びます。

Express Routerは、個別のファイルでルーティングを定義することで、Expressアプリケーションのルーターを整理し、モジュール化するのに役立ちます。

Express Routerの使用例を見てみましょう。

Expressアプリケーションの作成

ステップ1. express-router-demoのような新しいプロジェクトディレクトリを作成します。

mkdir express-router-demo
cd express-router-demoCode language: JavaScript (javascript)

ステップ2. npm initコマンドを実行してプロジェクトを初期化します。

npm init -yCode language: JavaScript (javascript)

これにより、プロジェクトディレクトリにpackage.jsonファイルが作成されます。

ステップ3. プロジェクトディレクトリに.envファイルを作成し、PORT定数を値3000で定義します。

PORT=3000Code language: JavaScript (javascript)

ステップ4. package.jsonファイルを構成します。

...
  "type": "module",
  "scripts": {
    "start": "node --env-file=.env --watch index.js"
  },
...Code language: JavaScript (javascript)

package.jsonファイルで

ESモジュールを使用するために、"type": "module"エントリを追加します。
scriptsセクションに、index.jsファイルを監視し、アプリの起動時に.envファイルをロードするための"start": "node --env-file=.env --watch index.js"エントリを追加します。

ステップ5. expressパッケージをインストールします。

npm install expressCode language: JavaScript (javascript)

ステップ6. 次のコードでindex.jsファイルを作成します。

import express from 'express';

const app = express();
const PORT = process.env.PORT || 3000;

// Todo routes
app.get('/todos', (req, res) => {
  res.send('A list of todo items');
});

app.post('/todos', (req, res) => {
  res.send('Create a new todo item');
});

app.put('/todos/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Update the todo item with id ${id}`);
});

app.delete('/todos/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Delete the todo item with id ${id}`);
});

app.get('/todos/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Get the todo item with id ${id}`);
});

app.listen(PORT, () => {
  console.log(`The server is listening on port ${PORT}.`);
});Code language: JavaScript (javascript)

index.jsはexpressアプリケーションを起動し、todoリソースを管理するためのさまざまなルートを定義します。このアプリは動作しますが、次の潜在的な問題があります。

モノリシックなサイズ – コードを追加するとindex.jsが大きくなり、異なる部分に移動するのが難しくなります。
保守性 – コードの他の部分に影響を与えずに新しい機能を追加するなど、ファイルの保守が難しくなります。
関心の分離の欠如 – 単一のファイルにルート、ミドルウェア、およびアプリケーション設定を混在させると、関心の分離の原則に違反し、アプリのさまざまな部分を理解するのが難しくなります。
スケーラビリティ – アプリが成長すると、新しいルートを追加するのが難しくなり、開発時間が長くなります。
テスト – すべてのルートが同じファイルにあるため、個々のルートグループをテストするのが難しく、アプリが正しく動作することを保証するのが難しくなります。

Express Routerの使用

ステップ1. プロジェクトディレクトリ内にroutesという新しいディレクトリを作成します。

cd express-router-demo
mkdir routesCode language: JavaScript (javascript)

ステップ2. routesディレクトリ内にtodos.jsという新しいファイルを定義します。

import express from 'express';
const router = express.Router();

router.get('/todos', (req, res) => {
  res.send('A list of todo items');
});

router.post('/todos', (req, res) => {
  res.send('Create a new todo item');
});

router.put('/todos/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Update the todo item with id ${id}`);
});

router.delete('/todos/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Delete the todo item with id ${id}`);
});

router.get('/todos/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Get the todo item with id ${id}`);
});

export default router;Code language: JavaScript (javascript)

仕組み

まず、expressライブラリからexpress関数をインポートします。

import express from 'express';Code language: JavaScript (javascript)

次に、Routerの新しいインスタンスを作成します。

const router = express.Router();Code language: JavaScript (javascript)

このRouterインスタンスを使用すると、モジュール方式でルートを定義および管理できます。

3番目に、Routerオブジェクトを使用して、todoリソースのroutesを定義します。

router.get('/', (req, res) => {
  res.send('A list of todo items');
});

router.post('/', (req, res) => {
  res.send('Create a new todo item');
});

router.put('/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Update the todo item with id ${id}`);
});

router.delete('/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Delete the todo item with id ${id}`);
});

router.get('/:id', (req, res) => {
  const { id } = req.params;
  res.send(`Get the todo item with id ${id}`);
});Code language: JavaScript (javascript)

これらのルートでは、/todosまたは/todos/:idを明示的に指定する必要はありませんが、/および/:idを指定します。この機能は、ルートプレフィックスと呼ばれます。

ルートプレフィックスを使用すると、共通のパスセグメントでルートにプレフィックスを付けることができます。このルートプレフィックスは、後でindex.jsファイルで使用します。

4番目に、ルーターをデフォルトのエクスポートとしてエクスポートします。

export default router;Code language: JavaScript (javascript)

ステップ3. 次のようにindex.jsファイルを変更します。

import express from 'express';
import todoRoutes from './routes/todos.js';

const app = express();
const PORT = process.env.PORT || 3000;

app.use('/todos', todoRoutes);

app.listen(PORT, () => {
  console.log(`The server is listening on port ${PORT}.`);
});Code language: JavaScript (javascript)

index.jsファイルで

まず、'./routes/todos.js'モジュールからtodoRoutesをインポートします。

import todoRoutes from './routes/todos.js';Code language: JavaScript (javascript)

/routes/todos.jsモジュールからrouterオブジェクトをデフォルトのエクスポートとしてエクスポートしているため、インポート時に任意のエイリアスを使用できます。

この例では、todoRoutesを使用して、より明確にしています。アプリが大きくなると、userRoutes、noteRoutesなどのルーターが増える可能性があります。

2番目に、app.use()メソッドを使用して、/todosパスにtodoRoutesをマウントします。

app.use('/todos', todoRoutes);Code language: JavaScript (javascript)

この例では

/todosはパスプレフィックスです。
todoRoutesはルーターであるため、/todosへのリクエストは、todoRoutesで定義された対応するルートハンドラーによって処理されます。

パスプレフィックスは、/routes/todos.jsで定義されたすべてのルートに/todosをプレフィックスとして付加します。

たとえば、GET /todos/はrouter.get('/', ...)によって処理され、GET /todos/:idはルートrouter.get('/todos/:id', ...)によって処理されます。

ルートをindex.jsから/routes/todos.jsに移動し、Express Routerを使用することで、コードの保守性とスケーラビリティが向上します。

プロジェクトのソースコードをダウンロード

概要

Express Routerを使用して、ルートを個別のモジュールに整理し、よりスケーラブルで保守性の高いコードベースを実現します。

このチュートリアルは役に立ちましたか？