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

技術選定を未来に繋いで 活用していく sakito / @__sakito__ 実例！フロントエンドの技術選定とその後を ADRから振り返る 2025.03.26 1

使用フォントについて 自己紹介 • Sakito • X: @__sakito__ • BlueSky: @sakito.bsky.social • 所属: サイボウズ株式会社 • kintone 開発 • プロダクトデザインマネージャー • Webフロントエンドエンジニアマネージャー • 週4勤務 • 週1は復業 技術選定を未来に繋いで活用していく 2

目次 01 ADRとは？ 02 サイボウズのフロントエンドについて 03 約4年間ADRを運用した学び 04 ADRさらに活用したこれからの挑戦 05 まとめ 3

ADRとは？ 4

ADRとは？ ADRとは？ • Architecture Decision Record • 略してADR • ソフトウェア開発、プロジェクトの意思決定を文書化する手法の1つ • 決定内容だけではなく、決定に至るまでの過程を記録することで透明性が高いドキュメントを残す • ADRはプロセスまで考えてこそ価値がある • いつADRを書くのか • ADRには誰がレビューするべきなのか • ADRを使った意思決定はどこに残していくのか • etc... 技術選定を未来に繋いで活用していく 5

ADRとは？ ADRのフォーマット例 • タイトル - Title • ADRの範囲を特定の決定に限定する、短く記述的な名前 • 「001: ***の選択」のように、番号と簡潔な説明が含まれる • ステータス - Status • ADRの現在の状態を示す • 提案 (Proposed),提案 (Proposed),拒否 (Rejected),非推奨 (Deprecated) • 決定事項 – Decision • 提案および/または実行している具体的な変更内容を記述、理由も含む • コンテキスト – Context • 決定または変更を動機づけている問題や状況を説明 • 決定が必要になった背景を明確にする • そのほか：作成者とチーム,日付,選択候補と理由などなど... 技術選定を未来に繋いで活用していく 6

ADRとは？ ADRの簡単な例 • タイトル : 1. ****の選定 • 日付: 2025-03-27 • 関係者：*** • ステータス: 承認済 • コンテキスト • ***を作る予定がある。システムの拡張性、可用性、および保守性の向上が求められています。***を検討する • 決定 • ***の理由から、***に決定する • 技術候補 • hogehoge：***に優れているが、***に欠けている • hugahuga：***が可能だが、***のリスクがある 技術選定を未来に繋いで活用していく 7

ADRとは？ ADRの参考となるソース • 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-decisionrecords/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 技術選定を未来に繋いで活用していく 8

• https://adr.github.io/
• https://learn.microsoft.com/en-us/azure/well-architected/architect-role/architecture-decision-record
• https://docs.aws.amazon.com/prescriptive-guidance/latest/architectural-decision-records/welcome.html
• https://scrum-master.org/en/architecture-decision-record-how-and-why-use-adrs/
• https://cloud.google.com/architecture/architecture-decision-records?hl=ja

本題 9

技術選定を未来に繋いで 活用していく sakito / @__sakito__ 実例！フロントエンドの技術選定とその後を ADRから振り返る 2025.03.26 10

サイボウズのフロントエンドについて 11

サイボウズのフロントエンドについて サイボウズの製品 技術選定を未来に繋いで活用していく 12

サイボウズのフロントエンドについて サイボウズの組織 フロントエンドは kintoneに注力中 技術選定を未来に繋いで活用していく 13

サイボウズのフロントエンドについて kintoneのフロントエンド • フロントエンド職能は約15人 • kintoneは領域ごとに分割されており、各チームに2~3人所属 • 現在は新機能開発しつつ、 Closure ToolsからReactへ移行中(4年目) • kintoneの開発はすでに約15年続いている • 技術刷新だけではなく、フロントエンドの文化作りにも挑んでいる • 各チームでフロントエンド技術の採用を意思決定する • 決定した影響範囲を小さくし、挑戦のハードルも下げる • チームを超えたコラボレーションをおこなう • 技術やアーキテクチャだけではなく、体制も変化に耐えれるように 技術選定を未来に繋いで活用していく 14

サイボウズのフロントエンドについて kintoneのフロントエンド • フロントエンド職能は約15人 • kintoneは領域ごとに分割されており、各チームに2~3人所属 • 現在は新機能開発しつつ、 Closure ToolsからReactへ移行中(4年目) • kintoneの開発はすでに約15年続いている • 技術刷新だけではなく、フロントエンドの文化作りにも挑んでいる • 各チームでフロントエンド技術の採用を意思決定する • 決定した影響範囲を小さくし、挑戦のハードルも下げる • チームを超えたコラボレーションをおこなう • 技術やアーキテクチャだけではなく、体制も変化に耐えれるように これらが背景にある意思決定を記録し・共有するためにADRを活用 技術選定を未来に繋いで活用していく 15

サイボウズのフロントエンドについて kintoneのフロントエンドとADR 技術選定を未来に繋いで活用していく 16

約4年間ADRを運用した学び 17

約4年間ADRを運用した学び いままで生まれたADRのタイトル • UIの自動テスト方針 • VRT環境と利用ツール • フロントエンドの設計方針 • 状態管理ライブラリの選定 • 画面全体の状態管理の方針 • tsファイルの即時実行にtsxを採用する • RTEのライブラリ選定 • Global CSSの適用方針 フロントエンドだけでも約30ドキュメントを超えるADRの数 技術選定を未来に繋いで活用していく 18

約4年間ADRを運用した学び ADRがあってよかったこと、改善できそうなこと よかったこと • チーム間でレビューし合えた • 人が辞めても意思決定が追える • さまざまな観点の意思決定がデータとして貯まった • オンボーディングに活用できる 改善できそうなこと • 意思決定の要因に組織的な観点、採用観点を盛り込む • ADRが増えたので、チーム横断の技術方針となるADRが作れそう • 同じようなADRが大量に発生しているので、技術選定をskipできるように • 横断技術選定のADRがあることで、はみ出したい時の基準にもなる 技術選定を未来に繋いで活用していく 19

約4年間ADRを運用した学び ADRがあってよかったこと、改善できそうなこと よかったこと • チーム間でレビューし合えた • 人が辞めても意思決定が追える • さまざまな観点の意思決定がデータとして貯まった • オンボーディングに活用できる 改善できそうなこと • 意思決定の要因に組織的な観点、採用観点を盛り込む • ADRが増えたので、チーム横断の技術方針となるADRが作れそう • 同じようなADRが大量に発生しているので、技術選定をskipできるように • 横断技術選定のADRがあることで、はみ出したい時の基準にもなる 技術選定を未来に繋いで活用していく 20

ADRさらに活用した これからの挑戦 21

ADRさらに活用したこれからの挑戦 意思決定の要因に組織的な観点、採用観点を盛り込む(挑戦中) • ADRでは表現できないメタ的な部分、組織戦略的な部分の観点が不足してることがわかった • 採用が継続的に続けれる技術か？ • 長い運用に耐えることができるだろうか？ • チーム間の人の配置の柔軟性をあげるために、オンボに必要なドキュメントがあるか？ • 上記の観点を含んだ横断的なガイドラインを作成中 • フィロソフィのようなメンタルモデルの透明化 • デザインには共通のメンタルモデルとしてデザインフィロソフィーの取り組みが当たり前となりつつあるので、 これをフロントエンドの世界にも持ち込む • 参考：デザインシステムの最初の一歩として原則を作る理由 • https://yasuhisa.com/could/article/start-with-principles/ ADRにフロントエンドフィロソフィの観点を入れていくことで、より良い意思決定ができるのではないか？ 技術選定を未来に繋いで活用していく 22

• https://yasuhisa.com/could/article/start-with-principles/

ADRさらに活用したこれからの挑戦 ADRが増えたので、チーム横断の技術方針となるADRが作れそう(挑戦中) いまなら過去のADRを活用して、 1つの横断的な意思決定ができるかもしれない 技術選定を未来に繋いで活用していく 23

ADRさらに活用したこれからの挑戦 チーム横断の技術方針に責任を持つチームも作った(挑戦中) New!!!! 技術選定を未来に繋いで活用していく 24

ADRさらに活用したこれからの挑戦 AIの利活用もしていきたい(これから挑戦したい) • ADRが貯まっていくことでAIに活用できるはず • 会社特有の観点を含んだ学習データとなる AIの学習データに利用できそう • 新しいADR作成の壁打ちにも使えそう 技術選定を未来に繋いで活用していく 25

まとめ 26

まとめ まとめ • ADRは意思決定を残していくのに良い手段 • ADRだけでは足りない体制、ドキュメントもある • いままでのデータの蓄積があり、そこから派生して新しいADRが生まれていく • 技術選定を未来に繋いで活用していく • AIも駆使すると、もっと便利に活用できそう • ADRを貯めていくなら、はじめるのは早ければ早いほどお得！！ 技術選定を未来に繋いで活用していく 27

採用募集しています！！ • フロントエンド • シニアフロントエンド • Webエンジニア • シニアWebエンジニア • エンジニアリングマネージャー • etc... ©️ Cybozu, Inc. 技術選定を未来に繋いで活用していく 28

ありがとうございました 29