diff --git a/beginners/github-features-simple.md b/beginners/github-features-simple.md index daa615b..df8f9d5 100644 --- a/beginners/github-features-simple.md +++ b/beginners/github-features-simple.md @@ -10,7 +10,7 @@ GitHubって何ができるの？という疑問に、シンプルにお答え --- -## 📌 GitHubの主な機能一覧 +## 📌 GitHubの主な機能一覧（全20機能） ### 1. 📁 **リポジトリ（Repository）** **何これ？** → プロジェクトを保存する場所 @@ -186,6 +186,119 @@ GitHubって何ができるの？という疑問に、シンプルにお答え --- +### 13. 📥 **クローン（Clone）** +**何これ？** → リポジトリをパソコンにダウンロード +**何ができる？** +- GitHubからローカルPCへコピー +- オフラインで作業可能 +- 好きなエディタで編集 + +**使い方：** +1. リポジトリページの「Code」ボタン +2. URLをコピー +3. ターミナルで `git clone [URL]` +4. または GitHub Desktop でワンクリック + +--- + +### 14. ⬆️ **プッシュ（Push）** +**何これ？** → ローカルの変更をGitHubにアップロード +**何ができる？** +- 自分の作業を保存 +- チームメンバーと共有 +- バックアップ + +**使い方：** +1. ローカルで変更・コミット +2. `git push` コマンド実行 +3. または GitHub Desktop の「Push」ボタン + +--- + +### 15. ⬇️ **プル（Pull）** +**何これ？** → GitHubから最新の変更を取得 +**何ができる？** +- 他の人の変更を取り込む +- 最新版に更新 +- 競合を防ぐ + +**使い方：** +1. `git pull` コマンド実行 +2. または GitHub Desktop の「Pull」ボタン +3. 自動的に最新版に更新 + +--- + +### 16. 🔀 **マージ（Merge）** +**何これ？** → ブランチを統合 +**何ができる？** +- 機能開発を本番に反映 +- 複数の変更を一つに +- チームの作業を統合 + +**使い方：** +1. Pull Request を作成 +2. レビュー後「Merge」ボタン +3. ブランチが統合される + +--- + +### 17. 💬 **ディスカッション（Discussions）** +**何これ？** → フォーラム形式の議論場所 +**何ができる？** +- Q&A形式で質問 +- アイデアの議論 +- お知らせの共有 + +**使い方：** +1. 「Discussions」タブ +2. 「New discussion」 +3. カテゴリを選んで投稿 + +--- + +### 18. 📝 **ギスト（Gist）** +**何これ？** → コードスニペットの共有 +**何ができる？** +- 短いコードを共有 +- メモやスクリプト保存 +- 埋め込み可能 + +**使い方：** +1. gist.github.com にアクセス +2. コードを貼り付け +3. 「Create secret/public gist」 + +--- + +### 19. 📦 **パッケージ（Packages）** +**何これ？** → パッケージ管理 +**何ができる？** +- npmパッケージ公開 +- Dockerイメージ管理 +- 依存関係の管理 + +**使い方：** +1. リポジトリの「Packages」 +2. パッケージタイプを選択 +3. 公開手順に従う + +--- + +### 20. 💖 **スポンサー（Sponsors）** +**何これ？** → 開発者支援 +**何ができる？** +- オープンソース開発者を支援 +- 定期的な寄付 +- 特典の提供 + +**使い方：** +1. プロフィールの「Sponsor」ボタン +2. 支援額を選択 +3. 支払い方法を設定 + +--- + ## 🎯 どの機能から始めるべき？ ### 🔰 完全初心者の方 @@ -204,6 +317,12 @@ GitHubって何ができるの？という疑問に、シンプルにお答え 3. **Pull Request** - レビューする 4. **Projects** - タスク管理 +### 💻 本格的に開発したい方 +1. **Clone** - リポジトリをダウンロード +2. **コミット** → **Push** - 変更をアップロード +3. **Pull** - 最新版を取得 +4. **Merge** - 変更を統合 + --- ## 💡 覚えておくと便利なこと @@ -225,6 +344,9 @@ GitHubって何ができるの？という疑問に、シンプルにお答え - **Push（プッシュ）**: 変更をアップロード - **Pull（プル）**: 最新版をダウンロード - **Merge（マージ）**: 変更を統合 +- **Fetch（フェッチ）**: 変更を確認だけ（取り込まない） +- **Remote（リモート）**: GitHub上のリポジトリ +- **Local（ローカル）**: 自分のPC上のリポジトリ --- @@ -258,5 +380,6 @@ A: はい！ファイル名以外は日本語OK。 各機能の詳しい使い方は、個別のガイドをご覧ください： - [初心者向け入門ガイド](github-beginner-guide.md) - [実践的な操作手順](github-hands-on.md) +- [Git ワークフローガイド](github-git-workflow.md) - Clone → 編集 → Push の流れ でも、まずは**リポジトリを作って、何か保存してみる**ことから始めましょう！🎉 \ No newline at end of file diff --git a/beginners/github-git-workflow.md b/beginners/github-git-workflow.md new file mode 100644 index 0000000..67007f8 --- /dev/null +++ b/beginners/github-git-workflow.md @@ -0,0 +1,389 @@ +--- +layout: default +title: "Git ワークフローガイド - 実際の作業の流れ" +description: "Clone → 編集 → Commit → Push → Pull の基本的な流れを図解で理解" +--- + +# 🔄 Git ワークフローガイド - 実際の作業の流れ + +GitHubを使った実際の作業の流れを、初心者でも分かるように図解付きで説明します！ + +--- + +## 📝 このガイドで学べること + +- Git の基本的な作業の流れ +- ローカルとリモートの関係 +- よくあるワークフローパターン +- トラブル時の対処法 + +--- + +## 🌟 Git ワークフローとは？ + +**簡単に言うと**: コードを書いて、保存して、共有するまでの一連の流れです。 + +``` +あなたのPC（ローカル） GitHub（リモート） + ↓ ↑ + 編集する みんなが見れる + ↓ ↑ + 保存する ←→ 共有する +``` + +--- + +## 🎯 基本的なワークフロー + +### 全体の流れ + +``` +1. Clone（クローン） - GitHubからダウンロード + ↓ +2. 編集 - ファイルを変更 + ↓ +3. Add（追加） - 変更を記録準備 + ↓ +4. Commit（コミット） - 変更を保存 + ↓ +5. Push（プッシュ） - GitHubにアップロード + ↓ +6. Pull（プル） - 最新版を取得 +``` + +--- + +## 📥 STEP 1: Clone（クローン）- 最初の一歩 + +### GitHubからプロジェクトをダウンロード + +#### 方法1: コマンドライン +```bash +# リポジトリをクローン +git clone https://github.com/ユーザー名/リポジトリ名.git + +# フォルダに移動 +cd リポジトリ名 +``` + +#### 方法2: GitHub Desktop +``` +1. リポジトリページの「Code」ボタン +2. 「Open with GitHub Desktop」を選択 +3. 保存場所を選んで「Clone」 +``` + +### 図解 +``` + GitHub あなたのPC +┌─────────────┐ ┌─────────────┐ +│ Repository │ Clone→ │ Local │ +│ (原本) │ ========> │ (コピー) │ +└─────────────┘ └─────────────┘ +``` + +--- + +## ✏️ STEP 2: 編集 - ファイルを変更 + +### 好きなエディタで編集 + +``` +作業フォルダ +├── README.md ← これを編集 +├── index.html ← 新しく作成 +└── style.css ← これも編集 +``` + +**ポイント**: +- どのエディタでもOK（VSCode、メモ帳、など） +- 普通にファイルを編集するだけ +- 保存を忘れずに！ + +--- + +## 📋 STEP 3: Add（追加）- 変更を記録準備 + +### 変更したファイルを記録対象に追加 + +#### コマンドライン +```bash +# 特定のファイルを追加 +git add README.md + +# すべての変更を追加 +git add . +``` + +#### GitHub Desktop +- 変更されたファイルが自動的にリストアップされる +- チェックボックスで選択 + +### 図解 +``` +作業フォルダ ステージング（記録準備） +┌─────────────┐ ┌─────────────────┐ +│ ✏️ README.md │ add→ │ 📋 README.md │ +│ ✏️ index.html│ ====> │ 📋 index.html │ +│ ✏️ style.css │ │ 📋 style.css │ +└─────────────┘ └─────────────────┘ +``` + +--- + +## 💾 STEP 4: Commit（コミット）- 変更を保存 + +### 変更に名前を付けて保存 + +#### コマンドライン +```bash +# コミット（メッセージ付き） +git commit -m "ホームページのデザインを更新" +``` + +#### GitHub Desktop +1. コミットメッセージを入力 +2. 「Commit to main」ボタンをクリック + +### 良いコミットメッセージの例 +``` +✅ 良い例： +- "ログイン機能を追加" +- "ヘッダーのデザインを修正" +- "READMEに使い方を追記" + +❌ 悪い例： +- "更新" +- "fix" +- "あああ" +``` + +--- + +## ⬆️ STEP 5: Push（プッシュ）- GitHubにアップロード + +### ローカルの変更をGitHubに送る + +#### コマンドライン +```bash +# GitHubにプッシュ +git push origin main +``` + +#### GitHub Desktop +- 「Push origin」ボタンをクリック + +### 図解 +``` + ローカル（PC） GitHub +┌─────────────┐ ┌─────────────┐ +│ 変更済み │ Push→ │ 更新！ │ +│ Ver.2 │ ========> │ Ver.2 │ +└─────────────┘ └─────────────┘ +``` + +--- + +## ⬇️ STEP 6: Pull（プル）- 最新版を取得 + +### 他の人の変更を取り込む + +#### いつ使う？ +- 朝、作業を始める前 +- 他の人が更新した時 +- Push前の確認 + +#### コマンドライン +```bash +# 最新版を取得 +git pull origin main +``` + +#### GitHub Desktop +- 「Pull origin」ボタンをクリック + +### 図解 +``` + GitHub ローカル（PC） +┌─────────────┐ ┌─────────────┐ +│ 最新版 │ Pull← │ 古い版 │ +│ Ver.3 │ <======== │ Ver.2 │ +└─────────────┘ └─────────────┘ + ↓ + ┌─────────────┐ + │ 最新版 │ + │ Ver.3 │ + └─────────────┘ +``` + +--- + +## 🔄 よくあるワークフローパターン + +### パターン1: 個人開発 +``` +1. Clone（最初だけ） +2. 編集 → Add → Commit → Push +3. 繰り返し +``` + +### パターン2: チーム開発（基本） +``` +1. Clone（最初だけ） +2. Pull（最新版を取得） +3. 編集 → Add → Commit +4. Pull（念のため再確認） +5. Push +``` + +### パターン3: 機能開発（ブランチ使用） +``` +1. Clone（最初だけ） +2. ブランチ作成 +3. 編集 → Add → Commit → Push +4. Pull Request作成 +5. レビュー → マージ +``` + +--- + +## 🚨 よくあるトラブルと対処法 + +### 1. Pushできない！ +```bash +エラー: ! [rejected] main -> main (non-fast-forward) +``` + +**原因**: 他の人が先に更新している +**対処法**: +```bash +# 最新版を取得してから再度Push +git pull origin main +git push origin main +``` + +### 2. コンフリクト（競合）が発生！ +``` +<<<<<<< HEAD +自分の変更 +======= +他の人の変更 +>>>>>>> origin/main +``` + +**対処法**: +1. ファイルを開いて手動で修正 +2. 不要な記号（<<<、===、>>>）を削除 +3. Add → Commit → Push + +### 3. 間違えてコミットした！ +**対処法**: +```bash +# 直前のコミットを取り消し（ファイルは残る） +git reset --soft HEAD~1 +``` + +--- + +## 💡 便利なコマンド・操作 + +### 状態確認 +```bash +# 現在の状態を確認 +git status + +# コミット履歴を確認 +git log --oneline +``` + +### ブランチ操作 +```bash +# ブランチ作成・切り替え +git checkout -b feature/new-feature + +# mainブランチに戻る +git checkout main +``` + +### 取り消し操作 +```bash +# ファイルの変更を取り消し +git checkout -- ファイル名 + +# すべての変更を取り消し +git checkout -- . +``` + +--- + +## 🎓 練習問題 + +### 初級編 +1. リポジトリをClone +2. README.mdに自己紹介を追加 +3. Commit & Push + +### 中級編 +1. 新しいブランチを作成 +2. index.htmlファイルを作成 +3. Commit & Push +4. Pull Requestを作成 + +### 上級編 +1. わざとコンフリクトを起こす +2. コンフリクトを解決 +3. 正常にマージ + +--- + +## 🌈 まとめ + +### 最重要コマンド（これだけ覚えよう！） + +| 操作 | コマンド | 説明 | +|------|----------|------| +| 📥 Clone | `git clone [URL]` | 最初の1回だけ | +| ⬇️ Pull | `git pull` | 作業開始時 | +| 📋 Add | `git add .` | 変更を記録準備 | +| 💾 Commit | `git commit -m "メッセージ"` | 変更を保存 | +| ⬆️ Push | `git push` | GitHubに送信 | + +### 黄金の流れ +``` +Pull → 編集 → Add → Commit → Push +``` + +これを繰り返すだけで、GitHubが使えるようになります！ + +--- + +## 🚀 次のステップ + +1. **まずは練習リポジトリで試す** +2. **毎日少しずつ使って慣れる** +3. **分からないことは調べながら進める** + +### さらに学びたい方へ +- [GitHub機能一覧](github-features-simple.md) - 全20機能の解説 +- [実践的な操作手順](github-hands-on.md) - 画面付きの詳細ガイド +- [リポジトリ基礎編](../features/01-repository-basics.md) - より詳しい解説 + +--- + +## ❓ FAQ + +**Q: コマンドラインが難しい...** +A: GitHub Desktop を使えばボタン操作でOK！ + +**Q: 間違えたらどうしよう...** +A: Gitは履歴が残るので、いつでも戻せます！ + +**Q: Pushする前にPullは必要？** +A: チーム開発では必須。個人開発でも習慣にしましょう。 + +**Q: コミットメッセージは日本語でいい？** +A: もちろんOK！分かりやすさが一番大事。 + +--- + +楽しいGit生活を始めましょう！ 🎉 \ No newline at end of file diff --git a/index.md b/index.md index 302a316..4f887d0 100644 --- a/index.md +++ b/index.md @@ -17,7 +17,7 @@ description: "外部ツールに依存せず、GitHub一つで開発業務を完

📋 機能一覧

-

GitHubで何ができるの？
12の機能をシンプルに解説

+

GitHubで何ができるの？
20の機能をシンプルに解説

5分で読める @@ -32,6 +32,12 @@ description: "外部ツールに依存せず、GitHub一つで開発業務を完

画面を見ながら
実際に操作してみよう

手を動かして学ぶ + + +

🔄 ワークフロー

+

Clone → Push → Pull
実際の作業の流れを理解

+ 図解で分かる +
@@ -303,7 +309,7 @@ gh issue create --title "プロジェクト初期設定" --body "GitHub機能の .beginner-links { display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 2rem; }