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

フロントエンドチーム立ち上げで学んだTips / What I learned from organizing the new frontend team

indigolain
September 28, 2021

フロントエンドチーム立ち上げで学んだTips / What I learned from organizing the new frontend team

スタディサプリ/Quipper オンラインミートアップ #5 フロントエンドエンジニア の発表資料です。
https://quipper.connpass.com/event/223324/

indigolain

September 28, 2021
Tweet

More Decks by indigolain

Other Decks in Business

Transcript

  1. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 フロントエンドチーム立ち上げで学んだTips Takuya Uehara @indigolain スタディサプリ/Quipper オンラインミートアップ

    #5(フロントエンドエンジニア) 1
  2. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Who am I? • @indigolain /

    Takuya Uehara • Web エンジニア • 2019年11月にQuipperに入社 ◦ バックエンド / フロントエンド ◦ 現チームではwebフロントエンドをメインで担当 2
  3. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 今日の話したいこと / 話さないこと ➔ 話したいこと ◆

    リモート下でのチーム発足を成功させるためにチームで行なった行動 と、それから得られた学び ◆ チームの雰囲気 ➔ 話さないこと ◆ 細かい技術的な話 • 弊社カジュアル面談などで詳しく話せればと思います 3
  4. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Agenda | 01 02 03 フロントエンドチーム立ち上げの背景

    リモート下の立ち上げの不安とその対策 学んだこと / 課題 4
  5. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Agenda | 01 02 03 フロントエンドチーム立ち上げの背景

    リモート下の立ち上げの不安とその対策 学んだこと / 課題 5
  6. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 プロジェクト概要 ➔ 新規サービス開発プロジェクト ➔ Web 13人、iOS

    6人、Android 5人、Design 2人、QA 1人、PdM 1人 ➔ 長期プロジェクト ◆ 今回の立ち上げが行われる約1年前にプロジェクトスタート 6
  7. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 プロジェクト概要 ➔ フロントエンドはTS + Next.js +

    Apollo Client の構成 ➔ サービス間通信はGraphQL ➔ 今回立ち上げたチームは赤枠箇所を 担当 7
  8. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 プロジェクト概要 ➔ Atomic Design を参考にコンポーネントライブラリを作成 ➔

    実装したコンポーネント を対象に Visual Regression Test ➔ graphql-code-generator を利用して GraphQL schema から型を自動生成 8
  9. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 今回の話の背景 ➔ 背景: リリースに向けて開発中 ◆ 1つのチームを3チームに分割して開発を進めることに

    • フロントエンド周りを担当するチームが必要になった • 元々フロントエンドが得意なメンバーがチームに少なかった • 4人の外部のメンバーを迎え入れて新しくチームを発足する形に ➔ 事前に新メンバーと少し話はしているものの、期待と不安でドキドキ・・ 9
  10. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Agenda | 01 02 03 フロントエンドチーム立ち上げの背景

    リモート下の立ち上げの不安とその対策 学んだこと / 課題 10
  11. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 ➔ リモートワークということもあり、 気軽に話す機会を 作るのが難しくてコミュニケーションのハードルが高 くなるのではないか ➔

    1年少し進んでいるプロジェクトにいきなり入って ドメ インのキャッチアップ は大丈夫だろうか ➔ 色々な部署が関わっているプロジェクトで 誰に話を 聞けば良いかわからなくならないだろうか ドメイン知識の キャッチアップ が難しい コミュニケーション が取りづらい ➔ 段階的なリリースと、それに必要な機能のスケ ジュールを把握するのが難しいのではないか ➔ プロジェクトの全体像と、機能の立ち位置 を把握す るのが難しいのではないか 立ち上げに対する不安 プロジェクトの 進捗が見えづらい 11
  12. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 立ち上げに対する不安 ドメイン知識の キャッチアップ が難しい コミュニケーション が取りづらい

    プロジェクトの 進捗が見えづらい スクラム開発 ドラッカー風エクササイズ 常駐(可)部屋 Working Out Loud Working Out Loud 常駐(可)部屋 12
  13. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 立ち上げに対する不安 ドメイン知識の キャッチアップ が難しい コミュニケーション が取りづらい

    プロジェクトの 進捗が見えづらい スクラム開発 常駐(可)部屋 Working Out Loud Working Out Loud 常駐(可)部屋 13 ドラッカー風エクササイズ
  14. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 スクラム開発 ➔ 2週間1スプリントとして開発 ➔ スケジュールの不確実性をなくすために ◆

    ユーザに価値を届ける機能の単位: Product Backlog Item (PBI) ◆ PBI 単位で工数見積もりを行い、スプリントでの進捗を見てスケジュール感 の把握と必要であれば調整を行う 14
  15. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Product Backlog Item (PBI) map ➔

    付箋一つ一つがPBI ➔ PBI の依存関係を可視化 15
  16. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 立ち上げに対する不安 ドメイン知識の キャッチアップ が難しい コミュニケーション が取りづらい

    プロジェクトの 進捗が見えづらい スクラム開発 常駐(可)部屋 Working Out Loud Working Out Loud 常駐(可)部屋 16 ドラッカー風エクササイズ
  17. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 17

  18. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 1. 自分は何が好き・得意なのか 2. 自分はどうやってチームに貢献したいのか 18

  19. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 3. 〜に期待したいこと 19

  20. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 ドラッカー風エクササイズ ➔ この内容を元にメンバーそれぞれが1 on 1 を行い、期待値を合わせていった

    ◆ 認証関連はこの人に任せたいよね ◆ CSSに詳しそうなので相談させてくださいね ◆ 既存の仕様は自分を聞いてくださいね ➔ コミュニケーションのハードルを下げることが できた ➔ こちらの取り組みについて取り扱った Blog ◆ https://quipper.hatenablog.com/entry/2019/03/0 5/exchange-our-expectation 20 振り返りでも良かった点と して挙げられている✨
  21. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 立ち上げに対する不安 ドメイン知識の キャッチアップ が難しい コミュニケーション が取りづらい

    プロジェクトの 進捗が見えづらい スクラム開発 常駐(可)部屋 Working Out Loud Working Out Loud 常駐(可)部屋 21 ドラッカー風エクササイズ
  22. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 常駐(可)部屋 ➔ 常駐(可)部屋としてURLが固定さ れたweb会議部屋がある ➔ 参加

    Must ではない ◆ 朝会の流れで人がいることが 多い ➔ 仕様の確認や技術的な相談が気 軽にできるようになっている ◆ モブプロや改善活動に発展 常駐(可)部屋での質問順番待ちには Slack huddle も使っていくという提案も 💪 22 振り返りでも良かった点と して挙げられている✨
  23. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 立ち上げに対する不安 ドメイン知識の キャッチアップ が難しい コミュニケーション が取りづらい

    プロジェクトの 進捗が見えづらい スクラム開発 Working Out Loud 常駐(可)部屋 常駐(可)部屋 Working Out Loud 23 ドラッカー風エクササイズ
  24. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Working Out Loud ➔ Slack で作業毎にスレッドを立てて実況

    ◆ 作業の可視化 ◆ コラボレーション ◆ 思考の整理 ➔ チーム内で77+スレッド🎉 ➔ こちらの取り組みについて取り扱った Blog ◆ https://quipper.hatenablog.com/entry/2018/11/ 14/working-out-loud 24 振り返りでも良かった点と して挙げられている✨
  25. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 後で参照できるようにアウトプット 🗣 考えの整理 / トラブルシューティング 🧠

    作業の可視化👁 25
  26. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 26 モブプロ&改善活動

  27. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 27 コンポーネントのディレクトリ構造について ➔ ナビゲーションコンポーネントをモブプロで実装していた ◆ next-router

    への依存を持たせるべきかという話に ◆ Storybook で描画する際などに依存を Mock する必要が
  28. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 28 コンポーネントのディレクトリ構造について ➔ Presentation Domain Separation

    を採用 ➔ Issue で具体的な実装方針、決 定の背景を残す
  29. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 29 CSSリセット と 差分検知 ➔ モブプロでアプリケーションの基盤を開発中

    CSSリセットを適用し忘れていた ことが判明 ➔ そのまま適用すると今まで実装していたコンポーネント全体に影響が ➔ storycap を利用して対応が必要な箇所を差分検知 CSSリセット適用後 CSSリセット適用前 差分検知 storycap
  30. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 30 CSSリセット と 差分検知 ➔ 調査の結果そこまで影響のある

    ものが見つからず ➔ 対応するべきコンポーネントの 調査の工数が短縮
  31. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 31 アイコンコンポーネントを自動生成 ➔ アイコンコンポーネントを作ることに ➔ Figma上に70+のアイコンコンポーネントの定義が

    ➔ 全てのアイコンをコンポーネントすると時間がかかる・・・
  32. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 32 生成スクリプト API からSVGの データを取得 TypeScript

    AST を利用しつつ コンポーネントコードを自動生成
  33. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Agenda | 01 02 03 フロントエンドチーム立ち上げの背景

    リモート下の立ち上げの不安とその対策 学んだこと / 課題 33
  34. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 学んだこと ➔ お互いの期待値を合わせると、コミュニケーションに対する心理的なハード ルが下がる 🤝 ➔

    リモートであるからこそ、習慣的に Problem を話し合う場を設けることが大 事🗣 ➔ オンラインでのコミュニケーションは、参加へのハードルを下げるために双方 向で行えることが大切🔃 ➔ リモート下でもチームの立ち上げはできる🚀 34
  35. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 課題 ➔ GraphQL関連 ◆ エラーハンドリング ◆

    persisted-queryの活用 ➔ Visual Regression Test (VRT) 関連 ◆ アニメーション等が絡むコンポーネントのVRT ➔ デザイナーが Mobile と Web 両方のデザインを担当しているためデザイン FIXと実装着手のタイミングがズレる 35
  36. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Quipper では人々の学びを支える 仲間を絶賛募集中です!!! 36

  37. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 ご清聴ありがとうございました 37