Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cookpad Summer Internship 2021 Web Frontend
Search
Kazuhito Hokamura
August 26, 2021
Technology
0
7.2k
Cookpad Summer Internship 2021 Web Frontend
Kazuhito Hokamura
August 26, 2021
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
4.5k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.5k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.4k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
400
RailsエンジニアのためのNext.js入門
hokaccha
7
20k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.9k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
970
Web Frontend Improvement in Cookpad
hokaccha
1
1.1k
cookpad summer internship 2018 - Git
hokaccha
1
9.7k
Other Decks in Technology
See All in Technology
2025advance01
minamizaki
0
100
勘違いから始まったProxmox on ProxmoxでGPUパススルー【JPmoxs勉強会#7】/JPmoxs7_GPU_Passthrough_on_Proxmox_on_Proxmox-A_Journey_That_Started_with_a_Misunderstanding
tsukimi_site
1
180
Digitization部 紹介資料
sansan33
PRO
1
3.7k
AWS LambdaでSocket通信サーバーレスアプリケーションのリアルタイム通信 / 20250523 Kumiko Hennmi
shift_evolve
1
300
iOS/Androidで無限循環Carousel表現を考えてみる
fumiyasac0921
0
110
VueUseから学ぶ実践TypeScript #TSKaigi #TSKaigi2025
bengo4com
3
5.3k
スプリントゴールで価値を駆動しよう
takufujii
3
1.6k
テストを実施する前に考えるべきテストの話 / Thinking About Testing Before You Test
nihonbuson
PRO
11
1.7k
変化に強いテーブル設計の勘所 / Table design that is resistant to changes
soudai
47
13k
RDRA3.0を知ろう
kanzaki
2
330
Standard Schema: スキーマライブラリの統一企画とは何か
nozomuikuta
1
440
AWS パートナー企業のテクニカルサポートが日々思っていること 〜そして、4/15 の現場から〜
kazzpapa3
2
380
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Six Lessons from altMBA
skipperchong
28
3.8k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Invisible Side of Design
smashingmag
299
50k
The Cult of Friendly URLs
andyhume
78
6.4k
Designing Experiences People Love
moore
142
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
14
880
Building Applications with DynamoDB
mza
95
6.4k
Into the Great Unknown - MozCon
thekraken
38
1.8k
The Cost Of JavaScript in 2023
addyosmani
49
7.9k
We Have a Design System, Now What?
morganepeng
52
7.6k
Transcript
Cookpad Summer Internship 2021 Web Frontend
講師・TA
外村 和仁 @hokaccha • 技術部 / テックリード • 福岡在住、カープファン •
好き: TypeScript, React, Ruby, Rails • 個人ワーク: Adventar, nodebrew
萩原 馨 @kaorun343 • 技術部 • テレビ(特にNHK)をよく観ています • 好き: TypeScript,
Vue, React, Rust • 個人ワーク: vue-property-decorator
森川 慎太郎 @morishin • 略歴 ◦ 2015年に新卒入社してずっとユーザー投稿領域でクックパッド iOS やったりお料理アルバム・みんなのお弁当・ Cookin’・クック
パッドMYキッチンなどの iOS、 Rails、React Native 開発などを やっていた ◦ 2019-2020年 iOS 大規模リニューアルのサーバーサイドと iOS の 開発 ◦ 現在はウェブフロントエンドが中心 (cookpad.com の開発) ◦ レシピ事業サービス基盤部というところでテックリード • 0歳児ひとりと猫2匹 • 趣味は個人開発、ビール、コーヒー • 好きな川は鴨川 (一級河川)
タイムテーブル
タイムテーブル • 11:00-12:00 課題発表、講義(これ) • 12:00-13:00 🍔 ランチ •
13:00-15:00 基本課題 • 15:00-15:30 基本課題解説 • 15:30-18:00 応用課題、基本課題の続き
課題発表〜👏
None
None
全体スケジュール • 1日目: Webアプリを実装 ← 今日 • 2日目: iOSアプリを実装 •
3日目: APIを実装 • 4日目: インフラ・デプロイ • 5日目: サービス開発(課題とは関係なし)
API • GraphQL の API が用意してある • 3日目の講義でこのAPIを実装する • 1日目、2日目は完成品を呼ぶ
Webアプリの技術スタック • TypeScript • Next.js • GraphQL
GraphQLの概要
GraphQLとは • Web API のクエリ言語とランタイム • REST や gRPC などと同じレイヤー
• 柔軟にクエリできる点や型システムが特徴
REST vs GraphQL
Request Response
Request Response
REST vs GraphQL • GitHub が REST と GraphQL の両方の
API を公開している ので比較してみる • 特定の Issue のタイトル、概要、コメントを取得したい
REST
REST
REST • issue と comment のAPIを2回叩く必要がある • 使わないフィールドも返ってくる • 何が返ってくるかリクエストだけ見てもわからない
GraphQL
REST と GraphQL • 必要なフィールドだけ指定できればいくつかの問題は解決する ◦ /org/repo/issues/43?fields=title,description,comments • 実はこれが GraphQL
の前身である Graph API の原型 ◦ https://developers.facebook.com/docs/graph-api • これをもっといい感じに使えるようにしたのが GraphQL
GraphQLの利点 • 取得するフィールドを明示的に指定できる • 複数のデータを1リクエストで取得できる • 強固な型システム
JavaScriptとGraphQL • 公式のリファレンス実装がJavaScript ◦ https://github.com/graphql/graphql-js ◦ サーバー/クライアント両方の実装がある • Apollo を筆頭に公式以外のエコシステムも豊富
◦ https://www.apollographql.com/
TypeScriptとGraphQL • typescript-codegen や Apollo CLI で TypeScript の型を自 動生成できる
• リクエスト/レスポンスに型をつけられるため堅牢かつ快適 に開発できる
GraphQLの基本機能
実践 GraphQL • Schema • Query • Mutation • Error
Schema • GraphQLの型定義ファイル • GraphQL のサーバーはスキーマを元にリクエストの クエリとレスポンスbodyの値を検証する • クライアントの自動生成などにも利用できる
Schema
Basic Types スカラー型 リスト Non Null Nullable
Object Type オブジェクト型
Root Type ルート型 トップレベルクエリ
Query • クライアントがほしいデータを記述してサーバーにリクエスト する • スキーマとはまた別の独自シンタックス
Query
Query クエリ名(オプショナル) トップレベルクエリ 取得するフィールドを列挙 ネストしたフィールド
Multiple Query 複数のクエリを指定できる
Field alias フィールドに別名をつけて複数 指定できる
Variables クエリの外から変数を受け取る
Variables ここで変数を渡す
Mutation • RESTでいう POST/PUT/DELETE にあたるもの • スキーマやクエリの書き方は GET 系のクエリと同様 •
特性が全然違うので分けて考える必要がある
Mutation Schema
Mutation Schema ルート型
Input Type Input 型
Mutation Query
その他の機能 • Custom Scalar Type • Enum Type • Union
Type • Interface • Fragments • Directive
ドキュメントの読み合わせ
Happy Hacking!