【GraphQL】開発・学習で必ず確認するべきリポジトリ・ツール・Webサイト等 29
はじめに
今回の記事では、個人の独断と偏見でGraphQLの開発・学習で必ず確認するべきGitHubリポジトリ、ツールやWEBサイトなどを29も紹介する。今回の記事を通して、今後GraphQLを学習する上で参考になるものが１つでもあれば幸いである。
GitHubリポジトリ
awesome-graphql
GraphQLの開発・学習で役立つツールやサイト等をまとめているGitHubリポジトリ。GraphQLを学習・開発で使っているなら必ず確認しておきたい。
graphql-apis
GraphQLで開発されたAPIをまとめているGitHubリポジトリ。GraphQLの活用事例を調べるにはうってつけである。
learning-graphql
GraphQLの基礎知識をMarkdownで徹底解説されているGitHubリポジトリ。
書籍・電子書籍
GraphQL i - Tutorialspoint
GraphQLの基礎知識を徹底解説されている電子書籍。英語がそこまで難しくなく、ソースコード付きで丁寧に解説されているので非常に読みやすい。
The road to graphql
GraphQLの基礎知識だけではなく、ReactやNode.jsを使ってGraphQLを操作する方法も解説されている。実務に近い内容を学びたいなら読んでおいて損はないだろう。
初めてのGraphQL
O'Reillyが出版しているGraphQLの入門書。基礎知識だけではなく、認証やファイルのアップロードなどのような実践的な内容まで徹底解説されている。日本語でGraphQLの入門書を探しているなら最初に確認するべきだ。
GraphQL スターターパック | Prisma + NestJS + Next.JS製 個人ブログサイトをCloud Runで運用しよう
NestJSでGraphQLのバックエンドを実装し、Next.jsと連携してブログサイトを開発するチュートリアル。TypeScriptだけでGraphQLを開発したいなら必ず確認しておきたい。全部読むには500円必要だが、ほとんどの部分は無料で公開されている。
【GraphQL 開発超入門】React × GraphQL × Rails でアプリケーションを作る
GraphQLを使ってRailsやReactでSPA(シングルページアプリケーション)の開発をするチュートリアル。GraphQLの実際の開発フローを学べる。
TypeScript * GraphQLのバックエンド設計プラクティス
TypeScriptでGraphQLを操作する上で重要なポイントを丁寧に解説されている。今後TypeScriptでGraphQLのバックエンドを開発したいなら絶対に読むべき１冊。
Apollo ServerとPrismaではじめるGraphQL API開発入門
TypeScriptで型安全にGraphQLサーバを構築する方法をハンズオン形式で学べる。Todoアプリの開発を通して、GraphQLのスキーマの扱いやCLIの設定方法、マイグレーションの自動化など幅広い分野を学習できる。
ツール
apollo-client
GraphQLの開発を支援するツール「APOLLO」のクライアントライブラリ。GraphQL経由でデータを取得するUIコンポーネントを簡単に構築できるのが最大の特徴である。
apollo-server
apollo-serverはapollo-clientをふくむあらゆるGraphQLクライアントから問い合わせ可能な仕様に準拠したGraphQLサーバを実装している。これは、あらゆるソースからのデータを使用して、GraphQLクライアントのためのAPIドキュメントを自動で生成できる。
GraphQLで効率的に開発を進める上では絶対に欠かせない。
graphiql
リアルタイムでGraphQLファイル(拡張子は.gql)を編集、実行できるツール。実際のGraphQLのデータを検証する際に役立つ。
graphql-voyager
任意のGraphQL APIの構造をビジュアル化して出力する。自分が現在開発しているGraphQLデータの構造を正確に把握するうえで重宝する。
Prisma
Prismaはデータベースの開発フローを簡略化するために開発されたORMである。紹介しているツールの中では公式ドキュメントが非常に充実している。GraphQLを使うことで、主に以下のような機能を実装できる。
- CRUD
- クエリ検索エンジン
- 型安全なリゾルバ
このように、Prismaを使えば柔軟性が高く本番環境に適したGraphQLサーバを簡単に実装できる。
graphql-editor
GraphQLのスキーマの構造をリアルタイムで確認できるエディタ。ブロックを使ってGraphQLのスキーマをつくると、エディタがそれをコードに変換してくれる。
GraphQLでAPIを開発するとき、データ構造のプロトタイプを素早く行えるのが最大のメリット。視覚的にデータ構造を把握しやすい。
graphql-playground
GraphQLのテキストエディタ。graphql-editorと同様に、リアルタイムでGraphQL APIの挙動を確認できる。
graphql-editorとの最大の違いは、自動リロードに対応したり、クエリの履歴を残したりできることである。より高度なGraphQLの開発を進めるなら確認して損はない。
WEBサイト・WEB記事
A Beginner’s Guide to GraphQL
初心者向けにGraphQLの基礎知識を丁寧に解説されている。GraphQLを学びたいもののどうすればいいのかわからなければ読んでおこう。
GraphQL入門
GraphQLの公式ドキュメントを読むのが苦手な人に向けて、GraphQLの基礎知識を丁寧に解説されている。内容はREST APIとの違いや導入方法をメインに書かれている。
GraphQLが解決する問題とその先のユースケース
バックエンドでGraphQLを開発する上で解決する問題とその実例を箇条書きでまとめられている。GraphQLでできることや活用事例を確認したいなら絶対に確認するべき。
TypeScript + Prisma + NestJSでGraphQLサーバを作ってみる
TypeScriptでGraphQLサーバを開発するチュートリアル。GraphQLの実際の開発フローを大雑把に確認したいなら一読するべきだ。
GraphQL入門 - 使いたくなるGraphQL
GraphQLの概要とその使い方、構造を易しい言葉で丁寧に解説されている。
GraphQLの全体像とWebApp開発のこれから
GraphQLが開発された背景や活用事例を中心に丁寧に解説されている。Web開発でGraphQLを活用するメリット・デメリットについて学べる。実務でGraphQLを導入しようと考えているなら絶対に読んでおきたい。
動画
記事が冗長化するため詳細な説明は割愛する。詳細は実際に視聴して確認してほしい。
GraphQL Explained in 100 Seconds
What is GraphQL? REST vs. GraphQL
GraphQL Tutorial
Building GraphQL APIs with Prisma - Eve Porcello | Prisma Day 2021
Type safe GraphQL with TypeScript
Build a Scalable GraphQL Server With Nest.js + Typescript
参考サイト
Discussion