技術選定を未来に繋いで活用していく

実例！フロントエンドの技術選定とその後をADRから振り返る
https://findy-tools.connpass.com/event/347251/

X
https://twitter.com/__sakito__

Transcript

1. 技術選定を未来に繋いで 活用していく sakito / @__sakito__ 実例！フロントエンドの技術選定とその後を ADRから振り返る 2025.03.26 1
2. 技術選定を未来に繋いで活用していく • Sakito • X: @__sakito__ • BlueSky: @sakito.bsky.social • 所属: サイボウズ株式会社 • kintone 開発 • プロダクトデザインマネージャー • Webフロントエンドエンジニアマネージャー • 週4勤務 • 週1は復業 自己紹介 2 使用フォントについて
3. 3 01 02 03 04 05 ADRとは？ サイボウズのフロントエンドについて 約4年間ADRを運用した学び ADRさらに活用したこれからの挑戦 まとめ 目 次
4. 4 ADRとは？
5. 技術選定を未来に繋いで活用していく • Architecture Decision Record • 略してADR • ソフトウェア開発、プロジェクトの意思決定を文書化する手法の1つ • 決定内容だけではなく、決定に至るまでの過程を記録することで透明性が高いドキュメントを残す • ADRはプロセスまで考えてこそ価値がある • いつADRを書くのか • ADRには誰がレビューするべきなのか • ADRを使った意思決定はどこに残していくのか • etc... ADRとは？ 5 ADRとは？
6. 技術選定を未来に繋いで活用していく • タイトル - Title • ADRの範囲を特定の決定に限定する、短く記述的な名前 • 「001: ***の選択」のように、番号と簡潔な説明が含まれる • ステータス - Status • ADRの現在の状態を示す • 提案 (Proposed),提案 (Proposed),拒否 (Rejected),非推奨 (Deprecated) • 決定事項 – Decision • 提案および/または実行している具体的な変更内容を記述、理由も含む • コンテキスト – Context • 決定または変更を動機づけている問題や状況を説明 • 決定が必要になった背景を明確にする • そのほか：作成者とチーム,日付,選択候補と理由などなど... ADRのフォーマット例 6 ADRとは？
7. 技術選定を未来に繋いで活用していく • タイトル : 1. ****の選定 • 日付: 2025-03-27 • 関係者：*** • ステータス: 承認済 • コンテキスト • ***を作る予定がある。システムの拡張性、可用性、および保守性の向上が求められています。***を検討する • 決定 • ***の理由から、***に決定する • 技術候補 • hogehoge：***に優れているが、***に欠けている • hugahuga：***が可能だが、***のリスクがある ADRの簡単な例 7 ADRとは？
8. 技術選定を未来に繋いで活用していく • Architectural Decision Records (ADRs) | Architectural Decision Records • https://adr.github.io/ • Architecture decision record - Microsoft Azure Well-Architected Framework | Microsoft Learn • https://learn.microsoft.com/en-us/azure/well-architected/architect-role/architecture-decision-record • Using architectural decision records to streamline technical decision-making for a software development project - AWS Prescriptive Guidance • https://docs.aws.amazon.com/prescriptive-guidance/latest/architectural-decision- records/welcome.html • Architecture Decision Record: How and why use ADRs? – Scrum-Master·Org • https://scrum-master.org/en/architecture-decision-record-how-and-why-use-adrs/ • アーキテクチャ決定レコードの概要 | Cloud Architecture Center | Google Cloud • https://cloud.google.com/architecture/architecture-decision-records?hl=ja ADRの参考となるソース 8 ADRとは？
9. 9 本題
10. 技術選定を未来に繋いで 活用していく sakito / @__sakito__ 実例！フロントエンドの技術選定とその後を ADRから振り返る 2025.03.26 10
11. 11 サイボウズのフロントエンドについて
12. 技術選定を未来に繋いで活用していく サイボウズの製品 12 サイボウズのフロントエンドについて
13. 技術選定を未来に繋いで活用していく サイボウズの組織 13 サイボウズのフロントエンドについて フロントエンドは kintoneに注力中
14. 技術選定を未来に繋いで活用していく kintoneのフロントエンド 14 サイボウズのフロントエンドについて • フロントエンド職能は約15人 • kintoneは領域ごとに分割されており、各チームに2~3人所属 • 現在は新機能開発しつつ、 Closure ToolsからReactへ移行中(4年目) • kintoneの開発はすでに約15年続いている • 技術刷新だけではなく、フロントエンドの文化作りにも挑んでいる • 各チームでフロントエンド技術の採用を意思決定する • 決定した影響範囲を小さくし、挑戦のハードルも下げる • チームを超えたコラボレーションをおこなう • 技術やアーキテクチャだけではなく、体制も変化に耐えれるように
15. 技術選定を未来に繋いで活用していく kintoneのフロントエンド 15 サイボウズのフロントエンドについて • フロントエンド職能は約15人 • kintoneは領域ごとに分割されており、各チームに2~3人所属 • 現在は新機能開発しつつ、 Closure ToolsからReactへ移行中(4年目) • kintoneの開発はすでに約15年続いている • 技術刷新だけではなく、フロントエンドの文化作りにも挑んでいる • 各チームでフロントエンド技術の採用を意思決定する • 決定した影響範囲を小さくし、挑戦のハードルも下げる • チームを超えたコラボレーションをおこなう • 技術やアーキテクチャだけではなく、体制も変化に耐えれるように これらが背景にある意思決定を記録し・共有するためにADRを活用
16. 技術選定を未来に繋いで活用していく kintoneのフロントエンドとADR 16 サイボウズのフロントエンドについて
17. 17 約4年間ADRを運用した学び
18. 技術選定を未来に繋いで活用していく いままで生まれたADRのタイトル 18 約4年間ADRを運用した学び • UIの自動テスト方針 • VRT環境と利用ツール • フロントエンドの設計方針 • 状態管理ライブラリの選定 • 画面全体の状態管理の方針 • tsファイルの即時実行にtsxを採用する • RTEのライブラリ選定 • Global CSSの適用方針 フロントエンドだけでも約30ドキュメントを超えるADRの数
19. 技術選定を未来に繋いで活用していく ADRがあってよかったこと、改善できそうなこと 19 よかったこと • チーム間でレビューし合えた • 人が辞めても意思決定が追える • さまざまな観点の意思決定がデータとして貯まった • オンボーディングに活用できる 改善できそうなこと • 意思決定の要因に組織的な観点、採用観点を盛り込む • ADRが増えたので、チーム横断の技術方針となるADRが作れそう • 同じようなADRが大量に発生しているので、技術選定をskipできるように • 横断技術選定のADRがあることで、はみ出したい時の基準にもなる 約4年間ADRを運用した学び
20. 技術選定を未来に繋いで活用していく ADRがあってよかったこと、改善できそうなこと 20 よかったこと • チーム間でレビューし合えた • 人が辞めても意思決定が追える • さまざまな観点の意思決定がデータとして貯まった • オンボーディングに活用できる 改善できそうなこと • 意思決定の要因に組織的な観点、採用観点を盛り込む • ADRが増えたので、チーム横断の技術方針となるADRが作れそう • 同じようなADRが大量に発生しているので、技術選定をskipできるように • 横断技術選定のADRがあることで、はみ出したい時の基準にもなる 約4年間ADRを運用した学び
21. 21 ADRさらに活用した これからの挑戦
22. 技術選定を未来に繋いで活用していく 意思決定の要因に組織的な観点、採用観点を盛り込む(挑戦中) 22 • ADRでは表現できないメタ的な部分、組織戦略的な部分の観点が不足してることがわかった • 採用が継続的に続けれる技術か？ • 長い運用に耐えることができるだろうか？ • チーム間の人の配置の柔軟性をあげるために、オンボに必要なドキュメントがあるか？ • 上記の観点を含んだ横断的なガイドラインを作成中 • フィロソフィのようなメンタルモデルの透明化 • デザインには共通のメンタルモデルとしてデザインフィロソフィーの取り組みが当たり前となりつつあるので、 これをフロントエンドの世界にも持ち込む • 参考：デザインシステムの最初の一歩として原則を作る理由 • https://yasuhisa.com/could/article/start-with-principles/ ADRにフロントエンドフィロソフィの観点を入れていくことで、より良い意思決定ができるのではないか？ ADRさらに活用したこれからの挑戦
23. 技術選定を未来に繋いで活用していく ADRが増えたので、チーム横断の技術方針となるADRが作れそう(挑戦中) 23 いまなら過去のADRを活用して、 1つの横断的な意思決定ができるかもしれない ADRさらに活用したこれからの挑戦
24. 技術選定を未来に繋いで活用していく チーム横断の技術方針に責任を持つチームも作った(挑戦中) 24 ADRさらに活用したこれからの挑戦 New!!!!
25. 技術選定を未来に繋いで活用していく AIの利活用もしていきたい(これから挑戦したい) 25 ADRさらに活用したこれからの挑戦 • ADRが貯まっていくことでAIに活用できるはず • 会社特有の観点を含んだ学習データとなる • 新しいADR作成の壁打ちにも使えそう AIの学習データに利用できそう
26. 26 まとめ
27. 技術選定を未来に繋いで活用していく まとめ 27 まとめ • ADRは意思決定を残していくのに良い手段 • ADRだけでは足りない体制、ドキュメントもある • いままでのデータの蓄積があり、そこから派生して新しいADRが生まれていく • 技術選定を未来に繋いで活用していく • AIも駆使すると、もっと便利に活用できそう • ADRを貯めていくなら、はじめるのは早ければ早いほどお得！！
28. ©️ Cybozu, Inc. 技術選定を未来に繋いで活用していく 28 採用募集しています！！ • フロントエンド • シニアフロントエンド • Webエンジニア • シニアWebエンジニア • エンジニアリングマネージャー • etc...
29. ありがとうございました 29