Zenn
❓

オタクくん「ギャル先輩、GraphQLってなんですか？」

2024/05/14に公開
GraphQL
プログラミング初心者
tech

ギャル先輩、GraphQLってなんですか？

オタク君「うーん、REST APIはなんとなくわかるけど、GraphQLって何なんだろう…。どうやって使うのか全然わからないや。」

ギャル先輩「あれ？オタクくん、また困ってんの？今度は何？」

オタク君「あ、ギャル先輩！実はGraphQLについて調べてたんですけど、全然わからなくて…。REST APIとはどう違うんですか？」

ギャル先輩「ふーん、GraphQLね。まあ、あーしが教えてあげるよ。まず、GraphQLはFacebookが開発したデータクエリ言語だよ。」

GraphQLとは？

オタク君「データクエリ言語…ですか？」

ギャル先輩「そうそう。REST APIと違って、クライアントが欲しいデータを正確に指定できるんだ。つまり、クライアントが一度に必要なデータだけを取得できるってこと。」

オタク君「なるほど、それは便利ですね。でも、どうやって使うんですか？」

ギャル先輩「じゃあ、実際にコードを見てみようか。まずは、簡単なGraphQLサーバーを作ってみよう。」

簡単なGraphQLサーバーの作成

ギャル先輩「Node.jsとApollo Serverを使ってGraphQLサーバーを作るよ。まず、プロジェクトをセットアップしよう。」

# プロジェクトのセットアップ
mkdir graphql-example
cd graphql-example
npm init -y
npm install apollo-server graphql

オタク君「ふむふむ、まずは環境を整えるんですね。」

ギャル先輩「次に、サーバーのコードを書くよ。以下のようにindex.jsファイルを作ってね。」

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

// スキーマ定義
const typeDefs = gql`
  type Query {
    hello: String
  }
`;

// リゾルバー定義
const resolvers = {
  Query: {
    hello: () => 'Hello, world!',
  },
};

// Apollo Serverのインスタンスを作成
const server = new ApolloServer({ typeDefs, resolvers });

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

オタク君「なるほど、これがGraphQLサーバーの基本的なコードなんですね。」

GraphQLクエリの基本

ギャル先輩「そうそう。これでサーバーを起動して、ブラウザでhttp://localhost:4000にアクセスすると、GraphQL Playgroundが開くよ。ここでクエリを実行してみよう。」

オタク君「クエリ…？」

ギャル先輩「例えば、こんな感じでクエリを書くんだ。」

{
  hello
}

オタク君「おお、これでhelloフィールドの値が取得できるんですね！」

ギャル先輩「そうだよ。クライアント側で欲しいデータを正確に指定できるのがGraphQLの強みだね。」

GraphQLのメリット

オタク君「他にもGraphQLのメリットってありますか？」

ギャル先輩「もちろん！まず、過剰取得や不足取得がなくなることかな。REST APIだと、エンドポイントごとに固定のデータが返ってくるけど、GraphQLだと必要なデータだけを取得できるから無駄がないんだ。」

オタク君「確かに、REST APIだと複数のエンドポイントを呼び出す必要があったりしますもんね。」

ギャル先輩「それに、APIのバージョニングが不要になるから、メンテナンスが楽になるよ。」

GraphQLのデメリット

オタク君「でも、GraphQLにもデメリットってありますか？」

ギャル先輩「うん、もちろんあるよ。例えば、初期の学習コストが高いことかな。あと、複雑なクエリを実行すると、サーバーへの負荷が高くなることもあるんだ。」

オタク君「なるほど、確かに新しい技術を学ぶのは大変ですね。」

GraphQLの主要なライブラリ

ギャル先輩「ちなみに、GraphQLを使うための主要なライブラリにはApollo ClientやRelayがあるよ。」

オタク君「Apollo Clientは聞いたことがあります。RelayはFacebookが作ったんですよね？」

ギャル先輩「そうそう。自分のプロジェクトに合ったものを選ぶといいよ。」

オタク君「わかりました。ありがとうございます、ギャル先輩！」

ギャル先輩「オタクくん、意外と飲み込み早いじゃん。てーか、ちょっと感心したかも。」

オタク君「え？ありがとうございます。でも、ギャル先輩がわかりやすく教えてくれたおかげですよ。」

ギャル先輩「そ、そんなの当たり前じゃん！ば、バカにしないでよね！」

オタク君「いや、本当に感謝してます。これからもいろいろ教えてください！」

ギャル先輩「う、うん…。まぁ、また困ったら聞いてよね。あーしが教えてあげるからさ。」

オタク君「はい！ギャル先輩、ありがとうございます！」

Discussion