はじめに
UdemyでWeb開発の基本を学んだので、アウトプットのためにオリジナルアプリの作成に取り組みました。その開発記録です。
完成したもの：https://tabimoney-64c36.web.app/
💡 学習した講座
アウトプットにあたり、以下の講座で基礎を固めました。
-
【世界で90万人が受講】Web Developer Bootcamp（日本語版）
講座リンク -
【Reactアプリ開発】3種類のReactアプリケーションを構築して、Reactの理解をさらに深めるステップアップ講座
講座リンク
アプリ概要
アプリ名：Tabi Money
旅行ごとにプロジェクトを作成し、現地の通貨（CZK、EUR、USDなど）で支出を入力すると、最新の為替レートを取得して日本円での合計金額を表示します。
主な機能
- Googleログイン: 自分専用のデータを安全に保持
- 旅行プラン作成: 国ごとの旗アイコン、通貨設定、期間の管理
- 支出のリアルタイム記録: カテゴリー（食費・交通費など）ごとの入力
- 自動為替換算: 外部APIから最新レートを取得し、日本円に変換
- 可視化: 円グラフによる支出内訳の分析
使用した技術スタック
今回の開発では、モダンなフロントエンド開発の流れを汲みつつ、バックエンドの手間を省ける構成にしました。
| カテゴリ | 技術・ツール | 選定理由 |
|---|---|---|
| Frontend | React (Vite) | 高速な開発環境とコンポーネントベースの設計のため |
| Backend | Firebase | 認証(Auth)とDB(Firestore)を爆速で連携させるため |
| API | ExchangeRate-API | 為替レートをシンプルに取得するため |
| Icons | FontAwesome | 直感的なUI（ゴミ箱や家アイコン）のため |
| Hosting | Firebase Hosting | Firebaseプロジェクトとの親和性が高く、公開が容易なため |
🏗️ 手順1：アプリのコンセプト決定とワイヤーフレーム作成
コンセプト
近々、初めてのヨーロッパ旅行を控えているため、「せっかくなら実際に役立つものを作りたい」と考えました。
Geminiと相談しながら、海外旅行用「リアルタイム・予算＆為替管理アプリ」に決定しました。
ワイヤーフレーム（画面イメージ）
Canvaを使用して、画面の遷移や配置のイメージを作成しました。
🛠️ 手順2：環境構築
1. プロジェクトの作成
Viteを使用してプロジェクトを立ち上げます。
/Udemy/Original/TabiMoney
% npm create vite@latest
% npm run dev
🚨 発生したエラー
npm run dev を実行した際、以下のエラーが発生しました。
npm error Missing script: "dev"
【解決策】
ターミナルで ls を実行して確認したところ、package.json が存在するディレクトリと現在の作業階層がズレていたことが原因でした。適切な階層へ移動することで解決しました。
2. ライブラリのインポート
Udemyの講義メモを参考に、FirebaseとReact Routerをインストールしました。
npm install firebase
npm i react-router-dom
3. 各コンポーネントの雛形作成
rafce + Tab キーの補完を活用して、必要な画面の雛形を作成しました。
-
Home.jsx（ホーム画面） -
TripDetail.jsx（詳細画面）
以下実装編