## 目次

1. はじめに
2. プロジェクトの準備
   2.1 Spring Boot プロジェクトのセットアップ
   2.2 React アプリケーションの準備
3. バックエンド機能の実装
   3.1 エンティティとリポジトリの作成
   3.2 RESTful API の作成
4. フロントエンド機能の実装
   4.1 日報投稿画面の作成
   4.2 日報一覧画面の作成
5. バックエンドとフロントエンドの接続
   5.1 CORS 設定
   5.2 API 通信の実装
6. デプロイと運用
   6.1 デプロイ戦略
   6.2 運用とメンテナンス
7. まとめ

## 1. はじめに

本記事では、Spring Boot をバックエンドに、React をフロントエンドに使用した日報投稿と一覧表示の機能を実装する方法について詳しく解説します。Spring Boot は Java ベースの効率的なバックエンドフレームワークで、一方、React はユーザーインターフェースを構築するための JavaScript ライブラリです。それぞれの強みを活かし、日報を管理するアプリケーションを構築します。

## 2. プロジェクトの準備

### 2.1 Spring Boot プロジェクトのセットアップ

まず、Spring Initializr を使用して新しい Spring Boot プロジェクトを作成します。プロジェクトには以下の依存関係を追加します：

- Spring Web
- Spring Data JPA
- H2 Database (開発用)
- Lombok

#### プロジェクトストラクチャ

プロジェクトの基本的なストラクチャは次のようになります：

![img](/mosaic-code.jpg)

### 2.2 React アプリケーションの準備

React プロジェクトを作成するには Create React App を利用します。ターミナルで以下のコマンドを実行してプロジェクトを作成します：

![img](/mosaic-code.jpg)

プロジェクトのディレクトリ構造は以下のようになります：

![img](/mosaic-code.jpg)

## 3. バックエンド機能の実装

### 3.1 エンティティとリポジトリの作成

日報を表すエンティティを定義します。

![img](/mosaic-code.jpg)

リポジトリインタフェースを作成し、JpaRepository を拡張します。

![img](/mosaic-code.jpg)

### 3.2 RESTful API の作成

コントローラークラスを作成して API エンドポイントを定義します。

![img](/mosaic-code.jpg)

## 4. フロントエンド機能の実装

### 4.1 日報投稿画面の作成

日報を投稿するための簡単なフォームを作成します。

![img](/mosaic-code.jpg)

### 4.2 日報一覧画面の作成

保存された日報を一覧表示するコンポーネントを作成します。

![img](/mosaic-code.jpg)

## 5. バックエンドとフロントエンドの接続

### 5.1 CORS 設定

バックエンドの CORS 設定を行います。これにより、React アプリがバックエンド API にアクセスできます。

![img](/mosaic-code.jpg)

### 5.2 API 通信の実装

Axios を使用して、フロントエンドからバックエンドへの通信を行います。 

## 6. デプロイと運用

### 6.1 デプロイ戦略

Spring Boot と React アプリケーションを同じサーバにデプロイすることで管理を一元化できます。Spring Boot アプリケーションの静的ファイルディレクトリに React アプリのビルド成果物を配置します。

### 6.2 運用とメンテナンス

デプロイ後のアプリケーションの監視には、ログの分析やエラーハンドリングが重要です。また、定期的なセキュリティアップデートも行いましょう。

## 7. まとめ

Spring Boot と React を組み合わせることで、堅牢でスケーラブルな Web アプリケーションを構築できます。本記事で紹介した日報投稿・一覧機能の実装を通して、バックエンドとフロントエンドの接続、CORS の設定、エンティティの管理方法などを理解できたと思います。これをきっかけに、さらなる機能追加や改善へと発展させてください。 [cv:issue_marketplace_engineer]

## 目次

1. はじめに
2. プロジェクトの準備
   2.1 Spring Boot プロジェクトのセットアップ
   2.2 React アプリケーションの準備
3. バックエンド機能の実装
   3.1 エンティティとリポジトリの作成
   3.2 RESTful API の作成
4. フロントエンド機能の実装
   4.1 日報投稿画面の作成
   4.2 日報一覧画面の作成
5. バックエンドとフロントエンドの接続
   5.1 CORS 設定
   5.2 API 通信の実装
6. デプロイと運用
   6.1 デプロイ戦略
   6.2 運用とメンテナンス
7. まとめ

## 1. はじめに

本記事では、Spring Boot をバックエンドに、React をフロントエンドに使用した日報投稿と一覧表示の機能を実装する方法について詳しく解説します。Spring Boot は Java ベースの効率的なバックエンドフレームワークで、一方、React はユーザーインターフェースを構築するための JavaScript ライブラリです。それぞれの強みを活かし、日報を管理するアプリケーションを構築します。

## 2. プロジェクトの準備

### 2.1 Spring Boot プロジェクトのセットアップ

まず、Spring Initializr を使用して新しい Spring Boot プロジェクトを作成します。プロジェクトには以下の依存関係を追加します：

- Spring Web
- Spring Data JPA
- H2 Database (開発用)
- Lombok

#### プロジェクトストラクチャ

プロジェクトの基本的なストラクチャは次のようになります：

```
src/
└── main/
    ├── java/
    │   └── com.example.dailyreport/
    │       ├── controller/
    │       ├── model/
    │       ├── repository/
    │       ├── service/
    │       └──  DailyReportApplication.java
    └── resources/
        ├── application.properties
        └── static/
```

### 2.2 React アプリケーションの準備

React プロジェクトを作成するには Create React App を利用します。ターミナルで以下のコマンドを実行してプロジェクトを作成します：

```bash
npx create-react-app daily-report-client
```

プロジェクトのディレクトリ構造は以下のようになります：

```
daily-report-client/
├── public/
├── src/
│   ├── components/
│   ├── services/
│   ├── App.js
│   ├── index.js
│   └── ...
└── package.json
```

## 3. バックエンド機能の実装

### 3.1 エンティティとリポジトリの作成

日報を表すエンティティを定義します。

```java
// src/main/java/com/example/dailyreport/model/Report.java
package com.example.dailyreport.model;

import lombok.Data;
import javax.persistence.*;

@Data
@Entity
public class Report {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(nullable = false)
    private String title;

    @Column(nullable = false)
    private String content;

    @Column(nullable = false)
    private String author;

    @Column(nullable = false)
    private LocalDate date = LocalDate.now();
}
```

リポジトリインタフェースを作成し、JpaRepository を拡張します。

```java
// src/main/java/com/example/dailyreport/repository/ReportRepository.java
package com.example.dailyreport.repository;

import com.example.dailyreport.model.Report;
import org.springframework.data.jpa.repository.JpaRepository;

public interface ReportRepository extends JpaRepository<Report, Long> {
}
```

### 3.2 RESTful API の作成

コントローラークラスを作成して API エンドポイントを定義します。

```java
// src/main/java/com/example/dailyreport/controller/ReportController.java
package com.example.dailyreport.controller;

import com.example.dailyreport.model.Report;
import com.example.dailyreport.repository.ReportRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/reports")
public class ReportController {

    @Autowired
    private ReportRepository repository;

    @GetMapping
    public List<Report> getAllReports() {
        return repository.findAll();
    }

    @PostMapping
    public Report createReport(@RequestBody Report report) {
        return repository.save(report);
    }
}
```

## 4. フロントエンド機能の実装

### 4.1 日報投稿画面の作成

日報を投稿するための簡単なフォームを作成します。

```javascript
// src/components/ReportForm.js
import React, { useState } from 'react';
import axios from 'axios';

function ReportForm() {
    const [report, setReport] = useState({
        title: '',
        content: '',
        author: ''
    });

    const handleChange = (e) => {
        const { name, value } = e.target;
        setReport({ ...report, [name]: value });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            await axios.post('/api/reports', report);
            // Handle success
        } catch (error) {
            console.error('Error creating report:', error);
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" name="title" value={report.title} onChange={handleChange} placeholder="Title" required />
            <input type="text" name="author" value={report.author} onChange={handleChange} placeholder="Author" required />
            <textarea name="content" value={report.content} onChange={handleChange} placeholder="Content" required />
            <button type="submit">Submit</button>
        </form>
    );
}

export default ReportForm;
```

### 4.2 日報一覧画面の作成

保存された日報を一覧表示するコンポーネントを作成します。

```javascript
// src/components/ReportList.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

function ReportList() {
    const [reports, setReports] = useState([]);

    useEffect(() => {
        const fetchReports = async () => {
            try {
                const response = await axios.get('/api/reports');
                setReports(response.data);
            } catch (error) {
                console.error('Error fetching reports:', error);
            }
        };
        fetchReports();
    }, []);

    return (
        <div>
            <h2>Report List</h2>
            <ul>
                {reports.map(report => (
                    <li key={report.id}>
                        <h3>{report.title}</h3>
                        <p>{report.content}</p>
                        <p>{report.author}</p>
                        <p>{report.date}</p>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default ReportList;
```

## 5. バックエンドとフロントエンドの接続

### 5.1 CORS 設定

バックエンドの CORS 設定を行います。これにより、React アプリがバックエンド API にアクセスできます。

```java
// src/main/java/com/example/dailyreport/config/WebConfig.java
package com.example.dailyreport.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**").allowedOrigins("http://localhost:3000");
            }
        };
    }
}
```

### 5.2 API 通信の実装

Axios を使用して、フロントエンドからバックエンドへの通信を行います。 

## 6. デプロイと運用

### 6.1 デプロイ戦略

Spring Boot と React アプリケーションを同じサーバにデプロイすることで管理を一元化できます。Spring Boot アプリケーションの静的ファイルディレクトリに React アプリのビルド成果物を配置します。

### 6.2 運用とメンテナンス

デプロイ後のアプリケーションの監視には、ログの分析やエラーハンドリングが重要です。また、定期的なセキュリティアップデートも行いましょう。

## 7. まとめ

Spring Boot と React を組み合わせることで、堅牢でスケーラブルな Web アプリケーションを構築できます。本記事で紹介した日報投稿・一覧機能の実装を通して、バックエンドとフロントエンドの接続、CORS の設定、エンティティの管理方法などを理解できたと思います。これをきっかけに、さらなる機能追加や改善へと発展させてください。 

目次

続きを読むには単価診断を受けてください（30秒）