GraphQLでAPI開発 やってみよう！

2025/8/16に開催されたTECH WOMAN KANSAIの3周年イベントで、GraphQLのハンズオンを行った際の資料です！
ハンズオン講師を担当しました。

Transcript

1. GraphQL でAPI 開発 やってみよう！ あずにゃん TECH WOMAN KANSAI 3 周年〜GraphQL ハンズオン勉強会〜
2. 今日やること 1.GraphQL って何？ 2. もうちょっと細かく... ！ 3. やってみよう！～ハンズオンに挑戦！～
3. GraphQLって何？
4. GraphQLって何？ API 開発のためのクエリ言語 クエリ＝リクエスト( データ取得・更新など) REST API の代替とも言われている
5. GraphQLって何？ 単一エンドポイント 独自の型システムを持っている Query とMutation( とSubscription) がある 欲しいデータだけを取得できる
6. RESTとの比較～REST API～ 複数のエンドポイント リソースごとに決められている HTTP メソッドを使う 決められた構造でデータを返す いらないデータが含まれることも
7. もうちょっと細かく... ！
8. 主な登場人物 Resolver Query やMutation の実装 スキーマ定義 どんなデータを返すのか？
9. 主な登場人物～Resolver～ Query データ取得の処理で使う HTTP メソッドでいう、GET Mutation データ更新系の処理で使う HTTP メソッドでいう、POST 等のGET 以外
10. 主な登場人物～スキーマ定義～ データの型を定義する SDL(Schema Definition Language) を用いて記 述
11. SDL(Schema Definition Language) スカラ型 プリミティブな値 オブジェクト型 Enum 型
12. SDL(Schema Definition Language) List 型 配列 型修飾子の1 つ Non-Null 型 null を許容しない、 「! 」を付ける 型修飾子の1 つ
13. SDL(Schema Definition Language) TypeScript で使う型とはちょっと違う 数値型 Typescript ： number SDL ： Int 配列( 例えば文字列の配列) TypeScript ： string[] SDL ： [String]
14. スキーマの例
15. さっそくやってみよう！ ～ハンズオンに挑戦！～
16. ハンズオンでやること！ 1.Resolver の実装（API 実装） Mutation Query 2.API 実行（Query ）
17. 作業の準備！ Repository をフォーク npm install して、必要なライブラリ等を導入 backend frontend
18. 参考情報～使用技術(バックエンド)～ TypeScript( 言語) Express(FW) GraphQL Apollo Server Prisma Supabase(DB)
19. 参考情報～使用技術(フロントエンド)～ TypeScript( 言語) React( ライブラリ・FW) GraphQL GraphQL Codegen Apollo Client styled-components
20. まずはGraphQL見てみる！ GraphQL サーバを立ち上げてみよう！ backend のpackage.json のstart スクリプト
21. 実装の手順 バックエンド実装 Resolver 実装(Mutation/Query) フロントエンド実装 Query つなぎこみ ※ 今回は、Mutation のつなぎこみは省略。
22. ご参加ありがとう ございました！