コミュニケーションでフロントエンドの 「広さ」に立ち向かう

「GENBA #2 〜Front-End Opsの現場〜」の登壇資料です。
https://timeedev.connpass.com/event/308783/

Transcript

1. 2024/02/21　Shotaro Yamashita コミュニケーションでフロントエンドの 「広さ」に立ち向かう @yama_sitter
2. やました - 2023/09から、株式会社タイミーに フロントエンドエンジニアとして参画 - 前職ではエンジニアとして入社するが、 最終的にはSMとEMを担っていた - 死なない手段としてエンジニアを選択 気付いたらライフワークになっていた - 放送大学で数学関連科目を履修中 - Xアカウント: @yama_sitter 自己紹介
3. サマリ 「コミュニケーション大事！」 という、普通の話をします。
4. 目次 1. どんな状況で何が起きたか 2. 何をしてどうなったのか 3. 重要なことは何だった？ 4. 今後とまとめ
5. 1 どんな状況で何が 起きたか
6. 状況① 浅く「広く」FEに向き合っている • 1機能、1画面に幅広いドメインが集約されることが多い ◦ ディレクトリ構造でカバーしようとしても画面の都合次第では平気で依存が生まれる • プロダクトの要件から生まれる多くの「似て非なるUI」 • 複雑なドメインロジックはBEに移譲されていることも多く、 FEのリポジトリ内で「オーナー」を置く程度に深い課題は少ない ◦ ※ フルスタックだとかBFFだとかいった話もあるが、一旦ここでは割愛 • そんな中でも次から次へと更新されるライブラリやフレームワークの存在
7. 状況② タイミーFEが身を置く環境 • 部門内に複数のfeatureチームがあり、その内の幾つかチームにFEメンバーが参画してい る ◦ 一部のメンバーはFE専門のcomponentチームに所属している ◦ 「chapter」と呼ばれる職能別の横断組織があるが、あくまで主戦場はfeatureチーム 横断課題の優先順位は上がりにくい • チームに散っていても実際にFEメンバーが触るのは（ほぼ）1つのサービス/リポジトリ ◦ ここにディレクトリやコードに対するオーナーといった概念は無い • （幸いなことに）ここ最近でFEエンジニアが大きく増えてた • 全員フルリモートで開発
8. イメージ図 DALL-Eの描いた「物理的な距離で分断されたチームが全員で1つのソースコードを扱う」様子です
9. この状況下で何が起きていたのか？ • 関心のスコープが大きく個々のメンバーが全てを網羅できない ◦ 外部サービスの運用などは有志がやっていきの気持ちでカバーしている ◦ 知識の伝搬が局所的 ◦ 一部の課題の担当者が固定されてしまう ◦ 新しい方針に伴う実装やアーキテクチャが地層となって積み重なる • 折に触れて横断的な課題は挙がるが担当は決まりにくい ◦ 大きく複雑な横断課題も手付かずで残っているものが多い ◦ 「一旦起票します」 → 起票はされたが…？
10. この状況下で何が起きていたのか？ 抽象化すると… • 積み重なる横断課題 • 業務の属人化 • 地層化 • 伝搬されない知識
11. 要するに 「広さ」に立ち向かうための運用や体制が、 また別の課題を生んでいる
12. 2 何をしてどうなったのか
13. FE全体で取り組んだことと、その結果① • 横断課題の整理とリファインメントの実施 ◦ 横断課題を集約したバックログを作成。適宜リファインメントを開催して共有・議論を実施 ◦ → 課題解決だけでなく、今の状態や今後の理想についての認識合わせに繋がる • 「改善デー」の導入 ◦ FEメンバーが任意で集まり同期的に会話しながら任意の横断課題に取り組む ◦ → 「一旦起票します」だけで終わらず、少しずつ解決される状態に
14. FE全体で取り組んだことと、その結果② • 業務知識の共有 ◦ 不定期で属人化した知識の共有会を実施して理解を深め合う ◦ → すぐに「知識」にはならない。でも「知らない」を減らすことはできている ◦ ※ さも自分が主導したように見えますが、元々不定期で実施されていました • アーキテクチャ定例の開催 ◦ FEのアプリケーションアーキテクチャについて、有志で集まり定期的に話す場を設ける ◦ → 1人だと挙がらないような課題感やアイデアが発露。今後の大きな改善の一歩に繋がりか けている
15. FE全体で取り組んだことと、その結果③ • テックトークの導入 ◦ チームに分散したFEメンバーが集まり、FEの技術的なトピックについて会話する ◦ → まだ始めたばかりだが、お互いがどういった技術的な関心を持っているかが徐々に見えて きている
16. ちょっとずつ良くなってきている気がする
17. 3 重要なことは何だった？
18. （改めて）FE全体で取り組んだことの内訳 • 横断課題を集約したバックログを作成。適宜リファインメントを開催して 共有・議論を実施 • FEメンバーが任意で集まり同期的に会話しながら任意の横断課題に取り組む • 不定期で属人化した知識の共有会を実施して理解を深め合う • FEのアプリケーションアーキテクチャについて、有志で集まり 定期的に話す場を設ける • チームに分散したFEメンバーが集まり、FEの技術的なトピックについて 会話する
19. （改めて）FE全体で取り組んだことの内訳 • 横断課題を集約したバックログを作成。適宜リファインメントを開催して 共有・議論を実施 • FEメンバーが任意で集まり同期的に会話しながら任意の横断課題に取り組む • 不定期で属人化した知識の共有会を実施して理解を深め合う • FEのアプリケーションアーキテクチャについて、有志で集まり 定期的に話す場を設ける • チームに分散したFEメンバーが集まり、FEの技術的なトピックについて 会話する
20. めっちゃコミュニケーション取ってるじゃん
21. 選ばれたのはコミュニケーションでした • これまでの取り組みは全て「フロントエンドの広さ」や 「メンバー間の思考や課題感の違いを理解する」ためのコミュニケーションだった • このおかげでタイミーのFEメンバーは「少しずつ広がり続ける領域の課題」に 立ち向かえている（筈） ◦ まだ「先回りして解決」までは至れていないが、少なくとも広がるスピードに対して 遅れを取ってはいない • リモートワーク下でこの課題に立ち向かうにはチャットの会話だけだと限界がある ◦ 曖昧な考えでも直接会話し議論を深めればより洗練される ◦ ※ 特に出社を推進しているわけではないです。うひょぉぉリモートワーク最高！
22. 注意したいこと • 「コミュニケーション = 雑談」ではない ◦ 勿論、雑談も大事なコミュニケーションの1つ ◦ 課題を捉え、そのために必要なコミュニケーションの形を模索することが大事 • 当然「人に依存しない仕組み化」は重要 ◦ マメに会話していればどうにかなる、ということは無い ◦ ただこれらの仕組みもコミュニケーションを起点として改善される ◦ 取り組みの中で生まれた幾つかの仕組みも、頻繁なコミュニケーションのおかげでより洗練 されていっている
23. 4 今後とまとめ
24. これから考えていきたいこと • 「旗」を立てる ◦ 色々やった結果少しずつ良くはなってきているが、一方で色々やったせいで「線」ではなく 「点」になっていることも多い ◦ そのためにも課題を整理し「旗」を立て直すことが大事 ◦ これが無いとコミュニケーションを取ったところで離散してしまう ◦ こういったことを考えたときよりメンバーが増えたのでまた難しさが 増している
25. まとめ • フロントエンドは浅く「広く」なりやすい • この「広さ」に立ち向かうためには「コミュニケーション」が重要 • 課題を捉え、そのために必要なコミュニケーションの形を模索する • 但しコミュニケーションそのものは解決「策」ではないので注意
26. ご清聴ありがとうございました