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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Who am I? ● @indigolain / Takuya Uehara ● Web エンジニア ● 2019年11月にQuipperに入社 ○ バックエンド / フロントエンド ○ 現チームではwebフロントエンドをメインで担当 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 プロジェクト概要 ➔ 新規サービス開発プロジェクト ➔ Web 13人、iOS 6人、Android 5人、Design 2人、QA 1人、PdM 1人 ➔ 長期プロジェクト ◆ 今回の立ち上げが行われる約1年前にプロジェクトスタート 6

Slide 7

Slide 7 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 プロジェクト概要 ➔ フロントエンドはTS + Next.js + Apollo Client の構成 ➔ サービス間通信はGraphQL ➔ 今回立ち上げたチームは赤枠箇所を担当 7

Slide 8

Slide 8 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 プロジェクト概要 ➔ Atomic Design を参考にコンポーネントライブラリを作成 ➔ 実装したコンポーネントを対象に Visual Regression Test ➔ graphql-code-generator を利用して GraphQL schema から型を自動生成 8

Slide 9

Slide 9 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 今回の話の背景 ➔ 背景: リリースに向けて開発中 ◆ 1つのチームを3チームに分割して開発を進めることに ● フロントエンド周りを担当するチームが必要になった ● 元々フロントエンドが得意なメンバーがチームに少なかった ● 4人の外部のメンバーを迎え入れて新しくチームを発足する形に ➔ 事前に新メンバーと少し話はしているものの、期待と不安でドキドキ・・ 9

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 スクラム開発 ➔ 2週間1スプリントとして開発 ➔ スケジュールの不確実性をなくすために ◆ ユーザに価値を届ける機能の単位: Product Backlog Item (PBI) ◆ PBI 単位で工数見積もりを行い、スプリントでの進捗を見てスケジュール感の把握と必要であれば調整を行う 14

Slide 15

Slide 15 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Product Backlog Item (PBI) map ➔ 付箋一つ一つがPBI ➔ PBI の依存関係を可視化 15

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 17

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 ドラッカー風エクササイズ ➔ この内容を元にメンバーそれぞれが1 on 1 を行い、期待値を合わせていった ◆ 認証関連はこの人に任せたいよね ◆ CSSに詳しそうなので相談させてくださいね ◆ 既存の仕様は自分を聞いてくださいね ➔ コミュニケーションのハードルを下げることができた ➔ こちらの取り組みについて取り扱った Blog ◆ https://quipper.hatenablog.com/entry/2019/03/0 5/exchange-our-expectation 20 振り返りでも良かった点として挙げられている✨

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 常駐(可)部屋 ➔ 常駐(可)部屋としてURLが固定されたweb会議部屋がある ➔ 参加 Must ではない ◆ 朝会の流れで人がいることが多い ➔ 仕様の確認や技術的な相談が気軽にできるようになっている ◆ モブプロや改善活動に発展常駐(可)部屋での質問順番待ちには Slack huddle も使っていくという提案も 💪 22 振り返りでも良かった点として挙げられている✨

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Working Out Loud ➔ Slack で作業毎にスレッドを立てて実況 ◆ 作業の可視化 ◆ コラボレーション ◆ 思考の整理 ➔ チーム内で77+スレッド🎉 ➔ こちらの取り組みについて取り扱った Blog ◆ https://quipper.hatenablog.com/entry/2018/11/ 14/working-out-loud 24 振り返りでも良かった点として挙げられている✨

Slide 25

Slide 25 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 後で参照できるようにアウトプット 🗣 考えの整理 / トラブルシューティング 🧠 作業の可視化👁 25

Slide 26

Slide 26 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 26 モブプロ&改善活動

Slide 27

Slide 27 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 27 コンポーネントのディレクトリ構造について ➔ ナビゲーションコンポーネントをモブプロで実装していた ◆ next-router への依存を持たせるべきかという話に ◆ Storybook で描画する際などに依存を Mock する必要が

Slide 28

Slide 28 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 28 コンポーネントのディレクトリ構造について ➔ Presentation Domain Separation を採用 ➔ Issue で具体的な実装方針、決定の背景を残す

Slide 29

Slide 29 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 29 CSSリセットと差分検知 ➔ モブプロでアプリケーションの基盤を開発中 CSSリセットを適用し忘れていたことが判明 ➔ そのまま適用すると今まで実装していたコンポーネント全体に影響が ➔ storycap を利用して対応が必要な箇所を差分検知 CSSリセット適用後 CSSリセット適用前差分検知 storycap

Slide 30

Slide 30 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 30 CSSリセットと差分検知 ➔ 調査の結果そこまで影響のあるものが見つからず ➔ 対応するべきコンポーネントの調査の工数が短縮

Slide 31

Slide 31 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 31 アイコンコンポーネントを自動生成 ➔ アイコンコンポーネントを作ることに ➔ Figma上に70+のアイコンコンポーネントの定義が ➔ 全てのアイコンをコンポーネントすると時間がかかる・・・

Slide 32

Slide 32 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 32 生成スクリプト API からSVGのデータを取得 TypeScript AST を利用しつつコンポーネントコードを自動生成

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 学んだこと ➔ お互いの期待値を合わせると、コミュニケーションに対する心理的なハードルが下がる 🤝 ➔ リモートであるからこそ、習慣的に Problem を話し合う場を設けることが大事🗣 ➔ オンラインでのコミュニケーションは、参加へのハードルを下げるために双方向で行えることが大切🔃 ➔ リモート下でもチームの立ち上げはできる🚀 34

Slide 35

Slide 35 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 課題 ➔ GraphQL関連 ◆ エラーハンドリング ◆ persisted-queryの活用 ➔ Visual Regression Test (VRT) 関連 ◆ アニメーション等が絡むコンポーネントのVRT ➔ デザイナーが Mobile と Web 両方のデザインを担当しているためデザイン FIXと実装着手のタイミングがズレる 35

Slide 36

Slide 36 text

#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Quipper では人々の学びを支える仲間を絶賛募集中です!!! 36

Slide 37

Slide 37 text

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