github-research-tool/beginners/github-hands-on.md

---
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ライフを！ 🚀