ReactとTypeScriptでのアプリ作成日記その１

この日記は、ReactとTypeScriptの学習日記です。
随時追記して自己学習に役立てます。ご参考までに。

構成検討、モノレポ or 分離リポジトリ

ネットでどちらの構成が良いか調べました。
もともとモノレポで作っていたけど、分離リポジトリに途中で作り変えたという企業の記事もありました。

個人開発のため、無料サーバを作ることを念頭に置いています。
Vercelをサーバとして使いたいため、フロントエンドとバックエンドを分けたフォルダ構成の方が良いと判断しました。モノレポで一度チャレンジして、結局分離させた経験があるため。

フォルダ構成（分離リポジトリ）

/frontend
/backend
├Readme

フロントエンドの作成（基本部分のみ）

Reactアプリケーションのセットアップ

mkdir frontend
cd frontend
npx create-react-app . --template typescript

基本ファイル構成

/frontend
├── /public              # 静的ファイル
├── /src                 # ソースコード
│   ├── /assets          # 画像、スタイルシートなど
│   ├── /components      # UIコンポーネント
│   ├── /hooks           # カスタムフック
│   ├── /pages           # 各ページコンポーネント
│   ├── /services        # API通信関連のコード
│   ├── /types           # 型定義ファイル
│   ├── App.tsx          # ルートコンポーネント
│   └── index.tsx        # エントリーポイント
├── package.json         # 依存関係とスクリプト
└── tsconfig.json        # TypeScript設定ファイル

必要なパッケージのインストール

npm install axios            # APIリクエスト用
npm install react-router-dom # ルーティング用
npm install -D @types/react-router-dom # React Routerの型定義

TypeScriptの設定

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": "src",
    "paths": {
      "@components/*": ["components/*"],
      "@hooks/*": ["hooks/*"],
      "@pages/*": ["pages/*"],
      "@services/*": ["services/*"]
    }
  },
  "include": ["src"]
}

Api通信の設定
axios(アキソス)を使用。
参考：https://axios-http.com/ja/

api.ts

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:4000/api', // バックエンドのURL
});

export default api;

バックエンドの作成(基礎部分のみ)

Node.jsのプロジェクトを初期化

mkdir backend
cd backend
npm init -y

パッケージのインストール

npm install express
npm install -D typescript @types/express ts-node nodemon

express: Webアプリケーションフレームワーク
typescript: TypeScriptを使うためのコンパイラ
@types/express: Expressの型定義
ts-node: TypeScriptファイルを直接実行できるようにするパッケージ
nodemon: 開発中に変更を監視して自動でサーバーを再起動するパッケージ

基本ファイル構成

/backend
├── /src
│   ├── /controllers   # ビジネスロジックを担当
│   ├── /routes        # ルート設定
│   ├── /models        # データモデルやデータベース接続
│   ├── /middleware    # 認証などの共通処理
│   ├── app.ts         # Expressアプリケーションのセットアップ
│   └── server.ts      # サーバーのエントリーポイント
├── tsconfig.json
└── package.json

Expressサーバーのセットアップ
参考：https://expressjs.com/ja/

src/app.ts

import express from 'express';

const app = express();
app.use(express.json());

app.get('/', (req, res) => {
  res.send('Hello from the backend!');
});

export default app;

サーバのエントリーポイント

src/server.ts

import app from './app';

const PORT = process.env.PORT || 4000;

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

nodemonとts-nodeを使ってTypeScriptファイルを監視・実行するために、スクリプトの追加

nodemonでコード変更があった際に自動で再起動し、ts-nodeで再起動のたびに即座に実行される。

package.json

"scripts": {
  "dev": "nodemon src/server.ts"
}

サーバの起動
次のコマンドでnodemonを実行

npm run dev

下記でブラウザに「Hello from the backend」と表示され、正常動作の確認ができる。
"https://localhost:4000"

以上