$30 off During Our Annual Pro Sale. View Details »

Cookpad Summer Internship 2021 Web Frontend

Cookpad Summer Internship 2021 Web Frontend

Kazuhito Hokamura

August 26, 2021
Tweet

More Decks by Kazuhito Hokamura

Other Decks in Technology

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