Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドチーム立ち上げで学んだTips / What I learned from or...
Search
indigolain
September 28, 2021
Business
0
740
フロントエンドチーム立ち上げで学んだTips / What I learned from organizing the new frontend team
スタディサプリ/Quipper オンラインミートアップ #5 フロントエンドエンジニア の発表資料です。
https://quipper.connpass.com/event/223324/
indigolain
September 28, 2021
Tweet
Share
More Decks by indigolain
See All by indigolain
スタディサプリにおける TypeScript 活用事例と今後の展望 / jsconf-jp-2021
indigolain
3
4k
Persisted-queryをやってみた
indigolain
1
1.1k
TEC DEPT 201610 Catal Engineer5期生募集
indigolain
0
450
なるほどUNIXプロセス14_15章
indigolain
0
120
なるほどUNIXプロセス10~11章
indigolain
0
110
なるほどUNIXプロセス4~5章
indigolain
0
150
Other Decks in Business
See All in Business
G.U.Group 会社紹介資料
gugroup
0
210
merpay-overview_en
mercari_inc
1
17k
エンジニアの「センス」とは何か / What is the sense of engineers
hiro_y
19
8.3k
バイセルのものさし(Ver. 1.1)
buyselltechnologies
0
150
タスクブレイクダウンのすすめ / Recommendations for Task Breakdown
natty_natty254
1
280
DeFimans 会社紹介資料 Company Deck
defimans
0
140
【metimo】「『似合う』を楽しもう。」
hinalin
0
430
会社案内資料
mkengineering
1
140
El Mercado cuartohorario de electricidad
neuroenergia
PRO
0
220
インキュデータ会社紹介資料
okitsu
3
32k
Theoria technologies:About Us
theoriatec2024
1
1.6k
Recruiting Deck_株式会社HACHI
hachi_hiring
1
450
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
KATA
mclloyd
29
14k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
42
2.2k
A Philosophy of Restraint
colly
203
16k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
How GitHub (no longer) Works
holman
310
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
360
Fireside Chat
paigeccino
33
3k
Documentation Writing (for coders)
carmenintech
65
4.4k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Gamification - CAS2011
davidbonilla
80
5k
Measuring & Analyzing Core Web Vitals
bluesmoon
3
76
Transcript
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 フロントエンドチーム立ち上げで学んだTips Takuya Uehara @indigolain スタディサプリ/Quipper オンラインミートアップ
#5(フロントエンドエンジニア) 1
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Who am I? • @indigolain /
Takuya Uehara • Web エンジニア • 2019年11月にQuipperに入社 ◦ バックエンド / フロントエンド ◦ 現チームではwebフロントエンドをメインで担当 2
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 今日の話したいこと / 話さないこと ➔ 話したいこと ◆
リモート下でのチーム発足を成功させるためにチームで行なった行動 と、それから得られた学び ◆ チームの雰囲気 ➔ 話さないこと ◆ 細かい技術的な話 • 弊社カジュアル面談などで詳しく話せればと思います 3
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Agenda | 01 02 03 フロントエンドチーム立ち上げの背景
リモート下の立ち上げの不安とその対策 学んだこと / 課題 4
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Agenda | 01 02 03 フロントエンドチーム立ち上げの背景
リモート下の立ち上げの不安とその対策 学んだこと / 課題 5
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 プロジェクト概要 ➔ 新規サービス開発プロジェクト ➔ Web 13人、iOS
6人、Android 5人、Design 2人、QA 1人、PdM 1人 ➔ 長期プロジェクト ◆ 今回の立ち上げが行われる約1年前にプロジェクトスタート 6
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 プロジェクト概要 ➔ フロントエンドはTS + Next.js +
Apollo Client の構成 ➔ サービス間通信はGraphQL ➔ 今回立ち上げたチームは赤枠箇所を 担当 7
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 プロジェクト概要 ➔ Atomic Design を参考にコンポーネントライブラリを作成 ➔
実装したコンポーネント を対象に Visual Regression Test ➔ graphql-code-generator を利用して GraphQL schema から型を自動生成 8
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 今回の話の背景 ➔ 背景: リリースに向けて開発中 ◆ 1つのチームを3チームに分割して開発を進めることに
• フロントエンド周りを担当するチームが必要になった • 元々フロントエンドが得意なメンバーがチームに少なかった • 4人の外部のメンバーを迎え入れて新しくチームを発足する形に ➔ 事前に新メンバーと少し話はしているものの、期待と不安でドキドキ・・ 9
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Agenda | 01 02 03 フロントエンドチーム立ち上げの背景
リモート下の立ち上げの不安とその対策 学んだこと / 課題 10
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 ➔ リモートワークということもあり、 気軽に話す機会を 作るのが難しくてコミュニケーションのハードルが高 くなるのではないか ➔
1年少し進んでいるプロジェクトにいきなり入って ドメ インのキャッチアップ は大丈夫だろうか ➔ 色々な部署が関わっているプロジェクトで 誰に話を 聞けば良いかわからなくならないだろうか ドメイン知識の キャッチアップ が難しい コミュニケーション が取りづらい ➔ 段階的なリリースと、それに必要な機能のスケ ジュールを把握するのが難しいのではないか ➔ プロジェクトの全体像と、機能の立ち位置 を把握す るのが難しいのではないか 立ち上げに対する不安 プロジェクトの 進捗が見えづらい 11
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 立ち上げに対する不安 ドメイン知識の キャッチアップ が難しい コミュニケーション が取りづらい
プロジェクトの 進捗が見えづらい スクラム開発 ドラッカー風エクササイズ 常駐(可)部屋 Working Out Loud Working Out Loud 常駐(可)部屋 12
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 立ち上げに対する不安 ドメイン知識の キャッチアップ が難しい コミュニケーション が取りづらい
プロジェクトの 進捗が見えづらい スクラム開発 常駐(可)部屋 Working Out Loud Working Out Loud 常駐(可)部屋 13 ドラッカー風エクササイズ
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 スクラム開発 ➔ 2週間1スプリントとして開発 ➔ スケジュールの不確実性をなくすために ◆
ユーザに価値を届ける機能の単位: Product Backlog Item (PBI) ◆ PBI 単位で工数見積もりを行い、スプリントでの進捗を見てスケジュール感 の把握と必要であれば調整を行う 14
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Product Backlog Item (PBI) map ➔
付箋一つ一つがPBI ➔ PBI の依存関係を可視化 15
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 立ち上げに対する不安 ドメイン知識の キャッチアップ が難しい コミュニケーション が取りづらい
プロジェクトの 進捗が見えづらい スクラム開発 常駐(可)部屋 Working Out Loud Working Out Loud 常駐(可)部屋 16 ドラッカー風エクササイズ
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 17
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 1. 自分は何が好き・得意なのか 2. 自分はどうやってチームに貢献したいのか 18
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 3. 〜に期待したいこと 19
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 ドラッカー風エクササイズ ➔ この内容を元にメンバーそれぞれが1 on 1 を行い、期待値を合わせていった
◆ 認証関連はこの人に任せたいよね ◆ CSSに詳しそうなので相談させてくださいね ◆ 既存の仕様は自分を聞いてくださいね ➔ コミュニケーションのハードルを下げることが できた ➔ こちらの取り組みについて取り扱った Blog ◆ https://quipper.hatenablog.com/entry/2019/03/0 5/exchange-our-expectation 20 振り返りでも良かった点と して挙げられている✨
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 立ち上げに対する不安 ドメイン知識の キャッチアップ が難しい コミュニケーション が取りづらい
プロジェクトの 進捗が見えづらい スクラム開発 常駐(可)部屋 Working Out Loud Working Out Loud 常駐(可)部屋 21 ドラッカー風エクササイズ
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 常駐(可)部屋 ➔ 常駐(可)部屋としてURLが固定さ れたweb会議部屋がある ➔ 参加
Must ではない ◆ 朝会の流れで人がいることが 多い ➔ 仕様の確認や技術的な相談が気 軽にできるようになっている ◆ モブプロや改善活動に発展 常駐(可)部屋での質問順番待ちには Slack huddle も使っていくという提案も 💪 22 振り返りでも良かった点と して挙げられている✨
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 立ち上げに対する不安 ドメイン知識の キャッチアップ が難しい コミュニケーション が取りづらい
プロジェクトの 進捗が見えづらい スクラム開発 Working Out Loud 常駐(可)部屋 常駐(可)部屋 Working Out Loud 23 ドラッカー風エクササイズ
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Working Out Loud ➔ Slack で作業毎にスレッドを立てて実況
◆ 作業の可視化 ◆ コラボレーション ◆ 思考の整理 ➔ チーム内で77+スレッド🎉 ➔ こちらの取り組みについて取り扱った Blog ◆ https://quipper.hatenablog.com/entry/2018/11/ 14/working-out-loud 24 振り返りでも良かった点と して挙げられている✨
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 後で参照できるようにアウトプット 🗣 考えの整理 / トラブルシューティング 🧠
作業の可視化👁 25
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 26 モブプロ&改善活動
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 27 コンポーネントのディレクトリ構造について ➔ ナビゲーションコンポーネントをモブプロで実装していた ◆ next-router
への依存を持たせるべきかという話に ◆ Storybook で描画する際などに依存を Mock する必要が
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 28 コンポーネントのディレクトリ構造について ➔ Presentation Domain Separation
を採用 ➔ Issue で具体的な実装方針、決 定の背景を残す
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 29 CSSリセット と 差分検知 ➔ モブプロでアプリケーションの基盤を開発中
CSSリセットを適用し忘れていた ことが判明 ➔ そのまま適用すると今まで実装していたコンポーネント全体に影響が ➔ storycap を利用して対応が必要な箇所を差分検知 CSSリセット適用後 CSSリセット適用前 差分検知 storycap
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 30 CSSリセット と 差分検知 ➔ 調査の結果そこまで影響のある
ものが見つからず ➔ 対応するべきコンポーネントの 調査の工数が短縮
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 31 アイコンコンポーネントを自動生成 ➔ アイコンコンポーネントを作ることに ➔ Figma上に70+のアイコンコンポーネントの定義が
➔ 全てのアイコンをコンポーネントすると時間がかかる・・・
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 32 生成スクリプト API からSVGの データを取得 TypeScript
AST を利用しつつ コンポーネントコードを自動生成
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Agenda | 01 02 03 フロントエンドチーム立ち上げの背景
リモート下の立ち上げの不安とその対策 学んだこと / 課題 33
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 学んだこと ➔ お互いの期待値を合わせると、コミュニケーションに対する心理的なハード ルが下がる 🤝 ➔
リモートであるからこそ、習慣的に Problem を話し合う場を設けることが大 事🗣 ➔ オンラインでのコミュニケーションは、参加へのハードルを下げるために双方 向で行えることが大切🔃 ➔ リモート下でもチームの立ち上げはできる🚀 34
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 課題 ➔ GraphQL関連 ◆ エラーハンドリング ◆
persisted-queryの活用 ➔ Visual Regression Test (VRT) 関連 ◆ アニメーション等が絡むコンポーネントのVRT ➔ デザイナーが Mobile と Web 両方のデザインを担当しているためデザイン FIXと実装着手のタイミングがズレる 35
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 Quipper では人々の学びを支える 仲間を絶賛募集中です!!! 36
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5 ご清聴ありがとうございました 37