Cookpad Summer Internship 2021 Web Frontend

Transcript

1. Cookpad Summer Internship 2021
   Web Frontend
   

   View Slide

2. 講師・TA
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. タイムテーブル
   

   View Slide

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

   View Slide

8. 課題発表〜👏
   

   View Slide

9. View Slide

10. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. GraphQLの概要
    

    View Slide

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

    View Slide

16. REST vs GraphQL
    

    View Slide

17. Request Response
    

    View Slide

18. Request Response
    

    View Slide

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

    View Slide

20. REST
    

    View Slide

21. REST
    

    View Slide

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

    View Slide

23. GraphQL
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. GraphQLの基本機能
    

    View Slide

29. 実践 GraphQL
    ● Schema
    ● Query
    ● Mutation
    ● Error
    

    View Slide

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

    View Slide

31. Schema
    

    View Slide

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

    View Slide

33. Object Type
    オブジェクト型
    

    View Slide

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

    View Slide

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

    View Slide

36. Query
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. Variables
    ここで変数を渡す
    

    View Slide

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

    View Slide

43. Mutation Schema
    

    View Slide

44. Mutation Schema
    ルート型
    

    View Slide

45. Input Type
    Input 型
    

    View Slide

46. Mutation Query
    

    View Slide

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

    View Slide

48. ドキュメントの読み合わせ
    

    View Slide

49. Happy Hacking!
    

    View Slide