Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cookpad Summer Internship 2021 Web Frontend

Cookpad Summer Internship 2021 Web Frontend

18b12f8f7910445b2637f0f21f59d467?s=128

Kazuhito Hokamura

August 26, 2021
Tweet

Transcript

  1. Cookpad Summer Internship 2021 Web Frontend

  2. 講師・TA

  3. 外村 和仁 @hokaccha • 技術部 / テックリード • 福岡在住、カープファン •

    好き: TypeScript, React, Ruby, Rails • 個人ワーク: Adventar, nodebrew
  4. 萩原 馨 @kaorun343 • 技術部 • テレビ(特にNHK)をよく観ています • 好き: TypeScript,

    Vue, React, Rust • 個人ワーク: vue-property-decorator
  5. 森川 慎太郎 @morishin • 略歴 ◦ 2015年に新卒入社してずっとユーザー投稿領域でクックパッド iOS やったりお料理アルバム・みんなのお弁当・ Cookin’・クック

    パッドMYキッチンなどの iOS、 Rails、React Native 開発などを やっていた ◦ 2019-2020年 iOS 大規模リニューアルのサーバーサイドと iOS の 開発 ◦ 現在はウェブフロントエンドが中心 (cookpad.com の開発) ◦ レシピ事業サービス基盤部というところでテックリード • 0歳児ひとりと猫2匹 • 趣味は個人開発、ビール、コーヒー • 好きな川は鴨川 (一級河川)
  6. タイムテーブル

  7. タイムテーブル • 11:00-12:00 󰞹 課題発表、講義(これ) • 12:00-13:00 🍔 ランチ •

    13:00-15:00 󰳕 基本課題 • 15:00-15:30 󰞹 基本課題解説 • 15:30-18:00 󰠁 応用課題、基本課題の続き
  8. 課題発表〜👏

  9. None
  10. None
  11. 全体スケジュール • 1日目: Webアプリを実装 ← 今日 • 2日目: iOSアプリを実装 •

    3日目: APIを実装 • 4日目: インフラ・デプロイ • 5日目: サービス開発(課題とは関係なし)
  12. API • GraphQL の API が用意してある • 3日目の講義でこのAPIを実装する • 1日目、2日目は完成品を呼ぶ

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

  14. GraphQLの概要

  15. GraphQLとは • Web API のクエリ言語とランタイム • REST や gRPC などと同じレイヤー

    • 柔軟にクエリできる点や型システムが特徴
  16. REST vs GraphQL

  17. Request Response

  18. Request Response

  19. REST vs GraphQL • GitHub が REST と GraphQL の両方の

    API を公開している ので比較してみる • 特定の Issue のタイトル、概要、コメントを取得したい
  20. REST

  21. REST

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

  23. GraphQL

  24. REST と GraphQL • 必要なフィールドだけ指定できればいくつかの問題は解決する ◦ /org/repo/issues/43?fields=title,description,comments • 実はこれが GraphQL

    の前身である Graph API の原型 ◦ https://developers.facebook.com/docs/graph-api • これをもっといい感じに使えるようにしたのが GraphQL
  25. GraphQLの利点 • 取得するフィールドを明示的に指定できる • 複数のデータを1リクエストで取得できる • 強固な型システム

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

    ◦ https://www.apollographql.com/
  27. TypeScriptとGraphQL • typescript-codegen や Apollo CLI で TypeScript の型を自 動生成できる

    • リクエスト/レスポンスに型をつけられるため堅牢かつ快適 に開発できる
  28. GraphQLの基本機能

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

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

  31. Schema

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

  33. Object Type オブジェクト型

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

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

  36. Query

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

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

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

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

  41. Variables ここで変数を渡す

  42. Mutation • RESTでいう POST/PUT/DELETE にあたるもの • スキーマやクエリの書き方は GET 系のクエリと同様 •

    特性が全然違うので分けて考える必要がある
  43. Mutation Schema

  44. Mutation Schema ルート型

  45. Input Type Input 型

  46. Mutation Query

  47. その他の機能 • Custom Scalar Type • Enum Type • Union

    Type • Interface • Fragments • Directive
  48. ドキュメントの読み合わせ

  49. Happy Hacking!