TypeScriptにおける、RestAPIとGraphQL

RestAPIとGraphQLの比較

RestAPI

RestAPIはリソースベースのアーキテクチャスタイルで、HTTPメソッドを使用してリソースを操作します。以下に、Express.jsとTypeScriptを使用したシンプルなRestAPIの例を示します。

import express, { Request, Response } from 'express';
import bodyParser from 'body-parser';

const app = express();
const port = 3000;

app.use(bodyParser.json());

interface User {
  id: number;
  name: string;
}

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

// 全ユーザーを取得
app.get('/users', (req: Request, res: Response) => {
  res.json(users);
});

// 特定のユーザーをIDで取得
app.get('/users/:id', (req: Request, res: Response) => {
  const user = users.find(u => u.id === parseInt(req.params.id));
  if (user) {
    res.json(user);
  } else {
    res.status(404).send('User not found');
  }
});

// 新しいユーザーを追加
app.post('/users', (req: Request, res: Response) => {
  const newUser: User = req.body;
  users.push(newUser);
  res.status(201).json(newUser);
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

GraphQL

GraphQLは、クライアントが必要なデータを正確に指定できる柔軟なクエリ言語です。以下に、Apollo ServerとTypeScriptを使用したシンプルなGraphQL APIの例を示します。

import { ApolloServer, gql } from 'apollo-server';

const typeDefs = gql`
  type User {
    id: ID!
    name: String!
  }

  type Query {
    users: [User!]!
    user(id: ID!): User
  }

  type Mutation {
    addUser(name: String!): User!
  }
`;

interface User {
  id: number;
  name: string;
}

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

const resolvers = {
  Query: {
    users: () => users,
    user: (_: any, { id }: { id: number }) => users.find(user => user.id === id),
  },
  Mutation: {
    addUser: (_: any, { name }: { name: string }) => {
      const newUser = { id: users.length + 1, name };
      users.push(newUser);
      return newUser;
    },
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

比較と解説

1. エンドポイントの数:

   • RestAPI: 各リソースに対して個別のエンドポイントがあります。例えば、/usersと/users/:id。
   • GraphQL: 単一のエンドポイント（例: /graphql）で全てのリクエストを処理します。

2. データ取得の方法:

   • RestAPI: 固定されたエンドポイントとHTTPメソッドを使用してデータを取得します。例えば、全ユーザーを取得するためにはGET /usersを使用します。
   • GraphQL: クライアントはクエリを使用して必要なデータを指定します。例えば、全ユーザーを取得するためには次のようなクエリを使用します:

     {
       users {
         id
         name
       }
     }
     

3. 柔軟性:

   • RestAPI: エンドポイントごとに決まったデータを返すため、柔軟性が低いです。
   • GraphQL: クライアントが必要なフィールドを指定できるため、柔軟性が高いです。

4. ステート管理:

   • RestAPI: 各リクエストは独立しており、サーバーはクライアントの状態を保持しません（ステートレス）。
   • GraphQL: 同様にステートレスですが、クライアント側でのステート管理が柔軟に行えます。

5. リアルタイムデータ:

   • RestAPI: 通常はポーリングやWebSocketを併用してリアルタイムデータを取得します。
   • GraphQL: サブスクリプションを使用してリアルタイムデータを直接取得できます。