スタディサプリ/Quipper オンラインミートアップ #5 フロントエンドエンジニア の発表資料です。 https://quipper.connpass.com/event/223324/
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5フロントエンドチーム立ち上げで学んだTipsTakuya Uehara @indigolainスタディサプリ/Quipper オンラインミートアップ #5（フロントエンドエンジニア）1
View Slide
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5Who am I?● @indigolain / Takuya Uehara● Web エンジニア● 2019年11月にQuipperに入社○ バックエンド / フロントエンド○ 現チームではwebフロントエンドをメインで担当2
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5今日の話したいこと / 話さないこと➔ 話したいこと◆ リモート下でのチーム発足を成功させるためにチームで行なった行動と、それから得られた学び◆ チームの雰囲気➔ 話さないこと◆ 細かい技術的な話● 弊社カジュアル面談などで詳しく話せればと思います3
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5Agenda | 010203フロントエンドチーム立ち上げの背景リモート下の立ち上げの不安とその対策学んだこと / 課題4
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5Agenda | 010203フロントエンドチーム立ち上げの背景リモート下の立ち上げの不安とその対策学んだこと / 課題5
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5プロジェクト概要➔ 新規サービス開発プロジェクト➔ Web 13人、iOS 6人、Android 5人、Design 2人、QA 1人、PdM 1人➔ 長期プロジェクト◆ 今回の立ち上げが行われる約1年前にプロジェクトスタート6
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5プロジェクト概要➔ フロントエンドはTS + Next.js + ApolloClient の構成➔ サービス間通信は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 オンラインミートアップ #5Agenda | 010203フロントエンドチーム立ち上げの背景リモート下の立ち上げの不安とその対策学んだこと / 課題10
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5➔ リモートワークということもあり、 気軽に話す機会を作るのが難しくてコミュニケーションのハードルが高くなるのではないか➔ 1年少し進んでいるプロジェクトにいきなり入って ドメインのキャッチアップ は大丈夫だろうか➔ 色々な部署が関わっているプロジェクトで 誰に話を聞けば良いかわからなくならないだろうかドメイン知識のキャッチアップが難しいコミュニケーションが取りづらい➔ 段階的なリリースと、それに必要な機能のスケジュールを把握するのが難しいのではないか➔ プロジェクトの全体像と、機能の立ち位置 を把握するのが難しいのではないか立ち上げに対する不安プロジェクトの進捗が見えづらい11
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5立ち上げに対する不安ドメイン知識のキャッチアップが難しいコミュニケーションが取りづらいプロジェクトの進捗が見えづらいスクラム開発ドラッカー風エクササイズ常駐(可)部屋 Working Out LoudWorking Out Loud常駐(可)部屋12
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5立ち上げに対する不安ドメイン知識のキャッチアップが難しいコミュニケーションが取りづらいプロジェクトの進捗が見えづらいスクラム開発常駐(可)部屋 Working Out LoudWorking Out Loud常駐(可)部屋13ドラッカー風エクササイズ
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5スクラム開発➔ 2週間1スプリントとして開発➔ スケジュールの不確実性をなくすために◆ ユーザに価値を届ける機能の単位: Product Backlog Item (PBI)◆ PBI 単位で工数見積もりを行い、スプリントでの進捗を見てスケジュール感の把握と必要であれば調整を行う14
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5Product Backlog Item (PBI) map➔ 付箋一つ一つがPBI➔ PBI の依存関係を可視化15
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5立ち上げに対する不安ドメイン知識のキャッチアップが難しいコミュニケーションが取りづらいプロジェクトの進捗が見えづらいスクラム開発常駐(可)部屋 Working Out LoudWorking Out Loud常駐(可)部屋16ドラッカー風エクササイズ
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #517
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #51. 自分は何が好き・得意なのか 2. 自分はどうやってチームに貢献したいのか18
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #53. 〜に期待したいこと19
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5ドラッカー風エクササイズ➔ この内容を元にメンバーそれぞれが1 on 1を行い、期待値を合わせていった◆ 認証関連はこの人に任せたいよね◆ CSSに詳しそうなので相談させてくださいね◆ 既存の仕様は自分を聞いてくださいね➔ コミュニケーションのハードルを下げることができた➔ こちらの取り組みについて取り扱った Blog◆ https://quipper.hatenablog.com/entry/2019/03/05/exchange-our-expectation20振り返りでも良かった点として挙げられている✨
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5立ち上げに対する不安ドメイン知識のキャッチアップが難しいコミュニケーションが取りづらいプロジェクトの進捗が見えづらいスクラム開発常駐(可)部屋 Working Out LoudWorking Out Loud常駐(可)部屋21ドラッカー風エクササイズ
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5常駐(可)部屋➔ 常駐(可)部屋としてURLが固定されたweb会議部屋がある➔ 参加 Must ではない◆ 朝会の流れで人がいることが多い➔ 仕様の確認や技術的な相談が気軽にできるようになっている◆ モブプロや改善活動に発展常駐(可)部屋での質問順番待ちには Slackhuddle も使っていくという提案も 💪22振り返りでも良かった点として挙げられている✨
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5立ち上げに対する不安ドメイン知識のキャッチアップが難しいコミュニケーションが取りづらいプロジェクトの進捗が見えづらいスクラム開発Working Out Loud常駐(可)部屋常駐(可)部屋 Working Out Loud23ドラッカー風エクササイズ
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5Working Out Loud➔ Slack で作業毎にスレッドを立てて実況◆ 作業の可視化◆ コラボレーション◆ 思考の整理➔ チーム内で77+スレッド🎉➔ こちらの取り組みについて取り扱った Blog◆ https://quipper.hatenablog.com/entry/2018/11/14/working-out-loud24振り返りでも良かった点として挙げられている✨
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5後で参照できるようにアウトプット 🗣考えの整理 / トラブルシューティング 🧠作業の可視化👁25
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #526モブプロ&改善活動
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #527コンポーネントのディレクトリ構造について➔ ナビゲーションコンポーネントをモブプロで実装していた◆ next-router への依存を持たせるべきかという話に◆ Storybook で描画する際などに依存を Mock する必要が
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #528コンポーネントのディレクトリ構造について➔ Presentation DomainSeparation を採用➔ Issue で具体的な実装方針、決定の背景を残す
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #529CSSリセット と 差分検知➔ モブプロでアプリケーションの基盤を開発中 CSSリセットを適用し忘れていたことが判明➔ そのまま適用すると今まで実装していたコンポーネント全体に影響が➔ storycap を利用して対応が必要な箇所を差分検知CSSリセット適用後CSSリセット適用前差分検知storycap
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #530CSSリセット と 差分検知➔ 調査の結果そこまで影響のあるものが見つからず➔ 対応するべきコンポーネントの調査の工数が短縮
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #531アイコンコンポーネントを自動生成➔ アイコンコンポーネントを作ることに➔ Figma上に70+のアイコンコンポーネントの定義が➔ 全てのアイコンをコンポーネントすると時間がかかる・・・
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #532生成スクリプトAPI からSVGのデータを取得TypeScript AST を利用しつつコンポーネントコードを自動生成
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5Agenda | 010203フロントエンドチーム立ち上げの背景リモート下の立ち上げの不安とその対策学んだこと / 課題33
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5学んだこと➔ お互いの期待値を合わせると、コミュニケーションに対する心理的なハードルが下がる 🤝➔ リモートであるからこそ、習慣的に Problem を話し合う場を設けることが大事🗣➔ オンラインでのコミュニケーションは、参加へのハードルを下げるために双方向で行えることが大切🔃➔ リモート下でもチームの立ち上げはできる🚀34
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5課題➔ GraphQL関連◆ エラーハンドリング◆ persisted-queryの活用➔ Visual Regression Test (VRT) 関連◆ アニメーション等が絡むコンポーネントのVRT➔ デザイナーが Mobile と Web 両方のデザインを担当しているためデザインFIXと実装着手のタイミングがズレる35
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5Quipper では人々の学びを支える仲間を絶賛募集中です!!!36
#sapurimeetup スタディサプリ/Quipper オンラインミートアップ #5ご清聴ありがとうございました37
indigolain
dt_dynamics
dreamarts
knr109
aki_moon
weddingpark
tomomifuruya
moriyuya
ponkio_o
maijun
amazia200910
.png){kind=avatar}
kaeka
09349rjfjfnfvnfjnjd
brettharned
mraible
addyosmani
sstephenson
jrom
brianwarren
maltzj
cherdarchuk
hatefulcrawdad
quramy
zakiwarfel