Node.js（Express）とReactを使用したアプリ開発

Webアプリケーションを開発する際、Node.js（Express）をバックエンド、Reactをフロントエンドとして使用することで、効率的な開発が可能になります。以下では、アプリ開発の基本手順とそれぞれのフォルダ構成について解説します。

各フォルダ構成

メイン

アプリ名/
├── backend    //バックエンドのフォルダ
├── frontend   // フロントエンドのフォルダ

backend

backend/
├── app.js          // サーバーのメインロジックを記述
├── package.json    // プロジェクトの依存関係とスクリプトを管理
├── node_modules/   // npmでインストールした依存パッケージ

frontend

frontend/
├── src/                    // Reactアプリケーションのソースコードを配置
│   ├── App.js              // アプリケーションのメインコンポーネント
│   ├── index.js            // アプリケーションのエントリーポイント
│   └── components/         // 必要に応じてコンポーネントを分けるディレクトリ（任意）
├── public/                 // 静的ファイルを配置
│   ├── index.html          // ReactアプリをレンダリングするHTMLテンプレート
│   ├── favicon.ico         // サイトアイコン
├── package.json            // プロジェクトの依存関係とスクリプトを管理
├── node_modules/           // npmでインストールした依存パッケージ

アプリ開発の基本ステップ

ステップ1: バックエンド（Node.js）プロジェクトのセットアップ

メインとなるアプリフォルダの中にバックエンドプロジェクトを作成します。

cd 作成する任意のフォルダパス　//

mkdir backend

作成したフォルダに移動

cd backend

必要なパッケージをインストールします。

npm init -y

npm install express cors

以下のコードをbackendフォルダ直下に「app.js」として作成します。

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());
app.use(express.json());

let users = [
    { id: 1, name: '山田太郎' },
    { id: 2, name: '鈴木花子' }
];

app.get('/api/users', (req, res) => {
    res.json(users);
});

app.post('/api/users', (req, res) => {
    const newUser = req.body;
    users.push(newUser);
    res.status(201).json(newUser);
});

app.listen(3000, () => {
    console.log('バックエンドサーバーがポート3000で稼働中');
});

コマンドラインで以下のコードを実行しサーバーを起動します。

node app.js

ブラウザまたはAPIクライアントでhttp://localhost:3000/api/usersを開いて動作確認を行います。

ステップ2: フロントエンド（React）プロジェクトのセットアップ

一番上の階層であるアプリ名のフォルダにプロジェクトを作成します。

npx create-react-app frontend

cd frontend

Reactコンポーネントを作成します。

以下のコードをfrontend/src/App.jsに記述します。

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

function App() {
    const [users, setUsers] = useState([]);

    useEffect(() => {
        fetch('http://localhost:3000/api/users')
            .then(response => response.json())
            .then(data => setUsers(data))
            .catch(error => console.error('エラー:', error));
    }, []);

    const addUser = () => {
        const newUser = { id: users.length + 1, name: `新しいユーザー${users.length + 1}` };
        fetch('http://localhost:3000/api/users', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(newUser),
        })
            .then(response => response.json())
            .then(data => setUsers([...users, data]))
            .catch(error => console.error('エラー:', error));
    };

    return (
        <div>
            <h1>ユーザー一覧</h1>
            <ul>
                {users.map(user => (
                    <li key={user.id}>{user.name}</li>
                ))}
            </ul>
            <button onClick={addUser}>ユーザーを追加</button>
        </div>
    );
}

export default App;

以下のコマンドでReactアプリを起動します。

npm start

ブラウザでhttp://localhost:3000を開き、データが正しく表示されることを確認します。

フォルダ構成の用途

バックエンド（Node.js）プロジェクト

• backend/app.js: サーバーのメインロジックを記述します。
• backend/package.json: プロジェクトの依存関係とスクリプトを管理します。

フロントエンド（React）プロジェクト

• frontend/src/App.js: アプリケーションのメインコンポーネント。
• frontend/src/index.js: ReactアプリをHTMLにマウントします。
• frontend/public/: 静的ファイル（例: HTML, アイコン）を配置します。

この手順を使用すれば、Node.js（Express）をバックエンド、Reactをフロントエンドとするフルスタックアプリケーションを構築できます。さらに質問があればお知らせください！