はじめに
Reactは、モダンなWebアプリケーションのフロントエンドを構築するための強力なライブラリです。一方、バックエンド（例: Node.jsとExpress）を使うことで、データの処理やAPIを提供できます。このシリーズでは、Reactとバックエンドを組み合わせて、実用的なWebアプリを作ります。
第1章では、開発環境の準備とプロジェクトの初期設定を行います。初心者でも簡単に進められるよう、ステップごとに説明します。
目標
- Reactとバックエンドの基本を理解する
- 開発環境を整える
- フロントエンドとバックエンドのプロジェクトを立ち上げる
必要なツール
以下のツールをインストールしてください：
- Node.jsとnpm: JavaScriptの実行環境とパッケージ管理ツール。公式サイトから最新版をダウンロード。
- VS Code: コードエディタ（他のエディタでも可）。
- ブラウザ: ChromeやFirefoxでDevToolsを使います。
インストール後、ターミナルで以下のコマンドを実行して確認してください：
node -v
npm -v
バージョンが表示されればOKです。
Reactプロジェクトの作成
Reactのプロジェクトを簡単に作るために、create-react-appを使います。ターミナルで以下を実行：
npx create-react-app frontend --template typescript
cd frontend
npm start
-
frontendはプロジェクト名（自由に変更可）。 -
--template typescriptでTypeScriptを使用（省略可）。 -
npm startで開発サーバーが起動し、http://localhost:3000で確認できます。
ブラウザに「Welcome to React」が表示されたら成功です！
プロジェクト構造
作成されたフォルダは以下のようになります：
frontend/
├── node_modules/
├── public/
├── src/
│ ├── App.tsx
│ └── index.tsx
├── package.json
-
src/App.tsxがメインコンポーネントです。
バックエンドプロジェクトの作成
次に、Node.jsとExpressで簡単なサーバーを構築します。新しいフォルダを作り、初期化します：
mkdir backend
cd backend
npm init -y
npm install express
次に、index.jsを作成し、以下のコードを追加：
const express = require('express');
const app = express();
const port = 5000;
app.get('/', (req, res) => {
res.send('Hello from Backend!');
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
保存後、以下でサーバーを起動：
node index.js
http://localhost:5000にアクセスすると、「Hello from Backend!」が表示されます。
動作確認
- フロントエンド（React）は
http://localhost:3000で動作。 - バックエンド（Express）は
http://localhost:5000で動作。
2つのターミナルを使って、同時に両方を起動してみましょう。
次回予告
第2章では、Reactで簡単なUIを作り、コンポーネントの基本を学びます。お楽しみに！
この記事が役に立ったら、ぜひ「いいね」や「ストック」をお願いします！質問や感想はコメント欄で気軽にどうぞ。次回も一緒に学びましょう！