Java × React × Dockerで簡易アプリ作るよ

import { useState } from "react";
import "./App.css";
import axios from "axios";

// 取得データのタイプ
type Data = {
  id: number;
  name: string;
};

const App = () => {
  // データ
  const [userData, setUserData] = useState<Data[]>([]);

  //データ取得
  const getData = () => {
    axios
      .get("/sample")
      .then((response) => {
        setUserData(response.data);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  return (
    <div className="App">
      <h2>データ取得ボタン</h2>
      <button onClick={getData}>データ取得</button>
      {userData.map((data) => (
        <ul key={data.id}>
          <li>{data.id}</li>
          <li>{data.name}</li>
        </ul>
      ))}
    </div>
  );
};

export default App;

package com.example.demo.entity;
import jakarta.persistence.Entity;
import jakarta.persistence.Id;
import jakarta.persistence.Table;


@Entity
@Table(name="User")
public class User {
	
	//モデルの定義
	
	@Id
	private Integer id;
	private String name;
	private String email;
	
	
	// 値を返す用の関数
	public Integer getId() {
		return id;
	}
	
	public String getName() {
		return name;
	}
	
	public String gatEmail() {
		return email;
	}
}

package com.example.demo.repository;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import com.example.demo.entity.User;

import jakarta.persistence.EntityManager;
import jakarta.persistence.EntityManagerFactory;

@Repository
public class SampleRepository {
	
	@Autowired
	private EntityManagerFactory entityManagerFactory;
	
	// findAll()でUserのデータを取り出し、List型に代入する処理を定義している
	@SuppressWarnings("unchecked")
	public List<User> findAll() {
		
		// userListの定義
		List<User> userList = null;
		
		// EntityManagerの開始
		// EntityManagerは「DB操作パッケージ」のようなもの
		EntityManager entityManager = entityManagerFactory.createEntityManager();

	    try {
	        // トランザクションの開始
	        entityManager.getTransaction().begin();

	        // Userエンティティから全てのデータを取得し、userListに代入
	        // createQueryは本来createQuery("Select * FROM User")やcreateQuery("Select u.name FROM User u")と記述するが、
	        // 「SELECT *」の場合は省略して「FROM Uuser」と書くことができる
	        userList = entityManager.createQuery("from User").getResultList();
	        
	        // トランザクションのコミット（データベースへの変更を確定）
	        entityManager.getTransaction().commit();

	    } catch (Exception e) {
	        // エラーがあればロールバック（データベースへの変更を取り消し）
	        entityManager.getTransaction().rollback();
	        
	        // エラーを吐く（エラーの詳細情報を出力）
	        e.printStackTrace();
	    } finally {
	        // EntityManagerの終了（リソースの解放）
	        entityManager.close();
	    }
	    
	    // 取得したUserエンティティのリストを返す
	    // 失敗時はnull, 成功時はuserのデータが入ったList
	    return userList;
	}
}

package com.example.demo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.demo.entity.User;
import com.example.demo.repository.SampleRepository;

@RestController
public class SampleContoller {
	@Autowired
	private SampleRepository userRepository;
	
	@GetMapping("/sample")
	public List<User> getUser(){
		return userRepository.findAll();
	}
}

version: "3.7"

services:
  mysql:
    image: mysql:8.0
    environment:
      - MYSQL_ROOT_PASSWORD=sample
      - MYSQL_DATABASE=sampleDB
      - MYSQL_USER=sampleUser
      - MYSQL_PASSWORD=password
    ports:
      - "3306:3306"
    volumes:
      - ./init:/docker-entrypoint-initdb.d/

CREATE TABLE IF NOT EXISTS user (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL
);

INSERT INTO user(name, email)
VALUES ('John', 'John@gmail.com'),
       ('Tanaka', 'Tanaka@gmail.com');