探索的なダッシュボード開発の未来に備える、フロントエンドのリファクタリング

探索的なダッシュボード開発の 未来に備える、 フロントエンドのリファクタリング 2026.06.22 Cybozu Tech Meetup #27 柿崎美南乃

⽬次 01 ⾃⼰紹介 02 ダッシュボードチームとチームの持ち物 03 当時のコードの状態・課題 04 やったこと 05 進め⽅ 06 学び

⾃⼰紹介 ● 柿崎美南乃（かきざきひなの） ● X: @hiyoko_coder ● 2023/04 サイボウズ新卒⼊社・アプリ領域担当チーム ● 2025/03 ダッシュボードチーム ● 趣味︓編み物・パン作り 3

ダッシュボードチームとチームの持ち物

ダッシュボードチームについて • ダッシュボード開発に特化したチーム • ただ⾔われたものを作るのではなく、作るものから開発チームで決めていく • デザイナーやプロダクトマネージャーと協働 • 何をどのような順番で作るのかの意思決定から、インフラ〜フロントの開発・運⽤を⼀気通貫でオーナー シップを持って担当 5

顧客向けの2 つのダッシュボードをリリース 性能ダッシュボード 利⽤状況ダッシュボード お客様が性能改善の サイクルを回せる （2025/10） kintone 活⽤状況の把握・ 活⽤促進の検討材料に （2025/12）

性能ダッシュボード

利⽤状況ダッシュボード

社内⽤ダッシュボード ● 今度は社内⽤ダッシュボードを作ることに ● デザイナーやプロダクトマネージャーと何を⾒せるかを議論 ● 結論︓社内⽤と顧客⽤で同じものを⾒せる

チームの持ち物は 3 つに 性能ダッシュボード 利⽤状況ダッシュボード 顧客向け 顧客向け お客様が性能改善の サイクルを回せる (2025/10) kintone 活⽤状況の把握・ 活⽤促進の検討材料に (2025/12) 社内⽤ダッシュボード 社内向け 障害対応の調査や お客様サポートに （性能/利⽤状況） (2026/04)

フロントエンドの主な技術スタック ● TypeScript ● React ● SWR（データ取得） ● Zod（スキーマ宣⾔とデータ検証） ● Highcharts（グラフ描画）

社内⽤ダッシュボード実装後 フロントエンドのコードは どうなっていたか

社内⽤と顧客⽤でたくさんの重複😣 顧客⽤ダッシュボード 社内⽤ダッシュボード 表⽰コンポーネント 表⽰コンポーネント グラフhook データhook 👈 ほぼ同⼀のコードが 丸ごと重複 👉 グラフhook データhook

重複が⽣まれていた理由 ● 提供するものを探索的に決めていた ● 社内と顧客で「同じものを⾒せる」と、最初は⾒えていなかった ● 何を⾒せるかの議論のため、軽い実装と議論のサイクルを回していた ● 実際のデータで⾒ることで判断しやすくなる性質がある ● →どこまで共通化できるか／完成形が読めない状態で開発が進んでいた ● ⽚⽅の影響がもう⽚⽅にも出るのを防ぎたかった ● 社内⽤だけに適⽤したい変更が意図せず顧客⽤に出る可能性を避けたい ● →あえて重複させて分けていた⾯もある

ずっと気になっていた重複… リファクタリングの機運が⾼まる︕🔥 © Cybozu, Inc. 15

機運⾼まり＆リファクタタイミングの理由 ● 検討系タスクの多い時期だった ● フロントのコードをしばらく触らなそうなのでチャンス ● 今わかっている社内⽤ダッシュボードの意義・価値が変わらなそうとわかった ● 顧客⽤にリリースした機能が社内⽤に適⽤されるまでのラグが⽣じるという課題をチームで感 じていた ● ⾃分がフロントエンド頑張りたい気持ちがあった

やったこと

テンプレート駆動へのリファクタリング

こんなイメージ

こんなイメージ

画⾯が描画されるまでの流れ テンプレート データ 画⾯の定義（顧客⽤/社内⽤でそれぞれ⽤意する） templates/*.json API取得→正規化 data/sources/*.ts 汎⽤チャート 描画 汎⽤チャートを使ってテンプレートに沿って配置・描画 DashboardRenderer / GraphRenderer line 折れ線グラフ column それぞれの画⾯が完成 treemap 棒グラフ ツリーマップ

リファクタリングで気にしたこと ● 顧客⽤/社内⽤の両⽅への対応のコストが低い ● 顧客⽤に追加された新機能をすぐに社内⽤にも適⽤できる ● 顧客⽤/社内⽤の独⽴性を維持 ● ⽚⽅だけに適⽤したい変更がある場合に備える ● 型安全 ● Zod＋discriminated union で不正なテンプレートを弾く

リファクタ前後の⽐較 Before After ●3ファイルを新規作成 ●必要なら データ取得hookを追加 （データhook／グラフhook／表⽰コンポーネント） ●JSONにグラフ定義を追記 ●Pageコンポーネント側も修正 ●共通の描画の仕組みで社内⽤にも追加しやすい ●社内⽤にも、ほぼ同じものを重複して作成 3ファイル＋Page → JSON 1箇所

今、テンプレート駆動へのリファクタを実施した理由 スピード感を持って価値のあるダッシュボードの探索的な開発をし続けるため ● これからも、収集するデータは増え続ける・「何をどう⾒せるか」を探索し続ける ● テンプレート駆動にすると、探索のコストが減ってより効果的に進んでいける → チームが事業貢献し続けられる未来への投資

進め⽅

Claude + ⼈間2⼈のモブ 1 メンバー Claude ＋ ⼈間2⼈のモブ 2 PoC リファクタの⽅針を検討し、検証のため１画⾯でPoCをClaudeに作ってもらう 3 プラン Claude に移⾏プランを検討してもらう 4 本格移⾏ リスク許容度の⾼い社内⽤ダッシュボードから着⼿

AIと⼈間2⼈のモブで進めてよかった点 ● スキルアップ ● Claudeの計画の微妙なところを、フロントが得意なメンバーがが素早く的確に発⾒ ● 勉強になった＆モチベーションになった ● 雑談タイム ● Claudeがplanモードで考えている間に雑談の時間が⽣まれた ● 業務やプライベートでのAI 活⽤法を共有できたのは思わぬ収穫

学び

学び ● 探索段階での重複を許容したのはよかった ● 価値がある程度が⾒えてからリファクタリングすることで、過剰設計を避けスピード感を保った 検討ができた ● Claudeにまず PoC を作ってもらうのがよかった ● 事前に考慮漏れを先に洗い出せたのでそれを元にプランを考えさせられた ● 特に複雑な画⾯を選んでPoCをやってくれていたのがよかった ● プロダクトの現在の価値と、これからの⽅向性を把握していると選択肢が⾒えやすい ● 課題を解消するための⽅向性はいくつもあったはず ● 現在の価値、これからの⽅向性が⾒えていたから、テンプレート駆動でのリファクタという選択 をできた

ダッシュボード開発チームで⼀緒に働きませんか︖ ダッシュボード開発を ⼀緒に進めるメンバーを募集しています︕ https://cybozu.co.jp/recruit/entry/career/kintone-dashboard.html

• https://cybozu.co.jp/recruit/entry/career/kintone-dashboard.html

© Cybozu, Inc.