# Create React AppとSpring Bootの初期セットアップガイド

## 目次
1. はじめに
2. セットアップの前提条件
3. Spring Bootプロジェクトの作成
    1. Spring Bootの依存関係の設定
    2. Spring Bootアプリケーションの構成
4. Reactプロジェクトの作成
    1. Reactアプリケーションの生成
    2. プロキシ設定でのバックエンド連携
5. フルスタックアプリの起動と確認
6. REST APIとReactの連携ポイント
7. 主要なトラブルシューティング
8. まとめ

## 1. はじめに
この記事では、Create React Appを用いたフロントエンドとSpring Bootを使ったバックエンドを連携する方法について説明します。このセットアップを通じて、シームレスなデータフローと機能的なフルスタックアプリケーションの構築方法を学ぶことができます。

## 2. セットアップの前提条件
このガイドを進める前に、以下の環境が整っていることを確認してください。
- JDK 11以上
- Node.js 14以上
- npm（Node Package Manager）
- MavenまたはGradleのインストール

## 3. Spring Bootプロジェクトの作成

### 3.1 Spring Bootの依存関係の設定
Spring Initializrを使用して、基本的なSpring Bootプロジェクトを作成します。以下の依存関係を選択してください。
- Spring Web
- Spring Data JPA
- H2 Database (またはお好みのデータベース)

例として、`pom.xml`や`build.gradle`内に必要な依存関係を追加します。

#### Mavenの例：
![img](/mosaic-code.jpg)

### 3.2 Spring Bootアプリケーションの構成
`src/main/resources/application.properties`内でデータベースやサーバーの設定をします。

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

## 4. Reactプロジェクトの作成

### 4.1 Reactアプリケーションの生成
Node.jsがインストールされている状態で、以下のコマンドを実行してCreate React Appを用いたプロジェクトを作成します。

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

### 4.2 プロキシ設定でのバックエンド連携
Reactアプリケーションの`package.json`にプロキシ設定を追加して、Spring BootのAPIと連携します。

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

これにより、ReactアプリケーションからのAPIリクエストが自動的にSpring Bootアプリケーションに転送されます。

## 5. フルスタックアプリの起動と確認
1. Spring Bootアプリケーションを以下のコマンドで起動します。

    ```bash
    mvn spring-boot:run
    ```

    または、Gradleを使用している場合：

    ```bash
    ./gradlew bootRun
    ```

2. 次に、Reactアプリケーションを起動します。

    ```bash
    npm start
    ```

3. ブラウザで`http://localhost:3000`にアクセスし、フロントエンドが正しくレンダリングされてバックエンドと連携できているかを確認します。

## 6. REST APIとReactの連携ポイント
サンプルとして、Spring Bootで作成したREST APIエンドポイント `/api/greeting` とReactアプリからの連携例を示します。Spring Boot側で、以下のようなコントローラーを用意します。

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

React側でAPI対の呼び出しを行うには下記のようにします。

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

## 7. 主要なトラブルシューティング
- **CORSエラーが出る場合**: Spring Boot側でCORS設定を適切に行う必要があります。
- **Reactのプロキシが機能しない**: `package.json`のプロキシ設定を確認し、サーバーが正しく稼働しているかを確認。

## 8. まとめ
Create React AppとSpring Bootの初期セットアップでは、フロントエンドとバックエンドの基礎的な統合を行いました。この環境を整えることで、よりスムーズにフルスタック開発を始められます。次回は、認証や高度なAPI連携について詳しく解説していきます。

このセットアップガイドを参考に、プロフェッショナルなフルスタック開発への一歩を踏み出してください。 [cv:issue_marketplace_engineer]

# Create React AppとSpring Bootの初期セットアップガイド

## 目次
1. はじめに
2. セットアップの前提条件
3. Spring Bootプロジェクトの作成
    1. Spring Bootの依存関係の設定
    2. Spring Bootアプリケーションの構成
4. Reactプロジェクトの作成
    1. Reactアプリケーションの生成
    2. プロキシ設定でのバックエンド連携
5. フルスタックアプリの起動と確認
6. REST APIとReactの連携ポイント
7. 主要なトラブルシューティング
8. まとめ

## 1. はじめに
この記事では、Create React Appを用いたフロントエンドとSpring Bootを使ったバックエンドを連携する方法について説明します。このセットアップを通じて、シームレスなデータフローと機能的なフルスタックアプリケーションの構築方法を学ぶことができます。

## 2. セットアップの前提条件
このガイドを進める前に、以下の環境が整っていることを確認してください。
- JDK 11以上
- Node.js 14以上
- npm（Node Package Manager）
- MavenまたはGradleのインストール

## 3. Spring Bootプロジェクトの作成

### 3.1 Spring Bootの依存関係の設定
Spring Initializrを使用して、基本的なSpring Bootプロジェクトを作成します。以下の依存関係を選択してください。
- Spring Web
- Spring Data JPA
- H2 Database (またはお好みのデータベース)

例として、`pom.xml`や`build.gradle`内に必要な依存関係を追加します。

#### Mavenの例：
```xml
<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
    </dependency>
    <dependency>
        <groupId>com.h2database</groupId>
        <artifactId>h2</artifactId>
        <scope>runtime</scope>
    </dependency>
</dependencies>
```

### 3.2 Spring Bootアプリケーションの構成
`src/main/resources/application.properties`内でデータベースやサーバーの設定をします。

```properties
spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.h2.console.enabled=true
spring.jpa.hibernate.ddl-auto=update
```

## 4. Reactプロジェクトの作成

### 4.1 Reactアプリケーションの生成
Node.jsがインストールされている状態で、以下のコマンドを実行してCreate React Appを用いたプロジェクトを作成します。

```bash
npx create-react-app my-react-app
cd my-react-app
npm start
```

### 4.2 プロキシ設定でのバックエンド連携
Reactアプリケーションの`package.json`にプロキシ設定を追加して、Spring BootのAPIと連携します。

```json
"proxy": "http://localhost:8080"
```

これにより、ReactアプリケーションからのAPIリクエストが自動的にSpring Bootアプリケーションに転送されます。

## 5. フルスタックアプリの起動と確認
1. Spring Bootアプリケーションを以下のコマンドで起動します。

    ```bash
    mvn spring-boot:run
    ```

    または、Gradleを使用している場合：

    ```bash
    ./gradlew bootRun
    ```

2. 次に、Reactアプリケーションを起動します。

    ```bash
    npm start
    ```

3. ブラウザで`http://localhost:3000`にアクセスし、フロントエンドが正しくレンダリングされてバックエンドと連携できているかを確認します。

## 6. REST APIとReactの連携ポイント
サンプルとして、Spring Bootで作成したREST APIエンドポイント `/api/greeting` とReactアプリからの連携例を示します。Spring Boot側で、以下のようなコントローラーを用意します。

```java
@RestController
@RequestMapping("/api")
public class GreetingController {

    @GetMapping("/greeting")
    public String getGreeting() {
        return "Hello from Spring Boot!";
    }
}
```

React側でAPI対の呼び出しを行うには下記のようにします。

```jsx
import React, { useEffect, useState } from 'react';

function App() {
  const [greeting, setGreeting] = useState('');

  useEffect(() => {
    fetch('/api/greeting')
      .then(response => response.text())
      .then(message => setGreeting(message));
  }, []);

  return (
    <div>
      <h1>{greeting}</h1>
    </div>
  );
}

export default App;
```

## 7. 主要なトラブルシューティング
- **CORSエラーが出る場合**: Spring Boot側でCORS設定を適切に行う必要があります。
- **Reactのプロキシが機能しない**: `package.json`のプロキシ設定を確認し、サーバーが正しく稼働しているかを確認。

## 8. まとめ
Create React AppとSpring Bootの初期セットアップでは、フロントエンドとバックエンドの基礎的な統合を行いました。この環境を整えることで、よりスムーズにフルスタック開発を始められます。次回は、認証や高度なAPI連携について詳しく解説していきます。

このセットアップガイドを参考に、プロフェッショナルなフルスタック開発への一歩を踏み出してください。 

Create React AppとSpring Bootの初期セットアップガイド

目次

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