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
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
3.5k
Kotlin製のGraphQLサーバーをNode.jsでモジュラモノリス化している話
hokaccha
0
3k
GraphQLの負債と向き合うためにやっていること
hokaccha
2
1.2k
ユビーのアーキテクチャに対する取り組み
hokaccha
1
330
RailsエンジニアのためのNext.js入門
hokaccha
7
18k
巨大なモノリシック Rails アプリケーションの マイクロサービス化戦略 / 2019 microservices in cookpad
hokaccha
3
3.6k
巨大なRailsアプリケーションを「普通」にするための取り組み
hokaccha
1
860
Web Frontend Improvement in Cookpad
hokaccha
1
950
cookpad summer internship 2018 - Git
hokaccha
1
9.5k
Other Decks in Technology
See All in Technology
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
960
AIアシスタントの活用で品質の向上と開発ワークフローのスピードアップ
nagix
1
210
目標設定は好きですか? アジャイルとともに目標と向き合い続ける方法 / Do you like target Management?
kakehashi
10
3k
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
390
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Debugging Ruby Performance
tmm1
71
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
How to Think Like a Performance Engineer
csswizardry
4
590
The World Runs on Bad Software
bkeepers
PRO
63
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Web Components: a chance to create the future
zenorocha
307
41k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Typedesign – Prime Four
hannesfritz
37
2.2k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
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!