--- title: 探索的なダッシュボード開発の未来に備える、フロントエンドのリファクタリング tags: #フロントエンド #リファクタリング #プロダクト開発 #kintone author: [サイボウズ開発本部](https://www.docswell.com/user/cybozu-tech) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/47ZL984LJ3.jpg?width=480 description: 2026/06/22(月)開催 Cybozu Tech Meetup #27 https://cybozu.connpass.com/event/394341/ 柿崎 美南乃の発表資料です。 published: June 26, 26 canonical: https://www.docswell.com/s/cybozu-tech/Z4NN4G-20260622-techmeetup-frontend --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/47ZL984LJ3.jpg) 探索的なダッシュボード開発の 未来に備える、 フロントエンドのリファクタリング 2026.06.22 Cybozu Tech Meetup #27 柿崎美南乃 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/YJ6WKP3MJV.jpg) ⽬次 01 ⾃⼰紹介 02 ダッシュボードチームとチームの持ち物 03 当時のコードの状態・課題 04 やったこと 05 進め⽅ 06 学び # Page. 3 ![Page Image](https://bcdn.docswell.com/page/GJ5MPKLQJ4.jpg) ⾃⼰紹介 ● 柿崎美南乃（かきざきひなの） ● X: @hiyoko_coder ● 2023/04 サイボウズ新卒⼊社・アプリ領域担当チーム ● 2025/03 ダッシュボードチーム ● 趣味︓編み物・パン作り 3 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/LE3W3ZLZE5.jpg) ダッシュボードチームとチームの持ち物 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/8EDK4RN47G.jpg) ダッシュボードチームについて • ダッシュボード開発に特化したチーム • ただ⾔われたものを作るのではなく、作るものから開発チームで決めていく • デザイナーやプロダクトマネージャーと協働 • 何をどのような順番で作るのかの意思決定から、インフラ〜フロントの開発・運⽤を⼀気通貫でオーナー シップを持って担当 5 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/V7PKMW5VJ8.jpg) 顧客向けの2 つのダッシュボードをリリース 性能ダッシュボード 利⽤状況ダッシュボード お客様が性能改善の サイクルを回せる （2025/10） kintone 活⽤状況の把握・ 活⽤促進の検討材料に （2025/12） # Page. 7 ![Page Image](https://bcdn.docswell.com/page/2JVV98PRJQ.jpg) 性能ダッシュボード # Page. 8 ![Page Image](https://bcdn.docswell.com/page/5EGLZ5P6JL.jpg) 利⽤状況ダッシュボード # Page. 9 ![Page Image](https://bcdn.docswell.com/page/4JQYLZ227P.jpg) 社内⽤ダッシュボード ● 今度は社内⽤ダッシュボードを作ることに ● デザイナーやプロダクトマネージャーと何を⾒せるかを議論 ● 結論︓社内⽤と顧客⽤で同じものを⾒せる # Page. 10 ![Page Image](https://bcdn.docswell.com/page/K74WD3LPE1.jpg) チームの持ち物は 3 つに 性能ダッシュボード 利⽤状況ダッシュボード 顧客向け 顧客向け お客様が性能改善の サイクルを回せる (2025/10) kintone 活⽤状況の把握・ 活⽤促進の検討材料に (2025/12) 社内⽤ダッシュボード 社内向け 障害対応の調査や お客様サポートに （性能/利⽤状況） (2026/04) # Page. 11 ![Page Image](https://bcdn.docswell.com/page/LJ1YZ1LXEG.jpg) フロントエンドの主な技術スタック ● TypeScript ● React ● SWR（データ取得） ● Zod（スキーマ宣⾔とデータ検証） ● Highcharts（グラフ描画） # Page. 12 ![Page Image](https://bcdn.docswell.com/page/GJWG98VK72.jpg) 社内⽤ダッシュボード実装後 フロントエンドのコードは どうなっていたか # Page. 13 ![Page Image](https://bcdn.docswell.com/page/4EZL984N73.jpg) 社内⽤と顧客⽤でたくさんの重複😣 顧客⽤ダッシュボード 社内⽤ダッシュボード 表⽰コンポーネント 表⽰コンポーネント グラフhook データhook 👈 ほぼ同⼀のコードが 丸ごと重複 👉 グラフhook データhook # Page. 14 ![Page Image](https://bcdn.docswell.com/page/Y76WKP397V.jpg) 重複が⽣まれていた理由 ● 提供するものを探索的に決めていた ● 社内と顧客で「同じものを⾒せる」と、最初は⾒えていなかった ● 何を⾒せるかの議論のため、軽い実装と議論のサイクルを回していた ● 実際のデータで⾒ることで判断しやすくなる性質がある ● →どこまで共通化できるか／完成形が読めない状態で開発が進んでいた ● ⽚⽅の影響がもう⽚⽅にも出るのを防ぎたかった ● 社内⽤だけに適⽤したい変更が意図せず顧客⽤に出る可能性を避けたい ● →あえて重複させて分けていた⾯もある # Page. 15 ![Page Image](https://bcdn.docswell.com/page/G75MPKLD74.jpg) ずっと気になっていた重複… リファクタリングの機運が⾼まる︕🔥 © Cybozu, Inc. 15 # Page. 16 ![Page Image](https://bcdn.docswell.com/page/9J296W3MER.jpg) 機運⾼まり＆リファクタタイミングの理由 ● 検討系タスクの多い時期だった ● フロントのコードをしばらく触らなそうなのでチャンス ● 今わかっている社内⽤ダッシュボードの意義・価値が変わらなそうとわかった ● 顧客⽤にリリースした機能が社内⽤に適⽤されるまでのラグが⽣じるという課題をチームで感 じていた ● ⾃分がフロントエンド頑張りたい気持ちがあった # Page. 17 ![Page Image](https://bcdn.docswell.com/page/DEY49L1PJM.jpg) やったこと # Page. 18 ![Page Image](https://bcdn.docswell.com/page/VJNYL42M78.jpg) テンプレート駆動へのリファクタリング # Page. 19 ![Page Image](https://bcdn.docswell.com/page/YE9P4Q1WJ3.jpg) こんなイメージ # Page. 20 ![Page Image](https://bcdn.docswell.com/page/GE8DQG4RED.jpg) こんなイメージ # Page. 21 ![Page Image](https://bcdn.docswell.com/page/LELMXG627R.jpg) 画⾯が描画されるまでの流れ テンプレート データ 画⾯の定義（顧客⽤/社内⽤でそれぞれ⽤意する） templates/*.json API取得→正規化 data/sources/*.ts 汎⽤チャート 描画 汎⽤チャートを使ってテンプレートに沿って配置・描画 DashboardRenderer / GraphRenderer line 折れ線グラフ column それぞれの画⾯が完成 treemap 棒グラフ ツリーマップ # Page. 22 ![Page Image](https://bcdn.docswell.com/page/4JMYLQ59JW.jpg) リファクタリングで気にしたこと ● 顧客⽤/社内⽤の両⽅への対応のコストが低い ● 顧客⽤に追加された新機能をすぐに社内⽤にも適⽤できる ● 顧客⽤/社内⽤の独⽴性を維持 ● ⽚⽅だけに適⽤したい変更がある場合に備える ● 型安全 ● Zod＋discriminated union で不正なテンプレートを弾く # Page. 23 ![Page Image](https://bcdn.docswell.com/page/PJR9K83979.jpg) リファクタ前後の⽐較 Before After ●3ファイルを新規作成 ●必要なら データ取得hookを追加 （データhook／グラフhook／表⽰コンポーネント） ●JSONにグラフ定義を追記 ●Pageコンポーネント側も修正 ●共通の描画の仕組みで社内⽤にも追加しやすい ●社内⽤にも、ほぼ同じものを重複して作成 3ファイル＋Page → JSON 1箇所 # Page. 24 ![Page Image](https://bcdn.docswell.com/page/PEXQL843JX.jpg) 今、テンプレート駆動へのリファクタを実施した理由 スピード感を持って価値のあるダッシュボードの探索的な開発をし続けるため ● これからも、収集するデータは増え続ける・「何をどう⾒せるか」を探索し続ける ● テンプレート駆動にすると、探索のコストが減ってより効果的に進んでいける → チームが事業貢献し続けられる未来への投資 # Page. 25 ![Page Image](https://bcdn.docswell.com/page/3EK9LKZNED.jpg) 進め⽅ # Page. 26 ![Page Image](https://bcdn.docswell.com/page/L73W3ZDZ75.jpg) Claude + ⼈間2⼈のモブ 1 メンバー Claude ＋ ⼈間2⼈のモブ 2 PoC リファクタの⽅針を検討し、検証のため１画⾯でPoCをClaudeに作ってもらう 3 プラン Claude に移⾏プランを検討してもらう 4 本格移⾏ リスク許容度の⾼い社内⽤ダッシュボードから着⼿ # Page. 27 ![Page Image](https://bcdn.docswell.com/page/87DK4RP4JG.jpg) AIと⼈間2⼈のモブで進めてよかった点 ● スキルアップ ● Claudeの計画の微妙なところを、フロントが得意なメンバーがが素早く的確に発⾒ ● 勉強になった＆モチベーションになった ● 雑談タイム ● Claudeがplanモードで考えている間に雑談の時間が⽣まれた ● 業務やプライベートでのAI 活⽤法を共有できたのは思わぬ収穫 # Page. 28 ![Page Image](https://bcdn.docswell.com/page/VJPKMWNVE8.jpg) 学び # Page. 29 ![Page Image](https://bcdn.docswell.com/page/2EVV98KREQ.jpg) 学び ● 探索段階での重複を許容したのはよかった ● 価値がある程度が⾒えてからリファクタリングすることで、過剰設計を避けスピード感を保った 検討ができた ● Claudeにまず PoC を作ってもらうのがよかった ● 事前に考慮漏れを先に洗い出せたのでそれを元にプランを考えさせられた ● 特に複雑な画⾯を選んでPoCをやってくれていたのがよかった ● プロダクトの現在の価値と、これからの⽅向性を把握していると選択肢が⾒えやすい ● 課題を解消するための⽅向性はいくつもあったはず ● 現在の価値、これからの⽅向性が⾒えていたから、テンプレート駆動でのリファクタという選択 をできた # Page. 30 ![Page Image](https://bcdn.docswell.com/page/57GLZ5Q6EL.jpg) ダッシュボード開発チームで⼀緒に働きませんか︖ ダッシュボード開発を ⼀緒に進めるメンバーを募集しています︕ https://cybozu.co.jp/recruit/entry/career/kintone-dashboard.html # Page. 31 ![Page Image](https://bcdn.docswell.com/page/4EQYLZK2JP.jpg) © Cybozu, Inc.