🎓️

【GraphQL】開発・学習で必ず確認するべきリポジトリ・ツール・Webサイト等 29

2022/11/18に公開約5,300字

はじめに

今回の記事では、個人の独断と偏見でGraphQLの開発・学習で必ず確認するべきGitHubリポジトリ、ツールやWEBサイトなどを29も紹介する。今回の記事を通して、今後GraphQLを学習する上で参考になるものが1つでもあれば幸いである。

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のバックエンドを開発したいなら絶対に読むべき1冊。

Apollo ServerとPrismaではじめるGraphQL API開発入門

TypeScriptで型安全にGraphQLサーバを構築する方法をハンズオン形式で学べる。Todoアプリの開発を通して、GraphQLのスキーマの扱いやCLIの設定方法、マイグレーションの自動化など幅広い分野を学習できる。

ツール

apollo-client

GraphQLの開発を支援するツール「APOLLO」のクライアントライブラリ。GraphQL経由でデータを取得するUIコンポーネントを簡単に構築できるのが最大の特徴である。

apollo-server

apollo-serverapollo-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

https://www.youtube.com/watch?v=eIQh02xuVw4

What is GraphQL? REST vs. GraphQL

https://www.youtube.com/watch?v=yWzKJPw_VzM

GraphQL Tutorial

https://www.youtube.com/watch?v=Y0lDGjwRYKw&list=PL4cUxeGkcC9iK6Qhn-QLcXCXPQUov1U7f&index=1

Building GraphQL APIs with Prisma - Eve Porcello | Prisma Day 2021

https://www.youtube.com/watch?v=U8TKbNwgcSQ

Type safe GraphQL with TypeScript

https://www.youtube.com/watch?v=DfZVi1DwpsM

Build a Scalable GraphQL Server With Nest.js + Typescript

https://www.youtube.com/watch?v=0WgO3-HVH94

参考サイト

https://github.com/chentsulin/awesome-graphql

https://medium.com/javarevisited/top-5-graphql-tutorials-and-courses-for-beginners-fb5543506fc2

https://hackr.io/tutorials/learn-graphql

https://hygraph.com/blog/graphql-tools

https://blog.bitsrc.io/13-graphql-tools-and-libraries-you-should-know-in-2019-e4b9005f6fc2

GitHubで編集を提案

Discussion

ログインするとコメントできます