Next.jsで構築されたプロジェクトです。
- Node.js(最新のLTSバージョン推奨)
- npm(Node.jsに付属)
# 1. リポジトリをクローン
git clone [リポジトリURL]
# 2. プロジェクトディレクトリに移動
cd howtv2025
# 3. 依存関係のインストール
npm install
# 4. 開発サーバーの起動
npm run devhttp://localhost:3000をブラウザで開いて結果を確認できます。
npm run dev: 開発サーバーの起動(Turbopack使用)npm run build: プロダクションビルドの作成npm run start: プロダクションサーバーの起動npm run lint: リンターの実行
src/
├── app/ # Next.js 13のApp Router
│ ├── matching/ # マッチング機能
│ │ └── page.tsx # マッチングページのUI
│ ├── codescoring/ # コードスコアリング機能
│ │ └── page.tsx # コードスコアリングページのUI
│ └── api/ # APIエンドポイント
│ ├── matching/ # マッチング関連API
│ └── codescoring/ # コードスコアリング関連API
├── types/ # 型定義
│ ├── matching.ts # マッチング機能の型定義
│ └── codescoring.ts # コードスコアリング機能の型定義
└── lib/ # ビジネスロジック
├── matching/ # マッチング機能のロジック
└── codescoring/ # コードスコアリング機能のロジック
-
pages/: ページコンポーネント
- UIの実装
- クライアントサイドの状態管理
- APIとの通信処理の呼び出し
-
api/: APIルート
- クライアントからのリクエスト処理
- バリデーション
- libディレクトリのロジック呼び出し
- レスポンス整形
-
types/: 型定義
- インターフェース定義
- 型エイリアス
- APIのリクエスト/レスポンス型
-
lib/: ビジネスロジック
- 機能の中核となるロジック
- 外部APIとの通信
- データ処理
-
型定義から始める
types/ディレクトリで必要な型を定義- API通信で使用する型を明確にする
-
ビジネスロジックの実装
lib/ディレクトリに機能のコアロジックを実装- テストを書きながら開発を進める
-
APIエンドポイントの実装
api/ディレクトリにエンドポイントを作成- リクエストのバリデーション
- libのロジックを呼び出し
- エラーハンドリング
-
UIの実装
app/[機能名]/page.tsxにUIを実装- コンポーネントの分割
- APIとの通信処理の実装
- Next.js 15.2.2
- React 19
- TypeScript
- TailwindCSS
- ESLint
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.