Cookpad Summer Internship 2021 Web Frontend

Slide 1

Slide 1 text

Slide 2

Slide 2 text

講師・TA

Slide 3

Slide 3 text

外村和仁 @hokaccha ● 技術部 / テックリード ● 福岡在住、カープファン ● 好き: TypeScript, React, Ruby, Rails ● 個人ワーク: Adventar, nodebrew

Slide 4

Slide 4 text

萩原馨 @kaorun343 ● 技術部 ● テレビ（特にNHK）をよく観ています ● 好き: TypeScript, Vue, React, Rust ● 個人ワーク: vue-property-decorator

Slide 5

Slide 5 text

森川慎太郎 @morishin ● 略歴 ○ 2015年に新卒入社してずっとユーザー投稿領域でクックパッド iOS やったりお料理アルバム・みんなのお弁当・ Cookin’・クックパッドMYキッチンなどの iOS、 Rails、React Native 開発などをやっていた ○ 2019-2020年 iOS 大規模リニューアルのサーバーサイドと iOS の開発 ○ 現在はウェブフロントエンドが中心 (cookpad.com の開発) ○ レシピ事業サービス基盤部というところでテックリード ● 0歳児ひとりと猫2匹 ● 趣味は個人開発、ビール、コーヒー ● 好きな川は鴨川 (一級河川)

Slide 6

Slide 6 text

タイムテーブル

Slide 7

Slide 7 text

タイムテーブル ● 11:00-12:00 󰞹 課題発表、講義（これ） ● 12:00-13:00 🍔 ランチ ● 13:00-15:00 󰳕 基本課題 ● 15:00-15:30 󰞹 基本課題解説 ● 15:30-18:00 󰠁 応用課題、基本課題の続き

Slide 8

Slide 8 text

課題発表〜👏

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

全体スケジュール ● 1日目: Webアプリを実装 ← 今日 ● 2日目: iOSアプリを実装 ● 3日目: APIを実装 ● 4日目: インフラ・デプロイ ● 5日目: サービス開発（課題とは関係なし）

Slide 12

Slide 12 text

API ● GraphQL の API が用意してある ● 3日目の講義でこのAPIを実装する ● 1日目、2日目は完成品を呼ぶ

Slide 13

Slide 13 text

Webアプリの技術スタック ● TypeScript ● Next.js ● GraphQL

Slide 14

Slide 14 text

GraphQLの概要

Slide 15

Slide 15 text

GraphQLとは ● Web API のクエリ言語とランタイム ● REST や gRPC などと同じレイヤー ● 柔軟にクエリできる点や型システムが特徴

Slide 16

Slide 16 text

REST vs GraphQL

Slide 17

Slide 17 text

Request Response

Slide 18

Slide 18 text

Request Response

Slide 19

Slide 19 text

REST vs GraphQL ● GitHub が REST と GraphQL の両方の API を公開しているので比較してみる ● 特定の Issue のタイトル、概要、コメントを取得したい

Slide 20

Slide 20 text

REST

Slide 21

Slide 21 text

REST

Slide 22

Slide 22 text

REST ● issue と comment のAPIを2回叩く必要がある ● 使わないフィールドも返ってくる ● 何が返ってくるかリクエストだけ見てもわからない

Slide 23

Slide 23 text

GraphQL

Slide 24

Slide 24 text

REST と GraphQL ● 必要なフィールドだけ指定できればいくつかの問題は解決する ○ /org/repo/issues/43?ﬁelds=title,description,comments ● 実はこれが GraphQL の前身である Graph API の原型 ○ https://developers.facebook.com/docs/graph-api ● これをもっといい感じに使えるようにしたのが GraphQL

Slide 25

Slide 25 text

GraphQLの利点 ● 取得するフィールドを明示的に指定できる ● 複数のデータを1リクエストで取得できる ● 強固な型システム

Slide 26

Slide 26 text

JavaScriptとGraphQL ● 公式のリファレンス実装がJavaScript ○ https://github.com/graphql/graphql-js ○ サーバー/クライアント両方の実装がある ● Apollo を筆頭に公式以外のエコシステムも豊富 ○ https://www.apollographql.com/

Slide 27

Slide 27 text

TypeScriptとGraphQL ● typescript-codegen や Apollo CLI で TypeScript の型を自動生成できる ● リクエスト/レスポンスに型をつけられるため堅牢かつ快適に開発できる

Slide 28

Slide 28 text

GraphQLの基本機能

Slide 29

Slide 29 text

実践 GraphQL ● Schema ● Query ● Mutation ● Error

Slide 30

Slide 30 text

Schema ● GraphQLの型定義ファイル ● GraphQL のサーバーはスキーマを元にリクエストのクエリとレスポンスbodyの値を検証する ● クライアントの自動生成などにも利用できる

Slide 31

Slide 31 text

Schema

Slide 32

Slide 32 text

Basic Types スカラー型リスト Non Null Nullable

Slide 33

Slide 33 text

Object Type オブジェクト型

Slide 34

Slide 34 text

Root Type ルート型トップレベルクエリ

Slide 35

Slide 35 text

Query ● クライアントがほしいデータを記述してサーバーにリクエストする ● スキーマとはまた別の独自シンタックス

Slide 36

Slide 36 text

Query

Slide 37

Slide 37 text

Query クエリ名（オプショナル）トップレベルクエリ取得するフィールドを列挙ネストしたフィールド

Slide 38

Slide 38 text

Multiple Query 複数のクエリを指定できる

Slide 39

Slide 39 text

Field alias フィールドに別名をつけて複数指定できる

Slide 40

Slide 40 text

Variables クエリの外から変数を受け取る

Slide 41

Slide 41 text

Variables ここで変数を渡す

Slide 42

Slide 42 text

Mutation ● RESTでいう POST/PUT/DELETE にあたるもの ● スキーマやクエリの書き方は GET 系のクエリと同様 ● 特性が全然違うので分けて考える必要がある

Slide 43

Slide 43 text

Mutation Schema

Slide 44

Slide 44 text

Mutation Schema ルート型

Slide 45

Slide 45 text

Input Type Input 型

Slide 46

Slide 46 text

Mutation Query

Slide 47

Slide 47 text

その他の機能 ● Custom Scalar Type ● Enum Type ● Union Type ● Interface ● Fragments ● Directive