はじめに

フロントエンド開発で頻繁に取り上げられるGraphQLについて、基本的な理解を深めることを目的にこの記事を作成しました。GraphQLの基本概念から始めて、簡易的なメモリ内データベースを用いたCRUD操作の実装に至るまでを説明します。

GraphQLとは？

簡単に言うと、GraphQLはデータ通信のための超便利なクエリ言語のようです。

REST APIとはちょっと異なり、GraphQLを使えば、「必要なデータだけをピンポイントで教えてもらえる」ようになります。

これのおかげで、データが多すぎたり（オーバーフェッチ）、逆に足りなかったりすること（アンダーフェッチ）が減るわけです。便利ですよね。

ざっくりとしたGraphQLのキーポイントは以下の通りです：

クエリ (Queries): 「このデータが欲しい！」とサーバーに伝える時に使います。RESTでいうGETリクエストに似ていますが、もっと自由に、自分の欲しい形でデータを指定できます。
ミューテーション (Mutations): 「データを変更したい！」ときに活躍します。新しいデータの作成、既存のデータの更新、データの削除がこれ一つでできます。さらに、操作後にどんなデータを受け取りたいかも指定可能です。
スキーマ (Schema): GraphQLで遊ぶ際のルールブックです。サーバーが扱うデータの種類や、データのやり取りの方法を定義します。
リゾルバ (Resolvers): クエリやミューテーションを受け取ったら、「オッケー、データを持ってくるね！」と動いてくれる部分です。サーバー側で頑張ってくれるんです。

GraphQLの利点は、「不要なデータを引き連れてきてしまう...」や「複数のリソースを一度に取得したいのに...」といったストレスが減ることにあります。

APIとのやり取りがスムーズになることで、開発が加速し、フロントエンドとバックエンドの開発効率も格段に向上します。このため、現代のウェブ開発において、GraphQLは非常に重要な技術となっています。

GraphQL実装してみる

1. 環境

GraphQLサーバーを構築するためには、Node.jsが必要になるので公式サイトからダウンロードしておきます。

2. プロジェクトの初期化

プロジェクトディレクトリを作成し、Node.jsプロジェクトの初期化を行います。

mkdir graphql-sample
cd graphql-sample
npm init -y

3. 必要なパッケージのインストール

GraphQLサーバーを構築するためにgraphql　とexpress、express-graphqlをインストールします。


npm install express express-graphql graphql

4. サーバーの設定

server.js　ファイルをプロジェクトのルートに作成し、ExpressサーバーとGraphQLのエンドポイントを設定します。ここでは、ユーザー情報のCRUD操作を可能にする簡単なスキーマとリゾルバを定義しています。


// 必要なライブラリをインポートする
const express = require('express'); // Express.js、Node.jsのフレームワーク
const { graphqlHTTP } = require('express-graphql'); // express-graphql、ExpressとGraphQLを統合するためのミドルウェア
const { buildSchema } = require('graphql'); // GraphQL.jsからスキーマを構築するための関数

// サンプルデータ：ユーザー情報を配列で保持
let users = [
  { id: 1, name: 'hoge hoge', email: 'hoge@example.xxx' },
  { id: 2, name: 'fuga fuga', email: 'fuga@example.xxx' }
];

// GraphQLスキーマの定義
// - Query: データを取得するためのクエリの定義
// - Mutation: データを変更（作成、更新、削除）するための操作の定義
// - User: ユーザーオブジェクトの型定義
const schema = buildSchema(`
  type Query {
    user(id: Int!): User
    users: [User]
  }
  type Mutation {
    createUser(name: String!, email: String!): User
    updateUser(id: Int!, name: String, email: String): User
    deleteUser(id: Int!): User
  }
  type User {
    id: Int
    name: String
    email: String
  }
`);

// ルートリゾルバ：クエリやミューテーションに対応する具体的な処理を定義
const root = {
  user: ({id}) => users.find(user => user.id === id), // 特定のIDを持つユーザーを検索
  users: () => users, // すべてのユーザーを返す
  createUser: ({name, email}) => { // 新しいユーザーを作成して追加
    const newUser = { id: users.length + 1, name, email };
    users.push(newUser);
    return newUser;
  },
  updateUser: ({id, name, email}) => { // 特定のユーザー情報を更新
    const user = users.find(user => user.id === id);
    if (!user) throw new Error('User not found');
    user.name = name || user.name;
    user.email = email || user.email;
    return user;
  },
  deleteUser: ({id}) => { // 特定のユーザーを削除
    const index = users.findIndex(user => user.id === id);
    if (index === -1) throw new Error('User not found');
    const deletedUser = users[index];
    users = users.filter(user => user.id !== id);
    return deletedUser;
  },
};

// Expressサーバーの設定
const app = express();
// GraphQLのエンドポイントを設定。
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  // graphiqlは、ブラウザベースのIDEで、開発者がGraphQLクエリを簡単にテストできるようにするツールです。
  graphiql: true,
}));

// サーバーを4000ポートで起動
app.listen(4000, () => console.log('Server running on http://localhost:4000/graphql'));

5. サーバーの実行

サーバーを起動し、http://localhost:4000/graphqlにアクセスして、GraphQLのクエリを試してみましょう。

node server.js

以下のような画面になったら成功です。

6. クエリの実行

http://localhost:4000/graphqlにアクセスし、GraphiQLインターフェースが表示されるので、以下のクエリを入力し、Runボタンをクリックして実行します。

ユーザーの一覧を取得

{
  users {
    id
    name
    email
  }
}

新しいユーザーを作成

mutation {
  createUser(name: "new user", email: "new@example.xxx") {
    id
    name
    email
  }
}

ユーザー情報を更新

mutation {
  updateUser(id: 3, name: "update user") {
    id
    name
    email
  }
}

ユーザーを削除

mutation {
  deleteUser(id: 3) {
    id
  }
}

まとめ

今回の記事で基本的なGraphQLサーバーの設定と、シンプルなクエリを実行してみました。

次のステップとして、より複雑なスキーマの定義や、データベースとの統合などに挑戦してみようと思います。