【2026年版】GraphQLの始め方 — 柔軟なAPI設計の第一歩
🎚 難易度 ★★☆ 中級者向け
⏱ 学習時間の目安 読むだけ10分、サーバー構築まで30〜60分
📚 前提知識 api-development-getting-started の基礎知識・javascript-getting-started の基礎知識
✅ このガイドで学べること
- GraphQLとRESTの違いと使い分け
- スキーマ定義とリゾルバの書き方
- QueryとMutationの基本
- Apollo Serverまたは類似ツールのセットアップ
GraphQL vs REST 比較
| 項目 | REST | GraphQL |
|---|---|---|
| エンドポイント数 | 複数（/users, /posts…） | 1つ（/graphql） |
| データ取得 | サーバー側で決まる | クライアントが必要な分だけ指定 |
| 過不足 | オーバーフェッチ/アンダーフェッチが起きやすい | 必要なフィールドだけ取得できる |
| 学習コスト | 低い | やや高い |
| 向いている場面 | シンプルなCRUD | 複雑な関連データを扱うとき |
はじめてのGraphQL（Apollo Server）
npm init -y
npm install @apollo/server graphql// server.ts
import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';
const typeDefs = `
type User {
id: ID!
name: String!
email: String
}
type Query {
users: [User]
user(id: ID!): User
}
`;
const users = [{ id: '1', name: 'ひよこ', email: 'chick@example.com' }];
const resolvers = {
Query: {
users: () => users,
user: (_: unknown, { id }: { id: string }) => users.find(u => u.id === id),
},
};
const server = new ApolloServer({ typeDefs, resolvers });
const { url } = await startStandaloneServer(server, { listen: { port: 4000 } });
console.log(`サーバー起動: ${url}`);よくある詰まりポイント
Q: N+1問題が発生する → GraphQLでは関連データを取得するときにN+1クエリが起きやすいです。DataLoaderライブラリを使ってクエリをバッチ処理することで解決できます。
Q: スキーマが大きくなって管理が大変
→ スキーマをファイルに分割して mergeTypeDefs で結合したり、Federation（スキーマの分散管理）を使うと整理できます。
Q: RESTとGraphQLどちらを選ぶべき？ → 小規模・シンプルなAPIならREST、複数のクライアント（Web/モバイル）が異なるデータセットを必要とする場合はGraphQLが向いています。
ペンギン先生 
ひよこ なるほど！じゃあGraphQLを始めるには、まず何から覚えればいいの？
ペンギン先生 まずは3つの操作を覚えよう。データを取得する「Query」、データを変更する「Mutation」、リアルタイムに更新を受け取る「Subscription」。この3つがGraphQLの基本だよ。最初はQueryだけ使えれば十分だね。
ひよこ Queryってどうやって書くの？SQLみたいな感じかな？
ペンギン先生 ひよこ すごく分かりやすい！でもサーバー側はどうやってデータの形を決めてるの？
ペンギン先生 ひよこ スキーマを書いたら、次はどうやって動かすの？
ペンギン先生 ペンギン先生 ひよこ フレームワークはどれを選べばいいの？Apollo？Relay？
ペンギン先生 ひよこ 学習のロードマップとしては、どういう順番で進めるのがいいかな？
ペンギン先生 ペンギン先生 ひよこ セキュリティ以外にも注意点ってあるの？