From 791411e209bd0fcd59facd21addf6724dd3d0a48 Mon Sep 17 00:00:00 2001 From: Yuta Sakurai Date: Tue, 1 Jul 2025 03:44:15 +0900 Subject: [PATCH] =?UTF-8?q?=E5=AD=A6=E7=94=9F=E5=90=91=E3=81=91README?= =?UTF-8?q?=E3=81=AB=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - デフォルトのNext.jsテンプレートからカリキュラム用ガイドに変更 - TODOアプリ開発とGit/Gitea学習の全体像を提示 - 初学者向けの学習手順、つまずきポイント、FAQ等を追加 --- README.md | 270 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 248 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index e215bc4..e77cbd2 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,262 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# 🎯 TODOアプリで学ぶ Next.js & Git/Gitea 実践開発 -## Getting Started +## 📚 このプロジェクトについて -First, run the development server: +このリポジトリは、プログラミング初学者の皆さんが**実践的なWebアプリケーション開発スキル**を身につけるための学習教材です。TODOアプリという身近な題材を通じて、最新のWeb開発技術とチーム開発の基礎を学びます。 -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev +### 🚀 学べる技術スキル + +#### 1. **モダンなWeb開発技術** + +- **Next.js 15** - 最新のReactフレームワーク +- **TypeScript** - 型安全なJavaScript +- **Tailwind CSS v4** - 効率的なスタイリング +- **React 19** - 最新のUIライブラリ + +#### 2. **実践的な開発スキル** + +- バージョン管理（Git） +- チーム開発（Gitea） +- コードレビュー +- 問題解決能力 + +### 📊 学習時間の目安 + +- **TODOアプリ開発**: 15-20時間 +- **Git/Gitea学習**: 18-25時間 +- **合計**: 約30-45時間（1日2-3時間×2-3週間） + +## 🗺️ 学習の進め方 + +### 推奨学習ルート + +```mermaid +graph LR + A[環境構築] --> B[Git基礎] + B --> C[TODOアプリ Phase1-2] + C --> D[Git実践] + D --> E[TODOアプリ Phase3-5] + E --> F[Gitea連携] + F --> G[チーム開発体験] ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +### Step 1: 環境を整える（2-3時間） -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`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +1. **WSL2のセットアップ**（Windows環境の場合） + - Ubuntuをインストール + - ターミナルの基本操作を覚える -## Learn More +2. **VSCodeのインストール** + - WSL拡張機能を追加 + - 推奨拡張機能をインストール -To learn more about Next.js, take a look at the following resources: +3. **プロジェクトの起動確認** -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + ```bash + # 開発サーバーを起動 + npm run dev + + # ブラウザで http://localhost:3000 を開く + ``` -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! +### Step 2: 2つのカリキュラムを並行して進める -## Deploy on Vercel +#### 📱 TODOアプリ開発カリキュラム -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. +**Phase 1: 基礎理解（2-3時間）** -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +- Next.jsプロジェクトの構造を理解 +- 最初のコンポーネントを作成 +- TypeScriptの基本を学ぶ + +**Phase 2: UIの作成（3-4時間）** + +- TODOリストの見た目を作る +- 入力フォームを追加 +- Tailwind CSSでデザイン + +**Phase 3: 機能実装（4-5時間）** + +- ✅ TODO追加機能 +- ✅ 完了/未完了の切り替え +- ✅ TODO削除機能 + +**Phase 4: 高度な機能（3-4時間）** + +- ✏️ 編集機能 +- 🔍 フィルター機能 +- 💾 データの保存 + +**Phase 5: 仕上げ（2-3時間）** + +- コンポーネントの整理 +- エラー処理 +- パフォーマンス改善 + +#### 🔀 Git/Gitea学習カリキュラム + +**Phase 1: Git基礎（3-4時間）** + +- バージョン管理の概念 +- 基本コマンド（add, commit, push） +- VSCodeでのGit操作 + +**Phase 2: 実践的な使い方（4-5時間）** + +- ブランチの作成と切り替え +- コンフリクトの解決 +- 履歴の確認方法 + +**Phase 3: Gitea入門（3-4時間）** + +- リポジトリの作成 +- SSH鍵の設定 +- プッシュとプル + +**Phase 4: チーム開発体験（4-5時間）** + +- Issue管理 +- プルリクエスト +- コードレビュー + +## ⚠️ 初心者がつまずきやすいポイント + +### 1. TypeScriptのエラー対処法 + +```typescript +// よくあるエラー例 +const [todos, setTodos] = useState([]); // ❌ 型が不明 + +// 解決方法 +type Todo = { + id: number; + text: string; + completed: boolean; +}; +const [todos, setTodos] = useState([]); // ✅ 型を明示 +``` + +### 2. WSL環境の注意点 + +- **ファイルの場所**: 必ず`~/projects/`以下で作業（Windows側の`C:\`は避ける） +- **改行コード**: LFに統一（CRLFは使わない） +- **パスの書き方**: `/home/username/projects/` のようにLinux形式で + +### 3. Gitでよくある失敗 + +```bash +# コミット前に必ず状態確認 +git status + +# 間違えてコミットした場合 +git reset --soft HEAD~1 # 直前のコミットを取り消し +``` + +## 💡 学習のコツ + +### 1. エラーは成長のチャンス + +- エラーメッセージをよく読む +- 検索して解決方法を探す +- 質問する前に自分で試す + +### 2. こまめにコミット + +- 小さな機能ごとに保存 +- 分かりやすいメッセージを書く +- 失敗を恐れない（いつでも戻せる） + +### 3. 実際に手を動かす + +- コピペではなく自分で入力 +- 動作を確認しながら進める +- カスタマイズに挑戦する + +## 🎓 学習のゴール + +このプロジェクトを完了すると、以下のスキルが身につきます： + +### 技術スキル + +- ✅ React/Next.jsでWebアプリが作れる +- ✅ TypeScriptで型安全なコードが書ける +- ✅ Gitでバージョン管理ができる +- ✅ チーム開発の基本がわかる + +### ソフトスキル + +- ✅ エラーを自力で解決できる +- ✅ ドキュメントを読んで理解できる +- ✅ 計画的に開発を進められる +- ✅ 他人のコードを読める + +## 🚀 次のステップ + +このプロジェクトを完了したら、以下に挑戦してみましょう： + +1. **機能の拡張** + - カテゴリー機能 + - 期限設定 + - 優先度管理 + +2. **新しい技術の導入** + - データベース連携 + - 認証機能 + - API開発 + +3. **実践プロジェクト** + - オリジナルアプリの開発 + - オープンソースへの貢献 + - チーム開発への参加 + +## 📞 困ったときは + +### よくある質問（FAQ） + +**Q: npm run devでエラーが出る** +A: `node_modules`を削除して`npm install`を実行してください + +**Q: TypeScriptの型エラーが解決できない** +A: 一時的に`any`型を使い、後で正しい型に修正しましょう + +**Q: Gitでプッシュできない** +A: リモートの最新を取得(`git pull`)してから再度プッシュ + +### サポート方法 + +1. **自己解決を試みる**（15分） + - エラーメッセージを読む + - 公式ドキュメントを確認 + - Google/Stack Overflowで検索 + +2. **質問の準備** + - 何をしようとしたか + - どんなエラーが出たか + - 何を試したか + +3. **質問する** + - 具体的に説明する + - コードやエラーを共有 + - 解決後は共有する + +## 📂 プロジェクト構成 + +``` +nextjs-todo-tutorial/ +├── src/app/ # アプリケーションコード +├── public/ # 静的ファイル +├── package.json # 依存関係 +├── tsconfig.json # TypeScript設定 +├── tailwind.config.ts # Tailwind設定 +├── CLAUDE.md # AI支援用ドキュメント +├── todo-app-curriculum.md # TODOアプリカリキュラム詳細 +└── git-gitea-curriculum.md # Git/Giteaカリキュラム詳細 +``` + +## 📝 最後に + +プログラミング学習は山登りのようなものです。一歩一歩進めば、必ず頂上にたどり着けます。エラーや困難は成長のチャンス。楽しみながら、自分のペースで学習を進めてください。 + +**Happy Coding! 🎉**