【ゆる開発⑧】文字化け事件発生!データ管理の壁に挑む
データをパッと見やすく整理するダッシュボードを試作。これ、非常に便利で楽しい!
システム開発を進めていると、どんどん欲が出てくるもの。最初は「とりあえず動けばいい」と思っていたのに、気がつけば「もっと使いやすくしたい」「データを見やすく整理したい」と思うようになっていました。そんな中で今回は、ダッシュボードを作る ことに挑戦しました。
1. ダッシュボードを作ることにしたきっかけ
これまでの開発で、履歴画面の情報を整理したり、売上データを集計したりと、データを管理する場面が増えてきました。しかし、情報が散らばっていて見づらい!
「データを一目で把握できる画面がほしい」
そう思ったときに、ダッシュボード という概念に行き着きました。

2. まずは売上分析を実装!
いきなりすべての機能を作ろうとするとハードルが高すぎるので、売上分析のダッシュボード を先に作ることに。
売上分析の指標
日次売上:日ごとの売上をグラフで可視化
週次売上:週ごとの売上推移を棒グラフで表示
月次・年次売上:長期的な売上トレンド(現在は一時的に機能が壊れてしまったので次回修正)
開発の流れ
データを集計するSQLクエリを作成
Flaskでルートを追加
フロントエンドでグラフを描画(Chart.js を使用)
「ダッシュボード用のコードをくれたけど、どこに挿入すればいいかわからない…」

こんな壁にぶつかったものの、AIに質問しながら進めることで解決できました!
実際にページを開いてみると…

すごいやん! これこそAI開発やね! 🎉
3. メニュー分析に挑戦するも…失敗
次に、「売れ筋メニュー」や「注文頻度が高いメニュー」を可視化する機能を作ろうとしました。
しかし、データの取り扱いが難しく、
「メニュー分析、ダメでした…。」

と、今回は実装できず。
ただ、データの整理方法や分析ロジックは明確になったので、次回の課題として進めていきます。
4. ダッシュボードの改修と次回の課題
作ってみたものの、ダッシュボードにはまだまだ改良の余地があります。
次回の改修ポイント
売上分析の月次・年次の復活
メニュー分析の実装
履歴のデータを編集できるようにする
スマホ対応(レスポンシブデザイン)
入力バリデーションの強化
ネット経由でアクセスできるように本番環境を整備
ダッシュボードの実装を進める中で、自分がどんどん「データを活かす楽しさ」に気づいてきました。データの「見える化」が、こんなに便利で楽しいものだとは思いませんでした。
次回は、ダッシュボードをさらにブラッシュアップしながら、売上分析やメニュー分析をもっと使いやすくしていきます!
専門用語一覧

そろそろ終盤ですね、次回もお楽しみに!
