React + Spring Framework + MongoDBでアプリ作成④

はじめに

この記事は以下の記事の続きです。

今回はフロントエンドにMongoDBのデータを表示させる手順を中心に共有していきます。

以下の記事で紹介したデータを画面上に表示させる設定を行なっていきますので、ハンズオンを進める場合はこちらの記事も参考にしてください。
https://qiita.com/acu8/items/7ccd3247dfbe39bc0b5c

フロントエンドの実装

今まではApp.tsxのみ使用して画面表示をしていましたが、今回はコンポーネントを作成してApp.tsxにインポートして画面表示させたいと思います。

UserList.tsx

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

interface User {
  id: string;
  name: string;
  email: string;
}

const UserList: React.FC = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.get('http://localhost:8080/api/users');
        setUsers(response.data);
        setLoading(false);
      } catch (err) {
        setError('ユーザーデータの取得に失敗しました');
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">ユーザー一覧</h1>
      <div className="grid gap-4">
        {users.map(user => (
          <div key={user.id} className="border p-4 rounded shadow">
            <h2 className="font-bold">{user.name}</h2>
            <p className="text-gray-600">{user.email}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default UserList;

App.tsxにインポートします。

App.tsx

import UserList from "./components/UserList";
import "./App.css";

function App() {
  return (
    <div>
      <UserList />
    </div>
  );
}

export default App;

バックエンドとフロントエンドの両方を以下のコマンドで起動して、データが取得できているか確認しましょう。

バックエンド起動

./mvnw spring-boot:run

フロントエンド起動

npm run dev

画面に以下のようなデータが表示されていれば成功です。

おわりに

今回でこのシリーズが完了です。
今までJavaやReactを利用する時はそれぞれフロントからバックエンドまで一貫して同じ言語やフレームワークだったので、今回のように2つの言語を違うフレームワークを利用する経験はいい学習の機会になりました。
あまり参考にできるリソースがなかったので、今回のシリーズが今後アプリ開発をする人の参考になれば幸いです！

参考

今回ご紹介したコードはこちらに公開しています。
https://github.com/acu8/react-spring-mongoapp

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼