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
770
フロントエンドチーム立ち上げで学んだ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
120
なるほどUNIXプロセス4~5章
indigolain
0
150
Other Decks in Business
See All in Business
ログラス会社紹介資料 / Loglass Company Deck
loglass2019
7
250k
ビジネスデザインメソッド「匠Method」を深く理解する/Gain a deeper understanding of the business design method "Takumi Method"
takumi_method_ug
0
110
産業用自家消費型太陽光80kW 投資対効果(ROI)・投資回収期間シミュレーション結果(エネがえるBiz診断レポートサンプル)
satoru_higuchi
PRO
1
430
Creating Creators in the age of Generative AI - In SIGGRAPH ASIA 2024
o_ob
0
140
GA technologies Co.,Ltd. Corporate Story
gatechnologies
2
940
DNX Ventures Japan|Introduction Deck
natsumidnx
0
810
株式会社ispec 会社紹介資料
emikamihara
0
5.9k
いま、データに必要な解像度
hik0107
36
13k
会社紹介資料 / ProfileBook
gpol
4
26k
Cobe Associe: Who we are? /コンサル・市場調査・人材紹介のCobe Associe
nozomi
6
18k
(7枚)具体と抽象の往復運動ができる上司と部下との4つの組合せ
nyattx
PRO
3
1.3k
pmconf2024 意思決定の質とスピードを上げるドキュメントの極意
issei123
3
7.1k
Featured
See All Featured
Music & Morning Musume
bryan
46
6.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
Code Reviewing Like a Champion
maltzj
521
39k
Practical Orchestrator
shlominoach
186
10k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Why Our Code Smells
bkeepers
PRO
335
57k
Side Projects
sachag
452
42k
Statistics for Hackers
jakevdp
796
220k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Building Applications with DynamoDB
mza
92
6.1k
Designing for humans not robots
tammielis
250
25k
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