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

フロントエンドチーム立ち上げで学んだTips / What I learned from or...

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 Who am I? • @indigolain /

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

    リモート下でのチーム発足を成功させるためにチームで行なった行動 と、それから得られた学び ◆ チームの雰囲気 ➔ 話さないこと ◆ 細かい技術的な話 • 弊社カジュアル面談などで詳しく話せればと思います 3
  3. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 プロジェクト概要 ➔ 新規サービス開発プロジェクト ➔ Web 13人、iOS

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

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

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

    • フロントエンド周りを担当するチームが必要になった • 元々フロントエンドが得意なメンバーがチームに少なかった • 4人の外部のメンバーを迎え入れて新しくチームを発足する形に ➔ 事前に新メンバーと少し話はしているものの、期待と不安でドキドキ・・ 9
  7. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 ➔ リモートワークということもあり、 気軽に話す機会を 作るのが難しくてコミュニケーションのハードルが高 くなるのではないか ➔

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

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

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

    ユーザに価値を届ける機能の単位: Product Backlog Item (PBI) ◆ PBI 単位で工数見積もりを行い、スプリントでの進捗を見てスケジュール感 の把握と必要であれば調整を行う 14
  11. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 立ち上げに対する不安 ドメイン知識の キャッチアップ が難しい コミュニケーション が取りづらい

    プロジェクトの 進捗が見えづらい スクラム開発 常駐(可)部屋 Working Out Loud Working Out Loud 常駐(可)部屋 16 ドラッカー風エクササイズ
  12. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 ドラッカー風エクササイズ ➔ この内容を元にメンバーそれぞれが1 on 1 を行い、期待値を合わせていった

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

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

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

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

    ◆ 作業の可視化 ◆ コラボレーション ◆ 思考の整理 ➔ チーム内で77+スレッド🎉 ➔ こちらの取り組みについて取り扱った Blog ◆ https://quipper.hatenablog.com/entry/2018/11/ 14/working-out-loud 24 振り返りでも良かった点と して挙げられている✨
  17. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 29 CSSリセット と 差分検知 ➔ モブプロでアプリケーションの基盤を開発中

    CSSリセットを適用し忘れていた ことが判明 ➔ そのまま適用すると今まで実装していたコンポーネント全体に影響が ➔ storycap を利用して対応が必要な箇所を差分検知 CSSリセット適用後 CSSリセット適用前 差分検知 storycap
  18. #sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 学んだこと ➔ お互いの期待値を合わせると、コミュニケーションに対する心理的なハード ルが下がる 🤝 ➔

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

    persisted-queryの活用 ➔ Visual Regression Test (VRT) 関連 ◆ アニメーション等が絡むコンポーネントのVRT ➔ デザイナーが Mobile と Web 両方のデザインを担当しているためデザイン FIXと実装着手のタイミングがズレる 35