前回からToDoアプリケーションを作成しました。
ブラウザ表示は簡素なものとなっていますが、サーバーからCRUPを行うAPIを実行できるようになっているので満足しています。
最終的にこのようなディレクトリ構造になりました。
後学のために各ファイルの役割をメモも併せて記載するとこうなります。
my-java-ts-project/
├── demo/ # バックエンド (Spring Boot)
│ ├── Dockerfile # Dockerイメージをビルドするための設定ファイル
│ ├── pom.xml # プロジェクトの依存関係を管理するMaven設定ファイル
│ ├── mvnw
│ ├── .mvn/
│ └── src/
│ ├── main/
│ │ ├── java/
│ │ │ └── com/
│ │ │ └── example/
│ │ │ └── demo/
│ │ │ ├── DemoApplication.java # Spring Bootアプリケーションのエントリーポイント
│ │ │ ├── Task.java # タスクエンティティクラス
│ │ │ ├── TaskController.java # タスクコントローラークラス (APIエンドポイント)
│ │ │ └── TaskRepository.java # タスクリポジトリ
│ │ └── resources/
│ │ └── application.properties # Spring Bootアプリケーションの設定ファイル
│ └── test/
│ └── java/
├── my-app/ # フロントエンド (React)
│ ├── Dockerfile
│ ├── package.json # プロジェクトの依存関係を管理するファイル
│ ├── package-lock.json # 依存関係の固定ファイル
│ ├── public/ # 公開リソース（HTMLファイルなど）
│ └── src/ # ソースコード
│ ├── index.tsx # アプリケーションのエントリーポイント
│ ├── App.tsx # アプリケーションのメインコンポーネント
│ ├── api/
│ │ └── tasks.ts # タスクのAPI通信を管理するファイル
│ ├── components/
│ │ ├── TaskForm.tsx # 新しいタスクを追加するフォームコンポーネント
│ │ └── TaskList.tsx # タスクリストを表示するコンポーネント
│ ├── types.ts # 共通の型定義ファイル
│ └── index.css # アプリケーションのスタイルシート
├── mysql/ # MySQL設定
│ ├── my.cnf # MySQLの設定ファイル
│ └── init.sql # データベース初期化スクリプト
└── docker-compose.yml # 複数のDockerコンテナを管理するための設定ファイル
一旦はこのディレクトリ構成を基準に別アプリの作成や、見た目の修正を行っていこうと思います。