GraphQL ガイド

1. GraphQLとは？

GraphQLは、Facebookが開発したデータクエリ言語であり、APIの柔軟なデータ取得を可能にします。

---

🏆 初学者向け：GraphQLの特徴

GraphQLは以下のような特徴を持ちます。

特徴	説明
柔軟なデータ取得	クライアントが必要なデータだけを取得できる
型システム	スキーマを定義し、型を厳密に管理可能
1リクエストで取得	一度のリクエストで複数のリソースを取得可能
強力なクエリ	RESTのエンドポイントごとにリクエストするのではなく、一つのエンドポイントからデータを取得

---

🛠 専門者向け：RESTとの違い

graph TD;
    A[REST API] -->|複数のエンドポイント| B(GET /users);
    A -->|異なるリソース取得| C(GET /posts);
    A -->|追加リクエストが必要| D(GET /comments);
    E[GraphQL] -->|1つのエンドポイント| F(/graphql);
    F -->|リクエスト時にデータ指定| G(必要なデータのみ取得);

項目	REST API	GraphQL
データ取得	複数のエンドポイントが必要	1つのエンドポイントから取得
オーバーフェッチ	必要以上のデータを取得する可能性	必要なデータのみ取得
アンダーフェッチ	別のリクエストが必要な場合あり	1回のリクエストで解決
型安全性	エンドポイントごとに異なる	スキーマを定義し、統一的に管理

---

2. GraphQLの設定

GraphQLを利用するには、まずサーバーを設定します。以下はNode.js（Express + Apollo Server）を用いたGraphQLの設定例です。

const { ApolloServer, gql } = require('apollo-server');

// スキーマ定義
const typeDefs = gql`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    users: [User]
  }
`;

// 仮のデータ
const users = [
  { id: '1', name: 'Alice', email: '[email protected]' },
  { id: '2', name: 'Bob', email: '[email protected]' }
];

// リゾルバ定義
const resolvers = {
  Query: {
    users: () => users,
  },
};

// サーバー起動
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

---

3. GraphQLの利用方法

🎯 クエリ（データ取得）

query {
  users {
    id
    name
    email
  }
}

出力結果:

{
  "data": {
    "users": [
      { "id": "1", "name": "Alice", "email": "[email protected]" },
      { "id": "2", "name": "Bob", "email": "[email protected]" }
    ]
  }
}

📝 ミューテーション（データ変更）

mutation {
  addUser(name: "Charlie", email: "[email protected]") {
    id
    name
    email
  }
}

---

4. まとめ

GraphQLは、クライアントが自由にデータを取得・変更できるAPI仕様です。RESTと比較して、

• オーバーフェッチ/アンダーフェッチの解決
• 柔軟なクエリ
• 型安全性の向上

などの利点があります。Apollo Serverを活用することで、簡単にGraphQLサーバーを構築できます。

---

📝 さらに学ぶ:

• GraphQL公式ドキュメント
• Apollo GraphQL