#ReactでSpring Bootから取得したデータをグラフで表示する（Chart.js）

##1-1. 目次
1. 1-2. 背景と目的
2. 1-3. 環境設定
   - 1-3-1. Spring Bootプロジェクトの設定
   - 1-3-2. Reactプロジェクトの設定
3. 1-4. データの取得
   - 1-4-1. Spring BootでのAPI作成
   - 1-4-2. Reactでのデータフェッチ
4. 1-5. データの表示
   - 1-5-1. Chart.jsのインストール
   - 1-5-2. Line Chartの実装
5. 1-6. 最適化と改善
6. 1-7. まとめ

##1-2. 背景と目的

Webアプリケーションでデータを視覚化することは、情報をわかりやすく伝えるために重要です。特に、バックエンドからデータを取得し、フロントエンドで動的に表示するシナリオは多くの開発者にとって共通のニーズです。ここでは、Spring Bootを使用してAPIを作成し、Reactを用いてそのデータを取得して、Chart.jsでグラフとして表示する方法を説明します。この方法は、フルスタック開発を行う際に非常に役立つスキルです。

##1-3. 環境設定

###1-3-1. Spring Bootプロジェクトの設定

Spring Bootのプロジェクトを作成し、必要な依存関係を追加します。主に必要な依存関係としては、Spring Webです。この依存関係は、RESTful APIを作成するために使用されます。

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

このプロジェクトを作成するには、APIエンドポイントを定義し、データを返すコントローラを作成します。例えば、以下のようになります。

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

###1-3-2. Reactプロジェクトの設定

Reactプロジェクトを作成し、必要なパッケージをインストールします。Chart.jsのライブラリとReact用のChart.jsラッパーを使用します。

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

##1-4. データの取得

###1-4-1. Spring BootでのAPI作成

先ほど定義したSpring BootのAPIエンドポイントからデータを取得するために、Spring Bootアプリケーションを起動します。

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

APIを発行する際にCORSポリシーを許可する必要がある場合は、`WebMvcConfigurer`を実装し、CORSを設定します。

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

###1-4-2. Reactでのデータフェッチ

フロントエンドでは、`axios`を使ってデータを取得します。

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

##1-5. データの表示

###1-5-1. Chart.jsのインストール

先に行った設定でChart.jsを使用できるようになっています。次に、データをグラフとして表示するために、`Line`または他のチャートを使います。

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

###1-5-2. Line Chartの実装

以下のように`App.js`に組み込んで使います。

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

##1-6. 最適化と改善

- **エラーハンドリングと再試行**: ネットワークエラーハンドリングやAPIリクエストの再試行を組み込むことで、通信の安定性を向上させます。
- **レスポンスのキャッシング**: 再度データを取得する際のレスポンスタイムを改善するためにデータキャッシングを検討します。
- **アニメーションとインタラクション**: ユーザーインターフェースとしての魅力を高めるため、Chart.jsのアニメーションとインタラクションを活用します。
- **データの整形**: ビジュアリゼーションのためにデータを整形する場合、必要に応じてユーティリティ関数を用意します。

##1-7. まとめ

今回は、Spring Bootでデータを管理し、Reactでそれを表示するフルスタックアプローチを通じて、データビジュアリゼーションの基本的なプロジェクトを作成しました。このプロセスを通じて、Spring BootによるAPI作成、Reactによるフロントエンド設計、Chart.jsを使ったグラフの表示という一連の流れを学ぶことができました。これらの技術を組み合わせることで、データの視覚化を通じたユーザーインターフェースの充実を計ることができます。 [cv:issue_marketplace_engineer]

#ReactでSpring Bootから取得したデータをグラフで表示する（Chart.js）

##1-1. 目次
1. 1-2. 背景と目的
2. 1-3. 環境設定
   - 1-3-1. Spring Bootプロジェクトの設定
   - 1-3-2. Reactプロジェクトの設定
3. 1-4. データの取得
   - 1-4-1. Spring BootでのAPI作成
   - 1-4-2. Reactでのデータフェッチ
4. 1-5. データの表示
   - 1-5-1. Chart.jsのインストール
   - 1-5-2. Line Chartの実装
5. 1-6. 最適化と改善
6. 1-7. まとめ

##1-2. 背景と目的

Webアプリケーションでデータを視覚化することは、情報をわかりやすく伝えるために重要です。特に、バックエンドからデータを取得し、フロントエンドで動的に表示するシナリオは多くの開発者にとって共通のニーズです。ここでは、Spring Bootを使用してAPIを作成し、Reactを用いてそのデータを取得して、Chart.jsでグラフとして表示する方法を説明します。この方法は、フルスタック開発を行う際に非常に役立つスキルです。

##1-3. 環境設定

###1-3-1. Spring Bootプロジェクトの設定

Spring Bootのプロジェクトを作成し、必要な依存関係を追加します。主に必要な依存関係としては、Spring Webです。この依存関係は、RESTful APIを作成するために使用されます。

```xml
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
```

このプロジェクトを作成するには、APIエンドポイントを定義し、データを返すコントローラを作成します。例えば、以下のようになります。

```java
@RestController
@RequestMapping("/api")
public class DataController {
    @GetMapping("/data")
    public List<DataPoint> getData() {
        return List.of(
            new DataPoint("2023-01-01", 100),
            new DataPoint("2023-01-02", 150),
            new DataPoint("2023-01-03", 200)
        );
    }
}

class DataPoint {
    private String date;
    private int value;

    // Constructors, getters, and setters
}
```

###1-3-2. Reactプロジェクトの設定

Reactプロジェクトを作成し、必要なパッケージをインストールします。Chart.jsのライブラリとReact用のChart.jsラッパーを使用します。

```
npx create-react-app my-app
cd my-app
npm install chart.js react-chartjs-2
```

##1-4. データの取得

###1-4-1. Spring BootでのAPI作成

先ほど定義したSpring BootのAPIエンドポイントからデータを取得するために、Spring Bootアプリケーションを起動します。

```bash
./mvnw spring-boot:run
```

APIを発行する際にCORSポリシーを許可する必要がある場合は、`WebMvcConfigurer`を実装し、CORSを設定します。

```java
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("http://localhost:3000");
    }
}
```

###1-4-2. Reactでのデータフェッチ

フロントエンドでは、`axios`を使ってデータを取得します。

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

function App() {
    const [chartData, setChartData] = useState([]);

    useEffect(() => {
        axios.get('http://localhost:8080/api/data')
            .then(response => {
                setChartData(response.data);
            })
            .catch(error => console.error(`Error: ${error}`));
    }, []);
}
```

##1-5. データの表示

###1-5-1. Chart.jsのインストール

先に行った設定でChart.jsを使用できるようになっています。次に、データをグラフとして表示するために、`Line`または他のチャートを使います。

```javascript
import React from 'react';
import { Line } from 'react-chartjs-2';

const ChartComponent = ({data}) => {
    const chartData = {
        labels: data.map(dp => dp.date),
        datasets: [
            {
                label: 'Value Over Time',
                data: data.map(dp => dp.value),
                borderColor: 'rgba(75,192,192,1)',
                fill: false,
            }
        ]
    };

    return <Line data={chartData} />;
};
```

###1-5-2. Line Chartの実装

以下のように`App.js`に組み込んで使います。

```javascript
function App() {
    const [chartData, setChartData] = useState([]);

    useEffect(() => {
        axios.get('http://localhost:8080/api/data')
            .then(response => {
                setChartData(response.data);
            })
            .catch(error => console.error(`Error: ${error}`));
    }, []);

    return (
        <div>
            <h1>React Chart Example</h1>
            {chartData.length > 0 && <ChartComponent data={chartData} />}
        </div>
    );
}

export default App;
```

##1-6. 最適化と改善

- **エラーハンドリングと再試行**: ネットワークエラーハンドリングやAPIリクエストの再試行を組み込むことで、通信の安定性を向上させます。
- **レスポンスのキャッシング**: 再度データを取得する際のレスポンスタイムを改善するためにデータキャッシングを検討します。
- **アニメーションとインタラクション**: ユーザーインターフェースとしての魅力を高めるため、Chart.jsのアニメーションとインタラクションを活用します。
- **データの整形**: ビジュアリゼーションのためにデータを整形する場合、必要に応じてユーティリティ関数を用意します。

##1-7. まとめ

今回は、Spring Bootでデータを管理し、Reactでそれを表示するフルスタックアプローチを通じて、データビジュアリゼーションの基本的なプロジェクトを作成しました。このプロセスを通じて、Spring BootによるAPI作成、Reactによるフロントエンド設計、Chart.jsを使ったグラフの表示という一連の流れを学ぶことができました。これらの技術を組み合わせることで、データの視覚化を通じたユーザーインターフェースの充実を計ることができます。 

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