JavaScript中級

中級 JavaScriptで学ぶAPI設計｜練習問題編

 

導入

API設計は、システム開発において非常に重要な役割を果たします。特に、クライアントとサーバー間のデータのやり取りを効率的に行うためには、設計段階から考慮が必要です。本記事では、実務で直面しやすいAPI設計のシチュエーションを通じて、具体的な設計手法や改善点を解説します。

教科書レベルの解説（API設計）

重要な概念の整理

API設計において、RESTfulなアプローチが一般的です。リソースの表現、HTTPメソッドの適切な利用、エラーハンドリングなど、数多くの要素が相互に影響し合います。特に、エンドポイントの設計は、APIの使いやすさに直結します。リソースのURL設計やHTTPステータスコードの適切な使用は、利用者にとってのAPIの理解を助けます。

コード例（JavaScript）


// サンプルAPIエンドポイントの実装
const express = require('express');
const app = express();
app.use(express.json());

let users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' }
];

// ユーザー情報を取得するエンドポイント
app.get('/api/users/:id', (req, res) => {
    const user = users.find(u => u.id === parseInt(req.params.id));
    if (!user) return res.status(404).send('User not found');
    res.send(user);
});

// 新しいユーザーを追加するエンドポイント
app.post('/api/users', (req, res) => {
    const user = {
        id: users.length + 1,
        name: req.body.name
    };
    users.push(user);
    res.status(201).send(user);
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

コードの行ごとの解説

  1. 行1: Expressフレームワークをインポートし、アプリケーションインスタンスを作成します。
  2. 行2: JSON形式のリクエストボディを解析するためのミドルウェアを追加します。
  3. 行4-7: ユーザー情報を格納する配列を定義します。
  4. 行10-17: 特定のユーザー情報を取得するGETリクエストのハンドラーを実装します。ユーザーが見つからない場合、404エラーを返します。
  5. 行20-27: 新しいユーザーを追加するPOSTリクエストのハンドラーを実装します。新しいユーザーを配列に追加し、201ステータスを返します。
  6. 行29-31: サーバーを指定したポートで起動します。

練習問題編

以下の練習問題を解いて、API設計の理解を深めてください。

  1. 問題1: 上記のコードに、ユーザー情報を更新するPUTエンドポイントを追加してください。
  2. 問題2: ユーザー情報を削除するDELETEエンドポイントを実装し、削除が成功した場合は204ステータスを返してください。
  3. 問題3: ユーザー情報を取得する際、クエリパラメータを使って名前でフィルタリングできるようにしてください。

模範解答と解説

  1. 模範解答1: 
    
// ユーザー情報を更新するエンドポイント
app.put('/api/users/:id', (req, res) => {
    const user = users.find(u => u.id === parseInt(req.params.id));
    if (!user) return res.status(404).send('User not found');
    
    user.name = req.body.name;
    res.send(user);
});

    ユーザーが存在する場合、リクエストボディの内容でユーザー名を更新します。

  2. 模範解答2: 
    
// ユーザー情報を削除するエンドポイント
app.delete('/api/users/:id', (req, res) => {
    const userIndex = users.findIndex(u => u.id === parseInt(req.params.id));
    if (userIndex === -1) return res.status(404).send('User not found');
    
    users.splice(userIndex, 1);
    res.status(204).send();
});

    ユーザーが見つからない場合は404エラーを返し、削除が成功した場合は204ステータスを返します。

  3. 模範解答3: 
    
// ユーザー情報を名前でフィルタリングするエンドポイント
app.get('/api/users', (req, res) => {
    const name = req.query.name;
    const filteredUsers = name ? users.filter(u => u.name.includes(name)) : users;
    res.send(filteredUsers);
});

    クエリパラメータが指定された場合、その名前を含むユーザーをフィルタリングします。

まとめ

  • API設計では、エンドポイントの設計が使いやすさに直結します。
  • HTTPメソッドの適切な利用とステータスコードの使い分けが重要です。
  • 実際の業務に役立つ具体的なシチュエーションを通じて、設計の改善点を見つけることが可能です。
RELATED POST