--- layout: default title: "GitHub実践ガイド - 画面を見ながら操作しよう" description: "実際の画面を見ながら、GitHubの基本操作をマスターしよう" --- # 🖥️ GitHub実践ガイド - 画面を見ながら操作しよう 実際の画面を想定しながら、一つずつ操作を覚えていきましょう！ --- ## 📍 画面の見方を覚えよう ### GitHub トップページ ``` ┌─────────────────────────────────────────────────┐ │ 🐙 GitHub 検索バー [___________] 🔔 ➕ 👤 │ ├─────────────────────────────────────────────────┤ │ │ │ 左側： 右側： │ │ 📁 Recent Repositories 📰 最近の活動 │ │ - my-first-project - @user がスター │ │ - hello-world - 新しいissue │ │ │ └─────────────────────────────────────────────────┘ ``` **重要なボタンの位置：** - 🔔 **通知** - 更新があったら赤い丸が付く - ➕ **新規作成** - ここから新しいものを作る - 👤 **プロフィール** - 設定やログアウト --- ## 🎯 実践1：リポジトリを作る ### 手順1：新規作成ボタンをクリック ``` 画面右上 ↓ [ 🔔 ] [ ➕ ] [ 👤 ] ↑ ここをクリック！ ``` ### 手順2：メニューから選択 ``` ┌─────────────────┐ │ New repository │ ← これを選ぶ │ Import repo... │ │ New gist │ │ New org... │ └─────────────────┘ ``` ### 手順3：リポジトリ情報を入力 ``` Create a new repository ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Repository name * [my-awesome-project_______________] ↑ 半角英数字とハイフン(-)が使える Description (optional) [私の素晴らしいプロジェクト_________] ↑ 日本語OK！ ◉ Public ○ Private ↑ ↑ みんなに公開 自分だけ □ Add a README file ← チェックを入れる！ □ Add .gitignore □ Choose a license [Create repository] ← 最後にこれをクリック ``` --- ## 🎯 実践2：ファイルを作成・編集 ### 新しいファイルを作る #### 手順1：Add fileボタンを探す ``` リポジトリページ ┌─────────────────────────────────────────────┐ │ 📁 my-awesome-project │ │ ─────────────────────────────────────────── │ │ 📄 README.md │ │ │ │ [Add file ▼] [🟢 Code ▼] │ │ ↑ │ │ ここをクリック │ └─────────────────────────────────────────────┘ ``` #### 手順2：Create new fileを選択 ``` ┌──────────────────┐ │ Create new file │ ← これ │ Upload files │ └──────────────────┘ ``` #### 手順3：ファイル名と内容を入力 ``` ファイル作成画面 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ my-awesome-project / [memo.txt___________] ↑ ファイル名を入力 Edit new file Preview ━━━━━━━━━━━━━━━━━━━━━━━ 1 | 今日の作業メモ 2 | 3 | GitHubの使い方を勉強中 4 | 思ったより簡単だった！ 5 | ↑ 内容を入力 ``` #### 手順4：保存（コミット） ``` 画面下部 ━━━━━━━━━━━━━━━━━━━━━━━━━━ Commit new file [メモファイルを追加_______________] ↑ 何をしたか書く（日本語OK） ◉ Commit directly to the main branch ○ Create a new branch [Commit new file] ← クリックして保存 ``` --- ## 🎯 実践3：既存ファイルを編集 ### 手順1：編集したいファイルをクリック ``` ファイル一覧 ━━━━━━━━━━━━━━━━━━━━ 📄 README.md ← クリック 📄 memo.txt ``` ### 手順2：編集ボタンをクリック ``` ファイル表示画面 ┌─────────────────────────────────────┐ │ README.md ✏️ 🗑️ │ │ ↑ │ │ 鉛筆マーク │ │ ─────────────────────────────────── │ │ # my-awesome-project │ │ 私の素晴らしいプロジェクト │ └─────────────────────────────────────┘ ``` ### 手順3：編集して保存 ``` 編集画面 ━━━━━━━━━━━━━━━━━━━━━ 1 | # my-awesome-project 2 | 私の素晴らしいプロジェクト 3 | 4 | ## 今日やったこと ← 追加 5 | - GitHubの勉強 ← 追加 6 | 下にスクロールして... [Commit changes] をクリック ``` --- ## 🎯 実践4：Issue（タスク）を作る ### 手順1：Issuesタブをクリック ``` リポジトリ上部のタブ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <> Code | 🔴 Issues | 🔄 PR | ⚡ Actions ↑ ここをクリック ``` ### 手順2：New issueをクリック ``` Issues画面 ┌──────────────────────────────────┐ │ 🔍 検索バー [New issue] │ │ ↑ │ │ 緑のボタン │ └──────────────────────────────────┘ ``` ### 手順3：タイトルと内容を書く ``` 新規Issue作成 ━━━━━━━━━━━━━━━━━━━━━━━━━━━ Title [READMEに使い方を追加したい_______] ↑ やりたいこと Leave a comment ┌─────────────────────────────┐ │ ## やりたいこと │ │ READMEに初心者向けの │ │ 使い方を追加したいです │ │ │ │ ## 理由 │ │ 友達に教えるときに │ │ 説明しやすくするため │ └─────────────────────────────┘ [Submit new issue] ← クリック ``` --- ## 🎯 実践5：他の人のプロジェクトを見る ### 手順1：検索する ``` 画面上部の検索バー ┌────────────────────────────┐ │ 🔍 Search GitHub │ └────────────────────────────┘ ↑ 「recipe」「diary」など 興味のあるキーワードを入力 ``` ### 手順2：検索結果から選ぶ ``` 検索結果 ━━━━━━━━━━━━━━━━━━━━━━━━━ 📁 user/recipe-collection ⭐ 234 簡単レシピ集 📁 another/my-recipes ⭐ 89 毎日の料理レシピ ↑ 気になるものをクリック ``` ### 手順3：スターを付ける ``` プロジェクトページ ┌────────────────────────────────────┐ │ 📁 user/recipe-collection │ │ │ │ [⭐ Star] [👁️ Watch] [🍴 Fork] │ │ ↑ │ │ クリックでお気に入り登録 │ └────────────────────────────────────┘ ``` --- ## 💡 操作のコツ ### 🔍 迷ったときは 1. **戻るボタン** - ブラウザの戻るで大丈夫 2. **ロゴクリック** - GitHubロゴでトップに戻る 3. **パンくずリスト** - 今どこにいるか分かる ### ⌨️ 便利なキーボードショートカット 画面で `?` を押すと、ショートカット一覧が出ます！ よく使うもの： - `t` - ファイル検索 - `b` - ブランチ切り替え - `g` `n` - 通知ページへ - `g` `d` - ダッシュボードへ ### 🎨 見た目を変える プロフィール → Settings → Appearance で： - ☀️ **Light** - 明るいテーマ - 🌙 **Dark** - 暗いテーマ - 💻 **System** - OSに合わせる --- ## 🚨 困ったときの対処法 ### ❌ エラーが出た ``` エラー例： ┌─────────────────────────────┐ │ ⚠️ File name already exists │ └─────────────────────────────┘ ``` **対処法**: ファイル名を変える ### 🔒 Permission denied **対処法**: ログインし直す、権限を確認 ### 📝 日本語が文字化け **対処法**: ファイルの文字コードをUTF-8に --- ## 🎓 練習問題 ### 📌 基本操作をマスターしよう #### 課題1：自己紹介リポジトリ 1. `self-introduction` という名前でリポジトリ作成 2. `profile.md` ファイルを作成 3. 自己紹介を書く 4. `hobbies.md` を追加して趣味を書く #### 課題2：日記リポジトリ 1. `my-diary-2024` でリポジトリ作成 2. `2024/01/diary.md` を作成（フォルダ付き） 3. 今日の出来事を書く 4. Issue で「明日やること」を作成 #### 課題3：学習記録 1. `learning-log` でリポジトリ作成 2. `github/` フォルダを作る 3. `day1.md` に今日学んだことを記録 4. README.md に目次を追加 --- ## 🎉 よくできました！ ここまでできたら、GitHubの基本操作はバッチリです！ **次のステップ：** - 🌿 ブランチを使った安全な編集 - 🔄 Pull Requestでの共同作業 - 🌐 GitHub Pagesでサイト公開 **覚えておいてください：** - 😊 間違えても大丈夫、やり直せます - 📚 分からないことは調べながらでOK - 🎯 毎日少しずつ使えば必ず上達します 楽しいGitHubライフを！ 🚀