「フルスタック開発」と聞いて、あなたはどんなイメージを持つでしょうか？フロントエンドもバックエンドも両方こなす、スーパーエンジニア…そう、難しそうに聞こえますよね。しかし、現代のフレームワークとツールを使えば、そのハードルは驚くほど低くなっています。この記事では、フロントエンドのReactとバックエンドのJava（Spring）という黄金コンビを使って、Webの基本である「Web API連携」を体験する手順を、ブログ編集長である私がどこよりも分かりやすく解説します。この記事を読めば、あなたは単なるWebサイト制作から一歩進んだ、本格的なアプリケーション開発の第一歩を踏み出せるはずです。
目次
- はじめに：フルスタック開発の魅力
- 前提知識：何が必要？
- ステップ1：バックエンド（Spring）APIの作成
- ステップ2：フロントエンド（React）アプリケーションの作成
- 実践！ブラウザに「Hello, World!」を表示
- よくある問題と解決策：CORSエラーとは？
- まとめ：今後の学習ロードマップ
はじめに：フルスタック開発の魅力
現代のWebアプリケーションは、ユーザーの目に触れる「フロントエンド」と、データの処理や管理を行う「バックエンド」に分かれて構成されるのが一般的です。これらを一気通貫で開発する「フルスタック開発」は、エンジニアとしての市場価値を高めるだけでなく、サービス全体を俯瞰できる力を養います。今回は、フロントエンドにReact、バックエンドにJava（Spring）を使用し、両者が連携する仕組みを「Hello, World!」というシンプルな実践例を通して学びます。
前提知識：何が必要？
今回のプロジェクトを始める前に、以下のツールがPCにインストールされていることを確認してください。
- Java 17 (JDK)：Springアプリケーションの実行環境です。
- Maven：Javaプロジェクトのビルドと依存関係を管理するツールです。
- Node.js & npm：Reactアプリケーションの実行環境です。
- WSL2：Windowsユーザーは、Linux環境上で開発を行うために必須です。
これらの環境設定は、開発の第一歩として非常に重要です。
ステップ1：バックエンド（Spring）APIの作成
まず、Webブラウザからアクセスすると「Hello, World!」という文字列を返すWeb APIを構築します。
プロジェクトのひな形作成
WebブラウザでSpring Initializrにアクセスします。
- Project: Maven
- Language: Java
- Java: 17
- Dependencies: Spring Webを追加
これらの設定でプロジェクトをダウンロードし、WSL2のディレクトリに展開します。
APIコントローラーの作成
展開したプロジェクトのsrc/main/java/ディレクトリ内に、HelloController.javaというクラスを作成し、以下のコードを記述します。
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class HelloController {
@GetMapping("/api/hello")
public String hello() {
return "Hello, World!";
}
}
@RestControllerと@GetMappingアノテーションにより、/api/helloというURLへのリクエストがこのメソッドにマッピングされます。
CORS設定の追加
フロントエンドとバックエンドが異なるポートで通信するため、CORS（Cross-Origin Resource Sharing）の許可設定が必要です。CorsConfig.javaというクラスを作成し、以下のコードを追加してください。
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 CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:3000") // React開発サーバーのURL
.allowedMethods("GET");
}
}
バックエンドの起動と確認
WSL2のターミナルでSpringプロジェクトのルートディレクトリに移動し、mvn spring-boot:runコマンドを実行します。ブラウザでhttp://localhost:8080/api/helloにアクセスし、「Hello, World!」と表示されれば成功です。
ステップ2：フロントエンド（React）アプリケーションの作成
次に、ブラウザに表示するReactアプリケーションを作成します。
プロジェクトの作成
新しいターミナルタブで、npx create-react-app my-react-appを実行します。完了したらcd my-react-appでプロジェクトディレクトリに移動します。
API呼び出しコードの追加
src/App.jsファイルを開き、既存のコードを以下のように置き換えます。
import React, { useState, useEffect } from 'react';
function App() {
const [message, setMessage] = useState('');
useEffect(() => {
fetch('http://localhost:8080/api/hello') // SpringのAPIにアクセス
.then(response => response.text())
.then(data => setMessage(data))
.catch(error => console.error('Error fetching data:', error));
}, []);
return (
{message}
);
}
export default App;
useEffectフック内でfetchAPIを使用し、バックエンドからデータを取得して画面に表示しています。
Reactの起動と確認
npm startコマンドを実行します。ブラウザが自動的に開き、「Hello, World!」と表示されれば成功です。これで、ReactとSpringの連携が正常に機能していることが確認できました。
よくある問題と解決策：CORSエラーとは？
もしReactからAPIを呼び出した際に「CORS policy」関連のエラーが出た場合、それはブラウザのセキュリティ機能が原因です。ブラウザは、異なるポート（今回は3000と8080）間の通信をデフォルトでブロックします。
解決策は、上記のCORS設定です。Spring側でReactからのアクセスを明示的に許可する設定を行うことで、ブラウザは安全な通信だと判断し、ブロックを解除します。
まとめ・結論
この記事では、ReactとSpringを使って「Hello, World!」を表示するシンプルなアプリケーションの構築を通して、フルスタック開発の基本を学びました。バックエンドとフロントエンドが連携する仕組みを理解できたことは、これからの開発における大きな自信となるはずです。
今後の学習ロードマップ
このプロジェクトをベースに、さらにスキルアップを目指しましょう。
- 動的なデータのやり取り：JSON形式でのデータ送受信を実装し、より複雑な情報をやり取りするWebアプリケーションを作成する。
- データベース連携：MySQLなどのデータベースを導入し、データを永続的に管理する仕組みを構築する。
次のステップに進むための具体的なサポートが必要であれば、いつでもご相談ください。共にあなたのキャリアを次のステージへと進めていきましょう。