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
120
なるほどUNIXプロセス4~5章
indigolain
0
150
Other Decks in Business
See All in Business
STRACT, Inc. Company Deck
stract
0
1.2k
【metimo】「『似合う』を楽しもう。」
hinalin
0
560
スタートアップのマネージャーに役立つ視座/A useful perspective for startup managers
dskst
6
1.2k
株式会社kubellストレージ 会社説明資料
kubell_storage
2
240
サーキュレーション会社説明資料
circulation
2
18k
20241027.jjug_ccc_creditsaison.pdf
lalha
4
2.5k
요즘 팀장 생존법 (SLIT-CON)
lemonadegt
0
190
“難しい”をもっと楽に簡単に♪ 届出ダンジョンからの脱出
tokyo_metropolitan_gov_digital_hr
0
290
BrainPad_AC_202411
brainpadpr
2
9.1k
AIを活用した住家被害認定支援ツールの開発
tokyo_metropolitan_gov_digital_hr
0
360
kintoneを活用した緊急通行車両確認手続の迅速化
tokyo_metropolitan_gov_digital_hr
0
390
kubell COMPASS Ver 1.0.0
kubell_hr
0
3.5k
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
GitHub's CSS Performance
jonrohan
1030
460k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
4 Signs Your Business is Dying
shpigford
180
21k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
We Have a Design System, Now What?
morganepeng
50
7.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Raft: Consensus for Rubyists
vanstee
136
6.6k
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