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.6k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3.5k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.5k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
420
RailsエンジニアのためのNext.js入門
hokaccha
7
20k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.9k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
980
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
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
coosuke
PRO
1
330
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
opelab
9
2.2k
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
340
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
2
1k
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
d120145
0
210
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
470
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
0
130
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.4k
A2Aのクライアントを自作する
rynsuke
1
150
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
1
140
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
53
32k
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
220
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
Code Review Best Practice
trishagee
68
18k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Being A Developer After 40
akosma
90
590k
Six Lessons from altMBA
skipperchong
28
3.8k
What's in a price? How to price your products and services
michaelherold
245
12k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
Balancing Empowerment & Direction
lara
1
340
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
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!