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
6.9k
Cookpad Summer Internship 2021 Web Frontend
Kazuhito Hokamura
August 26, 2021
Tweet
Share
More Decks by Kazuhito Hokamura
See All by Kazuhito Hokamura
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
2.7k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.2k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
300
RailsエンジニアのためのNext.js入門
hokaccha
7
17k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.5k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
820
Web Frontend Improvement in Cookpad
hokaccha
1
890
cookpad summer internship 2018 - Git
hokaccha
1
9.4k
cookpad summer internship 2018 - JavaScript
hokaccha
0
9.3k
Other Decks in Technology
See All in Technology
JAWS-UG Bedrock Claude Night
yamahiro
3
540
反実仮想機械学習とは何か
usaito
PRO
9
3.3k
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
520
私が trocco を推す理由
__allllllllez__
1
200
20240416_devopsdaystokyo
kzkmaeda
1
210
ServiceNow Knowledge Learning Rise up
manarobot
0
200
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
2
1.6k
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.3k
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
760
ユーザーストーリーのレビューを自動化したみたの
bun913
1
410
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.6k
Cracking the KubeCon CfP
inductor
2
220
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Into the Great Unknown - MozCon
thekraken
10
990
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
A designer walks into a library…
pauljervisheath
200
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
The Cost Of JavaScript in 2023
addyosmani
16
3.8k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Embracing the Ebb and Flow
colly
80
4.1k
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!