User List Application

Spring Boot REST APIとVue.jsフロントエンドを組み合わせたユーザー一覧アプリケーション

🚀 概要

このプロジェクトは、Spring BootでREST APIを構築し、Vue.jsでフロントエンドを作成したフルスタックWebアプリケーションです。DevContainer環境で簡単に開発を開始できます。

✨ 主な機能

• ユーザー一覧の表示
• レスポンシブデザイン
• エラーハンドリング
• CORS対応
• DevContainer対応

プロジェクト構成

├── .devcontainer/          # DevContainer設定
├── .vscode/               # VS Code設定
├── scripts/               # 起動スクリプト
├── src/                   # Spring Boot バックエンド
│   ├── main/java/
│   └── test/java/
├── frontend/              # Vue.js フロントエンド
│   ├── src/
│   ├── index.html
│   └── package.json
└── pom.xml               # Maven設定

セットアップと実行

DevContainer使用（推奨）

1. VS Codeで「Dev Containers」拡張機能をインストール
   • 拡張機能ID: ms-vscode-remote.remote-containers
2. プロジェクトをVS Codeで開く
3. 右下に表示される「Reopen in Container」をクリック、または コマンドパレット（Ctrl+Shift+P）で「Dev Containers: Reopen in Container」を選択
4. コンテナが起動したら、以下の方法でアプリケーションを起動：

方法1: VS Codeタスクを使用（推奨）

• Ctrl+Shift+P → Tasks: Run Task → Start All Services

方法2: 個別にサービスを起動

• Ctrl+Shift+P → Tasks: Run Task → Start Backend
• Ctrl+Shift+P → Tasks: Run Task → Start Frontend

方法3: ターミナルで直接実行

# バックエンド起動（ターミナル1）
mvn spring-boot:run

# フロントエンド起動（ターミナル2）
cd frontend && npm run dev

ローカル環境での実行

バックエンド (Spring Boot)

1. Javaアプリケーションを起動:

mvn spring-boot:run

APIサーバーは http://localhost:8080 で起動します。

フロントエンド (Vue.js)

1. フロントエンドディレクトリに移動:

cd frontend

2. 依存関係をインストール:

npm install

3. 開発サーバーを起動:

npm run dev

フロントエンドは http://localhost:3000 で起動します。

📡 API エンドポイント

メソッド	エンドポイント	説明
GET	/api/users	ユーザー一覧を取得

📱 アクセス URL

• フロントエンド: http://localhost:3000
• バックエンドAPI: http://localhost:8080

🛠 技術スタック

バックエンド

• Spring Boot 3.2.0
• Java 17
• Maven

フロントエンド

• Vue.js 3
• Vite
• Axios

🐳 DevContainer の特徴

• Java 17 と Maven が事前設定済み
• Node.js 18 と npm が利用可能
• VS Code拡張機能 が自動インストール：
  • Java Extension Pack
  • Vue Language Features (Volar)
  • TypeScript
  • Prettier
• ポートフォワーディング 設定済み（8080, 3000）
• デバッグ設定 完備

開発用コマンド

# バックエンドのみ起動
./scripts/start-backend.sh

# フロントエンドのみ起動
./scripts/start-frontend.sh

# 両方同時起動
./scripts/start-all.sh

Windows環境では .ps1 ファイルを使用してください。## 🤝 貢献

プロジェクトへの貢献を歓迎します！詳細は CONTRIBUTING.md をご覧ください。

📄 ライセンス

このプロジェクトは MIT License の下で公開されています。

🔗 関連リンク

• Spring Boot Documentation
• Vue.js Documentation
• Vite Documentation

---

⭐ このプロジェクトが役に立った場合は、スターをつけていただけると嬉しいです！