今回は、PostgreSQLを使った家計簿アプリのバックエンドをSpring Bootで構築し、Reactでフロントエンドを作成します。Eclipseを使って開発することを想定し、PostgreSQL用の設定も含めて解説します。
今回の記事のソースコード
1. 環境構築
バックエンド：Spring Bootプロジェクトの作成（Eclipse使用）
Eclipseを起動し、Spring Initializrで新規プロジェクトを作成します。
必要な依存関係：
Spring Web
Spring Data JPA
PostgreSQL Driver
2. PostgreSQLのセットアップ
PostgreSQLのインストール
公式サイトからPostgreSQLをインストールします。
データベースとユーザーの作成
CREATE DATABASE kakeibo;
CREATE USER kakeibo_user WITH ENCRYPTED PASSWORD 'password';
GRANT ALL PRIVILEGES ON DATABASE kakeibo TO kakeibo_user;
PostgreSQLサーバーを起動し、kakeiboデータベースが作成されていることを確認します。
3. Spring Bootの設定（PostgreSQL対応）
application.propertiesの設定
spring.datasource.url=jdbc:postgresql://localhost:5432/kakeibo
spring.datasource.username=kakeibo_user
spring.datasource.password=password
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.PostgreSQLDialect
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
4. エンティティの作成
Expense.java
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
@Entity
public class Expense {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String description;
private int amount;
// コンストラクタ、ゲッター、セッター
public Expense() {}
public Expense(String description, int amount) {
this.description = description;
this.amount = amount;
}
public Long getId() { return id; }
public String getDescription() { return description; }
public int getAmount() { return amount; }
public void setDescription(String description) { this.description = description; }
public void setAmount(int amount) { this.amount = amount; }
}
5. リポジトリとコントローラの作成
ExpenseRepository.java
import org.springframework.data.jpa.repository.JpaRepository;
public interface ExpenseRepository extends JpaRepository<Expense, Long> {}
ExpenseController.java
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/api/expenses")
public class ExpenseController {
private final ExpenseRepository expenseRepository;
public ExpenseController(ExpenseRepository expenseRepository) {
this.expenseRepository = expenseRepository;
}
@GetMapping
public List<Expense> getAllExpenses() {
return expenseRepository.findAll();
}
@PostMapping
public Expense createExpense(@RequestBody Expense expense) {
return expenseRepository.save(expense);
}
@DeleteMapping("/{id}")
public void deleteExpense(@PathVariable Long id) {
expenseRepository.deleteById(id);
}
}
6. フロントエンドの設定（React）
プロジェクトの作成と依存パッケージのインストール
npx create-react-app kakeibo-app --template typescript
cd kakeibo-app
npm install axios chart.js react-chartjs-2
ReactのApp.tsx
import React, { useEffect, useState } from 'react';
import axios from 'axios';
interface Expense {
id: number;
description: string;
amount: number;
}
const App: React.FC = () => {
const [expenses, setExpenses] = useState<Expense[]>([]);
const [description, setDescription] = useState('');
const [amount, setAmount] = useState(0);
useEffect(() => {
fetchExpenses();
}, []);
const fetchExpenses = async () => {
const response = await axios.get('/api/expenses');
setExpenses(response.data);
};
const addExpense = async () => {
await axios.post('/api/expenses', { description, amount });
fetchExpenses();
};
const deleteExpense = async (id: number) => {
await axios.delete(`/api/expenses/${id}`);
fetchExpenses();
};
return (
<div className="App">
<h1>家計簿アプリ</h1>
<input
type="text"
placeholder="説明"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<input
type="number"
placeholder="金額"
value={amount}
onChange={(e) => setAmount(Number(e.target.value))}
/>
<button onClick={addExpense}>追加</button>
<ul>
{expenses.map((expense) => (
<li key={expense.id}>
{expense.description}: {expense.amount}円
<button onClick={() => deleteExpense(expense.id)}>削除</button>
</li>
))}
</ul>
</div>
);
};
export default App;
バックエンドとフロントエンドの接続
package.jsonにプロキシ設定
ReactからSpring BootのAPIを呼び出すために、package.jsonにプロキシを設定します。
"proxy": "http://localhost:8080"
7. 動作確認
PostgreSQLを起動し、kakeiboデータベースが正常に作成されていることを確認します。
Spring Bootを起動します。
mvn spring-boot:run
Reactを起動します。
npm start
ブラウザでhttp://localhost:3000にアクセスし、家計簿アプリが表示されることを確認します。
8. まとめ
今回の家計簿アプリでは、Spring Bootを使ってバックエンドを構築し、PostgreSQLをデータベースに使用しました。ReactからAPIを呼び出してデータを表示・追加・削除することで、フロントエンドとバックエンドを連携させました。
今後の拡張例
認証機能の追加：JWTを使ったログイン機能
カテゴリ別の管理：支出をカテゴリに分類
グラフ表示の強化：月別・年別の支出グラフの追加
今回は家計簿アプリを作ったものを記事にしました。
毎日更新していますので、@y-t0910をフォロー,いいねしていただけると嬉しいです。
