Cookpad Summer Internship 2021Web Frontend
View Slide
講師・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 応用課題、基本課題の続き
課題発表〜👏
全体スケジュール● 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
REST vs GraphQL● GitHub が REST と GraphQL の両方の API を公開しているので比較してみる● 特定の Issue のタイトル、概要、コメントを取得したい
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 NullNullable
Object Typeオブジェクト型
Root Typeルート型トップレベルクエリ
Query● クライアントがほしいデータを記述してサーバーにリクエストする● スキーマとはまた別の独自シンタックス
Query
Queryクエリ名(オプショナル)トップレベルクエリ取得するフィールドを列挙ネストしたフィールド
Multiple Query複数のクエリを指定できる
Field aliasフィールドに別名をつけて複数指定できる
Variablesクエリの外から変数を受け取る
Variablesここで変数を渡す
Mutation● RESTでいう POST/PUT/DELETE にあたるもの● スキーマやクエリの書き方は GET 系のクエリと同様● 特性が全然違うので分けて考える必要がある
Mutation Schema
Mutation Schemaルート型
Input TypeInput 型
Mutation Query
その他の機能● Custom Scalar Type● Enum Type● Union Type● Interface● Fragments● Directive
ドキュメントの読み合わせ
Happy Hacking!