Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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. 外村 和仁 @hokaccha • 技術部 / テックリード • 福岡在住、カープファン •

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

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

    13:00-15:00 󰳕 基本課題 • 15:00-15:30 󰞹 基本課題解説 • 15:30-18:00 󰠁 応用課題、基本課題の続き
  4. 全体スケジュール • 1日目: Webアプリを実装 ← 今日 • 2日目: iOSアプリを実装 •

    3日目: APIを実装 • 4日目: インフラ・デプロイ • 5日目: サービス開発(課題とは関係なし)
  5. REST vs GraphQL • GitHub が REST と GraphQL の両方の

    API を公開している ので比較してみる • 特定の Issue のタイトル、概要、コメントを取得したい
  6. REST と GraphQL • 必要なフィールドだけ指定できればいくつかの問題は解決する ◦ /org/repo/issues/43?fields=title,description,comments • 実はこれが GraphQL

    の前身である Graph API の原型 ◦ https://developers.facebook.com/docs/graph-api • これをもっといい感じに使えるようにしたのが GraphQL
  7. TypeScriptとGraphQL • typescript-codegen や Apollo CLI で TypeScript の型を自 動生成できる

    • リクエスト/レスポンスに型をつけられるため堅牢かつ快適 に開発できる
  8. その他の機能 • Custom Scalar Type • Enum Type • Union

    Type • Interface • Fragments • Directive