GraphQL のおすすめの教材8選！ 【 2024年11月 最新版】

REST APIに代わるモダンAPI「GraphQL」を初めて触る人に向けたコース構成になっています。

■ 本コースの対象者

・GraphQL完全初心者の方

・GraphQLを学んでREST APIとの違いを明確に理解しておきたい方

・GraphQLの公式ドキュメントを読んでもイマイチ理解が深まらない方

・公式ドキュメントよりも動画でサクッと理解したい方

・クエリやリゾルバ等の難しい概念をサクッと理解したい方

RESTに代わることで近年注目されているGraphQL。

余計な情報を取得しないスマートなWebAPI構築が実現できます。

バックエンドエンジニアとしてはキャッチアップしておきたい最新技術の１つ。

■ 本コースを受講する際の注意点

・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。

・すでにGraphQLの公式ドキュメントを読み終えて理解済みの方は、

この講座では新しい学びがないので受講しないようにしてください。

・フロントエンド側の実装は行っておりません。バックエンドAPI構築に注力しています。

1. はじめに
2. 本講座で学ぶこと・デモ
3. 本講座を学習する流れ
4. GraphQL入門
5. GraphQLって何？
6. GraphQLとREST APIの違いって何？メリットは？
7. Apolloって何？
8. GraphQLサーバー構築【簡単なクエリ編】
9. GraphQLサーバー用にプロジェクトを作成しよう
10. ApolloServerを使ってローカルサーバを構築する準備をしよう
11. リゾルバを定義してリゾルバについて理解しよう
12. 実際にApolloでローカルサーバーを立ち上げよう
13. Playgroundを実際に使ってGraphQLを体感してみよう
14. スキーマ定義をHackerNews用に拡張してみよう
15. 拡張したスキーマでGraphQLを叩いて確認してみよう
16. リゾルバとは何か？
17. GraphQLサーバー構築【ミューテーション実装編】
18. ミューテーション(Mutation)をスキーマとリゾルバで定義しよう
19. 実際にMutationクエリを叩いてニュースを投稿してみよう
20. スキーマ定義を別ファイルで管理してリファクタリングしよう
21. GraphQLサーバー構築【データベース編】
22. Prismaって何？
23. Prismaでデータベースの初期化から始めよう
24. Prismaのスキーマ設定を行おう
25. Prismaクライアントでデータベース操作をしてみよう
26. データの永続化ができているかを確認しよう
27. GraphQLサーバー構築【Prismaクライアント接続編】
28. サーバーとPrismaを連携させてデータベースから情報を取り出そう
29. contextをリゾルバで利用してデータベースにアクセスしよう
30. 実際にGraphQLを叩いてデータベースに値を格納してみよう
31. PrismaStudioを使ってデータベースの中身を確認しよう
32. GraphQLサーバー構築【ユーザー認証編】
33. ユーザー認証のためのUserモデルを追加してみよう
34. UserとLinkモデルの関係を明示的に示そう(外部キー設定)
35. サインアップとログインのMutationを設定しよう
36. リゾルバを管理するためのリファクタリングしよう
37. Mutationリゾルバで新規登録のロジックを作成してみよう
38. JWTを使って新規登録するユーザーをトークン化してみよう
39. ユーザーログインのリゾルバを作成しよう
40. ニュース投稿用のリゾルバを作成しよう
41. ユーザーIDを取得するためのutil.jsファイル作成を始めよう
42. ユーザートークンを複合する関数を生成してみよう
43. ユーザーIDを全てのリゾルバで呼び出せる設定をしてみよう
44. postリゾルバを完成させよう
45. Linkリゾルバの実装を始めよう
46. リゾルバ階層って何？parent引数の意味を理解しよう
47. Userリゾルバの実装を始めよう
48. サーバー側のリゾルバコードをリファクタリングしてみよう
49. 正常に認証できるのかフローを確認してみよう
50. ログインして実際にニュースを投稿してみよう
51. 【発展編】GraphQLサーバー構築【サブスクリプション編】
52. サブスクリプション機能って何？
53. ApolloサーバーでPubSub設定を始めてみよう
54. Subscriptionリゾルバ(受信側)の設定を始めよう
55. Mutationで送信側のpostリゾルバを修正しよう
56. 実際にリアルタイム通信ができるか確認してみよう
57. ニュースに投票できる機能を追加してみよう
58. 投票用のGraphQLスキーマを作成してみよう
59. 投票用リゾルバを作成してみよう
60. 新しく投票するリゾルバの実装をはじめよう
61. 【※次のレクチャーにおける訂正】
62. VoteとLinkとUserモデルの新しい関係性を考慮しよう
63. 受信側のSubscription設定を行おう
64. リアルタイムで投票ができるのか確認してみよう
65. ボーナスレクチャー
66. ボーナスレクチャー

本コースでは、REST APIの代替として注目されているGraphQLについて基礎から学習を開始し、GraphQLアプリケーション開発の全体感を学習するコースです。

バックエンドにNestJS、フロントエンドにReact（Apollo Client）を採用し、アプリケーションを構築しながらGraphQLの理解を深めることができます。

■本コース学習する主な内容

基礎編

• GraphQLの基礎

• NestJSの基礎

実践編

バックエンドの実装

• NestJSの環境構築

• GraphQLのセットアップ

• リゾルバーの実装（Query / Mutation）

• GraphQL Playground

• Prismaによるデータベース接続

• Prismaスキーマの定義とマイグレーション

• テーブル間のリレーション

• JWT認証の実装

フロントエンドの実装

• Reactの環境構築

• ページのルーティング

• GraphQLクライアント（Apollo Client）のセットアップ

• muiを使用したレイアウト作成

• 認証機能の実装

■本コースの対象受講者

• REST APIは学習済みだがGraphQLも学習してみたい方

• GraphQLアプリケーションをフルスタックに開発してみたい方

• GraphQLのドキュメント等で学習を始めたものの挫折してしまった方

• 動画を見て手を動かしながら学ぶのが好きな方

■コースに必要な前提知識

• Reactの基礎知識

• TypeScriptの基礎知識

• GraphQL、NestJSの知識は不要です

NestJSについてはコースで必要な内容は解説していますが、REST APIに関してなど幅広く学習したい方は、「NestJS入門 TypeScriptではじめるサーバーサイド開発」という入門者向けコースも出していますので合わせてご視聴いただけますと幸いです。

1. はじめに
2. コースの紹介
3. コースの進め方
4. 注意事項
5. VisualStudioCodeの拡張機能
6. Node.jsのインストール
7. NestJSとGraphQLの基礎
8. GraphQLの概要
9. GraphQLスキーマ
10. NestJSの概要
11. NestJSのアーキテクチャ
12. NestJSでGraphQLを扱う方法
13. バックエンドの実装【GraphQLの基礎】
14. 環境構築
15. 【注意事項】GraphQLのセットアップのレクチャーの修正点
16. GraphQLのセットアップ
17. タスクモデルの作成
18. タスク一覧取得機能の実装
19. GraphQLスキーマの確認
20. GraphQL playgroundからQueryの実行
21. タスク作成機能の実装
22. DTOを使用した入力値バリデーション
23. バックエンドの実装【データベース】
24. データベース環境の構築
25. Prismaのセットアップ
26. スキーマの定義とマイグレーション
27. 【注意事項】Prismaクライアントのセットアップの修正点
28. Prismaクライアントのセットアップ
29. タスクの作成と一覧取得機能の修正 Part1
30. タスクの作成と一覧取得機能の修正 Part2
31. タスク更新機能の実装
32. タスク削除機能の実装
33. バックエンドの実装【セキュリティ】
34. ユーザーテーブルの作成
35. タスクの作成と一覧取得機能の修正
36. ユーザー作成機能の実装 Part1
37. ユーザー作成機能の実装 Part2
38. ユーザー取得機能の実装
39. JWTの導入
40. サインイン機能の実装【ライブラリのインストールとAuthモジュールの設定】
41. サインイン機能の実装【Authサービスの実装】
42. サインイン機能の実装【ストラテジーとAuthGuardの実装】
43. サインイン機能の実装【Authリゾルバーの実装】
44. JWT認証の実装
45. フロントエンドの実装【環境構築とルーティング】
46. Reactプロジェクトの作成
47. ライブラリのインストールと初期セットアップ
48. ページの雛形作成
49. 基本的なルーティング
50. 認証とルーティング Part1
51. 認証とルーティング Part2
52. フロントエンドの実装【認証ページ】
53. GraphQLクライアントの作成
54. サインインページのレイアウト作成
55. サインイン機能の実装 Part1
56. サインイン機能の実装 Part2
57. サインアップページのレイアウト作成
58. サインアップ機能の実装
59. ログアウト機能の実装
60. フロントエンドの実装【メインページ】
61. タスク一覧のレイアウト作成
62. タスク一覧取得機能の実装 Part1
63. タスク一覧取得機能の実装 Part2
64. タスク作成モーダルのレイアウト作成
65. タスク作成機能の実装
66. タスク編集モーダルのレイアウト作成
67. タスク編集機能の実装
68. タスク削除機能の実装
69. ボーナスレクチャー
70. ボーナスレクチャー

本コースでは、フロントエンドにNextjs、バックエンドにHasuraによるGraphQLサーバーを使ったモダンGraphQL Web開発について学習します。

• Hasura Cloudを使ってGraphQLサーバーを作れるようになる

• Nextjs + Apollo ClientのフロントエンドとHasura endpointを連携出来るようになる(CRUD操作)

• NextjsのSSG/ISRとHasuraが連携出来るようになる。

• Apollo Clientのキャッシュの理解 (4つのfetch policy, cache.modify)

• Apollo Clientにおける状態管理 (makeVar, @client)

• Custom Hooks, useCallback, memoによる最適化

• React-testing-library, Mock service worker, next-page-testerを使ったテスト手法

• GraphQL codegenによる データ型の自動生成

＊Nextjs (getStaticProps, getStaticPaths, ISR)とReact Hooks (useState, useEffect...)の基礎 (別コースや公式Tutorialなど)は事前に簡単な自習 をして頂けると助かります。

本コースで学習する主なトピック

Hasura Cloud

Understanding of Hasura Cloud and GraphQL

Table relationships in Hasura (1:1, 1:N, N:N (中間テーブル))

Integration of Nextjs to Hasura

Apollo Client

Apollo client state management by makeVar + useReactiveVar

Apollo client state management by Apollo cache (query with @client)

Apollo client manual cache update (cache.modify)

Apollo client + Hasura CRUD operations

useQuery + useMutation

4つのfetchPolicyの理解(cache-first, cache-and-network, network-only, no-cache)

Nextjs

getStaticProps + Apollo client (SSG + ISR)

getStaticPaths + Apollo client (SSG + ISR) [id] page

Custom hookによるLogicとUIの分離

useCallback + memo

React-testing-library

Write test cases by next-page-tester, react-testing-library

Mocking GraphQL response by MSW

Automatic test run before deploy

GraphQL types

Graphql codegenによるデータ型の自動生成(Typescript)

---収録機材---

Microphone : SHURE SM7B

Microphone stand : Blue compass

Audio interface : Solid State Logic (SSL 2+)

Movie editor : Screen flow 9

1. はじめに
2. Overview
3. コースで必要なツール
4. GitHub (本コースのソースコード)
5. Hasura Cloud
6. [補足] Project name
7. Hasura Cloud : create table
8. Hausra Cloud : One to Many relationships
9. [注意] Hasura仕様更新 One to One relationship
10. Hasura Cloud : One to One relationships
11. Hasura Cloud : Many to Many relationships
12. Apollo Client + Nextjs
13. ReferenceError document is not defined 対処法
14. [注意] Tailwind CSS ver3.0
15. [注意] Install libraryのversion指定
16. [エラー対策] ComponentをJSXコンポーネントとして使用することはできません
17. Nextjs project setup
18. Automatic types generation by codegen
19. Nextjs ver11.0対応
20. Layout component
21. State management in Apollo Client
22. makeVar + useReactiveVar
23. Integration of Nextjs/Apollo client with Hasura
24. Direct access to cache (@client)
25. Full understanding of fetch policy
26. CRUD(Hasura) cache.modify
27. CRUD(Hasura) memo
28. [補足] yarn build時の missing display name error
29. SSG + ISR with Apollo client
30. Custom Hook + useCallback + memo
31. React-testing-library with GraphQL
32. ReferenceError: setImmediate is not defined 対処法
33. [注意] NavBar Test FAIL
34. Test code of navigation + useQuery
35. Test code of CRUD + SSG pages
36. Deploy to Vercel
37. Protection of Hasura endpoint
38. [注意] env.test.localの読み込みエラー
39. [注意] Vercel Node.js version
40. Deploy to Vercel
41. 更に学びたい人向け
42. ボーナスレクチャー

この講座では、Djangoフレームワークを駆使してREST APIおよびGraphQL APIを構築、運用、テストするための包括的な知識と技術を提供します。

目標は、初心者から中級者に向けて、実際の開発現場で必要とされる実践的なサーバサイドのAPI作成スキルを身につけることです。

講座の内容は以下の通りです：

【講座の内容】

1. REST APIの基礎から応用への完全ガイド：REST APIの基本概念から始まり、DjangoでのJsonResponseの返却方法、リチャードソン成熟度モデル（HATEOAS）まで、理論と実践を兼ね備えた学習を提供します。

   さらに、APIViewの使用から関数ベースビュー、クラスベースビューを用いたAPIの構築技術に至るまで、豊富な内容を網羅しています。

   
   

2. APIView、GenericAPIView、ViewSetの深堀り：これらのDjangoコンポーネントを用いたAPIの構築方法を徹底解説。GET、POST、PUT、DELETEリクエストの実行方法からエラーハンドリング、HTTPステータスの指定、Serializerの基礎とバリデーション、Token認証に至るまで、現場で直面する課題に対応するスキルを養成します。

   
   

3. GraphQLの探求：GraphQLの基本原則から始まり、Djangoでの実装方法、graphene_djangoの使用法、データの挿入、更新、削除、クエリ作成の複雑な手法まで、幅広い知識を提供します。

   
   

4. 実践的な演習と単体テストの実装：APIView、GenericAPIView、ViewSetを使った実際のプロジェクトでのAPI構築の演習を行います。さらに、単体テストの実装方法を学びます。

   
   

5. JWT(Json Web Token)の使用：セキュリティが最優先のAPI開発において、JWTの設定と使用方法を習得し、認証されたAPIアクセスの方法を学びます。

RestAPIやGraphQLは、最近のマルチプラットフォーム開発やマイクロサービスアーキテクチャ開発で重要なスキルです。キャリアを次のレベルに引き上げるための一歩として、ぜひご登録ください。

1. 紹介
2. 紹介
3. リンクと検索の方法（ChatGPT）
4. ローカル開発環境の構築
5. このセクションについて
6. Pythonの仮想環境とは何か
7. Windows: venvのインストールと環境構築
8. Windows: Minicondaのインストールと環境構築
9. Windows: VSCodeのインストールと環境構築
10. Windows: Python(venv)のアンインストール手順
11. Windows: Minicondaのアンインストール手順
12. Windows: Djangoのプロジェクト作成・立ち上げ
13. Mac: venvのインストールと環境構築
14. Mac: Minicondaのインストールと環境構築
15. Mac: VSCodeのインストールと環境構築
16. Mac: Python(venv)のアンインストール手順
17. Mac: Minicondaのアンインストール手順
18. Mac: Djangoのプロジェクト作成・立ち上げ
19. 共通: 「pip install」と「conda install」について
20. おまけ: VSCodeの設定編集方法
21. おまけ: 拡張機能
22. おまけ: ショートカット一覧
23. Rest APIとは何か、Djangoの簡単な復習
24. Djangoの復習とAPIとは何か
25. DjangoでJsonResponseを返却する
26. Rest APIの6つの特徴
27. リチャードソン成熟度モデル（HATEOS）
28. Rest APIで開発する利点
29. Rest API 1 (APIView)
30. APIViewの概要
31. APIViewを用いた関数ベースビュー
32. GETリクエストとPOSTリクエストの実行
33. PythonコードからAPIの呼び出し
34. エラーハンドリングとHTTP ステータスの指定
35. REST APIの設定変更
36. クラスベースビューのAPIView
37. Serializerの基礎
38. Serializerにバリデーションを追加する
39. 関数を用いたバリデーションserializer_classの追加
40. Serializerでの保存処理の実行（説明）
41. POSTリクエストで保存処理を実行
42. GETリクエストでデータのリストと詳細を取得する
43. PUTとDELETEで更新、削除処理を実行
44. PATCHでの一部カラムの更新処理を実行
45. 一部エラーの修正
46. ModelSerializerの利用
47. ModelSerializerのフィールドの指定
48. UniqueTogetherValidator
49. パーミッションの利用
50. パーミッションを自作する
51. UserモデルとProductモデルの定義とテーブル作成
52. Userの保存
53. Login処理の実装
54. Logout処理の実装
55. オブジェクトに対するパーミッションの設定
56. Token認証の導入
57. Token認証の実装
58. drf_spectacularの導入
59. 演習（APIView）
60. 演習の説明とTweetのGETリクエスト用のViewの作成
61. User登録用のViewの作成
62. Userログイン処理の作成
63. SpectacularViewの追加
64. Tweet登録処理の実装(POST)
65. Tweet更新、削除処理の実装(PUT, DELETE)
66. フロントエンドの処理の実装、説明、導入
67. 同一オリジンポリシー、django-cors-headers
68. 認証に関する説明、ログイン用の画面の実装
69. ログイン処理の実装、TokenのlocalStorageへの保存
70. 更新処理の実装
71. 削除処理の実装
72. CookieにTokenを保存してログインする
73. 認証処理を実装する
74. キャッシュについて説明
75. キャッシュ機能の実装
76. APIViewまとめ
77. Rest API 2 (GenericAPIView)
78. GenericAPIViewとは何か
79. ListCreateAPIViewの実装
80. Userを登録するViewの作成
81. Userのログイン処理の実装
82. Postリクエストとperform_createを使用したデータの挿入
83. Generic API Viewについて詳細を説明
84. Postの詳細、更新、削除処理の実装
85. Comment機能と一覧・作成処理の実装
86. Serializerのネスト、Commentの詳細、削除処理の実装
87. データ挿入バッチの作成１
88. データ挿入バッチの作成２
89. PageNumberPaginationでページネーションをする
90. LimitOffsetPaginationでページネーションする
91. CursorPaginationでページネーションする
92. 基本的なFilterの実行
93. DjangoFilterBackendで絞り込みをする
94. Filtersetでフィルタリングする１
95. Filtersetでフィルタリングする２
96. SearchFilterを実装する
97. OrderingFilterを実装する
98. CustomFilterを実装する
99. perform_update, perform_destroyによる更新、削除処理の書き換え
100. perform_update, perform_destroyによる更新、削除処理の書き換えを実装する
101. 演習（GenericAPIView）
102. 演習の説明とプロジェクトの作成
103. MovieのSerializer作成とListでの表示
104. 管理画面の表示、Roleの作成
105. Staffの作成、一覧画面での表示
106. 各Modelの詳細画面作成、StringRelatedField
107. ユーザー登録処理
108. ユーザーログイン処理
109. Comment機能の実装
110. Commentの存在チェックと詳細画面の実装
111. 平均点を一覧画面に表示
112. PaginationとFilterの実装
113. 平均点を別テーブルに保存して表示する
114. Pythonファイルからデータを取得する
115. PythonファイルからログインしてCommentを送る
116. GenericAPIViewまとめ
117. Rest API 3 (ViewSet)
118. ViewSetとは何かについての説明
119. 基本的なViewSetでリスト画面を表示
120. 基本的な詳細表示と挿入処理を実装
121. カスタムの追加メソッドを実装
122. GenericViewSetでlistとcreateを実装
123. ModelMixinを継承する
124. ページネーションとフィルターの実装
125. ModelViewSetとReadOnlyViewSet
126. ユーザー登録処理
127. ユーザーログイン処理
128. ユーザー情報の更新
129. パーミッションの設定
130. 単体テストの実装
131. 単体テストの方法についての説明
132. リストに対する単体テスト
133. 詳細とリストのフィルターに対する単体テスト
134. Createへの単体テスト
135. parameterizedの利用
136. 登録処理の単体テスト
137. ログイン処理の単体テスト
138. APIView、GenericAPIView、ViewSetの違い
139. その他追加要素（画像アップロード、JWT_TOKEN）
140. 画像アップロード処理
141. JWT(Json Web Token)とは何か
142. simplejwtの設定
143. AccessTokenとRefreshTokenの使用
144. RSA暗号を使用
145. ViewSetの演習
146. 演習の説明とカスタムユーザーの作成
147. ユーザー登録処理の実装
148. 登録処理の実行確認
149. ログイン処理の実装
150. モデルとシリアライザーの作成
151. ViewSetの実装
152. Ingredient登録処理の実装
153. フィルター処理の実装
154. PythonファイルからLogin処理の実行
155. レシピ一覧の取得
156. Viewの修正（perform_create, perform_update, perform_destroyの実装）
157. 更新処理、削除処理を実行
158. ViewSetまとめ
159. GraphQLを実装する
160. GraphQLとは何か？
161. Modelの定義
162. 管理画面の作成とデータの格納
163. graphene_djangoの基本説明
164. DjangoObjectTypeとObjectTypeの基本的な実装
165. get_querysetの書き換え
166. resolverでデータを取得する
167. resolverでフィルター処理の実装
168. resolverでのフィルター処理とQueryを複数定義
169. GraphQLを用いたデータ挿入
170. GraphQLを用いたデータ更新、削除
171. GraphQL詳細（FieldとFieldに設定できる値）
172. ObjectTypeで定義をする
173. FieldとListでデータを取得する
174. 外部APIからデータを取得してFieldに設定する
175. 外部APIからデータを取得してListに設定する
176. Schemaとは何か
177. Schemaの出力
178. GraphIQLの使い方、別名をつける、変数を使う
179. Fragmentの利用方法
180. UNIONの利用方法
181. Interfaceの実装１
182. Interfaceの実装２
183. Interfaceの実装３
184. Schemaを確認するクエリ
185. Relayの基本〜Modelの実装〜
186. Relayの実装・実行
187. CSVファイルからToDoテーブルへのデータの挿入
188. データの絞り込み
189. 複雑な絞り込みの実装
190. Relayのページネーション
191. グローバルIDでの絞り込み
192. CSVファイルからColumnテーブルへのデータの挿入
193. グローバルIDを用いた複数テーブルからのデータの取得
194. from_grobal_idの使用方法
195. Relayを用いたデータの挿入
196. Relayを用いたデータの更新
197. Relayを用いたデータの削除
198. Nodeの並び替え
199. enumを用いたNodeの並び替え
200. JWT(Json Web Token)を使用する

おもにNext.js、Prisma、GraphQL Code Generatorを用いたWebアプリケーションの構築手法について解説したコースとなります。

上記技術に加えて、以下の技術も採用しています。

• TypeScript

• Tailwind CSS

• NextAuth.js（Auth.js）

• Apollo GraphQL

• Prettier

• ESLint

• Vitest

• React Testing Library

• GitHub Actions

モダンなWebアプリケーションの開発手法について興味がある方にオススメです。

1. はじめに
2. 本コースの概要
3. リソースのダウンロード
4. VSCodeの設定
5. Next.jsのセットアップ
6. Next.jsのインストール
7. 拡張機能の有効化
8. Node.jsのバージョン指定
9. ESLintとPrettierの設定
10. ディレクトリ構造の確認
11. Tailwind CSSの設定
12. Prismaのセットアップ
13. Prismaの概要
14. スキーマファイルの生成
15. NextAuth.js（Auth.js）の導入
16. DBスキーマの追加
17. Dockerを用いたローカル環境の構築
18. メールアドレスログインの実装
19. GraphQL Code Generatorのセットアップ
20. GraphQL Code Generatorの概要
21. GraphQL Code Generatorの動作確認
22. リゾルバーの作成
23. GraphQLエンドポイントの作成
24. クライアントの作成
25. コンポーネントの作成
26. テストコードの追加
27. VitestとReact Testing Libraryの概要
28. 各種ライブラリのインストール
29. 設定ファイルの追加
30. テストコードの追加
31. CIの追加
32. 本番環境へのデプロイ
33. メール配信サービスの設定
34. データベースの設定
35. Webサーバーの設定
36. ボーナストラック
37. 次のステップへ