Renewable Energy Dashboard
再生可能エネルギーの普及状況を可視化するダッシュボード
プロジェクト概要
目的
世界および各地域の再生可能エネルギー導入の推移を可視化。再生可能エネルギー（太陽光・風力・水力・バイオエネルギー等）のシェアや発電量の変化を、グラフで直感的に把握できます
開発背景
このダッシュボード開発を通じて、単に技術を習得するだけでなく、現実のデータに触れ、それをどのようにユーザーに分かりやすく提示するかという実践的な思考力を養うことを目指しました。特に、再生可能エネルギーの普及率や地域ごとの進捗状況について、漠然としたイメージだけでなく、具体的なデータに基づいて分析し可視化する過程そのものが大きな学びとなると考え、このダッシュボードの作成に着手しました
プロジェクト画像
メイン画面 - 再生可能エネルギーの推移グラフ
詳細画面 - 地域別・エネルギー源別の分析
技術詳細
使用技術
Next.js 15
TypeScript
Tailwind CSS
Papaparse（CSVデータ処理）
Recharts（グラフ描画）
開発期間
2025年7月 - 2025年7月（1週間）
開発体制
個人開発
デプロイ
Vercel
主な機能
計算機能
- • 地域別・年別の再生可能エネルギー比率の推移（折れ線グラフ）
- • エネルギー源ごとの発電量推移（折れ線グラフ、地域選択可）
- • 特定年のエネルギー源別構成（積み上げ棒グラフ）
- • 特定地域のエネルギー源別構成（円グラフ）
UI/UX機能
- • サイドバーによるページナビゲーション
- • レスポンシブデザイン
- • グラフ描画
開発過程
1
要件定義・設計
Our World In Dataのデータを参考に、何のデータを可視化するかを選定。元となるCSVデータの構造を理解し、どのようにグラフ化するかを設計しました。
2
フロントエンド開発
PapaParseおよびRechartを利用して、CSVデータからグラフ描画を実装。Tailwind CSSを使用して、シンプルで直感的なUIを構築しました。また、ダッシュボード風のUI/UXを選びました。
3
テスト・デプロイ
基本的な動作確認を実施し、Vercelでデプロイ。個人開発として機能を完成させました。
成果・学び
技術的な学び
- • Papaparse（CSVデータ解析）やRecharts（チャート描画）といったライブラリの導入
- • TypeScriptの型安全性の重要性
- • データ整理とデータ選定の際の設計の重要性
プロダクト面の学び
- • 客観的なデータの選定
- • データの可視化の難しさ
- • 短時間での効率的な開発
- • サイドバーでの情報へのアクセス向上