GitHub初心者ガイド - バージョン管理の基礎から実践まで

第2章：初めてのリポジトリ作成

学習目標

この章を読み終える頃には、GitHubで自分専用のリポジトリを作成し、基本的な設定を完了できるようになります。また、README.mdファイルの基本的な書き方を身につけ、プロジェクトの「顔」となる説明文書を作成できるようになります。

2.1 リポジトリ作成手順

リポジトリとは何か（復習）

第1章で学んだように、リポジトリとは「プロジェクトをまとめて管理する箱」のようなものです。1つのWebサイト、1つのアプリケーション、1つの学習プロジェクトが、通常1つのリポジトリになります。

身近な例で考えてみましょう：

学校のプロジェクトフォルダ 学校で「文化祭のWebサイトを作る」プロジェクトがあったとします。このプロジェクトのために、以下のようなフォルダを作成するでしょう：

文化祭Webサイト/
├── 企画書.docx
├── index.html
├── style.css
├── 画像/
│   ├── ロゴ.png
│   └── 背景.jpg
└── 議事録/
    ├── 第1回会議.txt
    └── 第2回会議.txt

GitHubのリポジトリも、これと同じような考え方です。ただし、GitHubのリポジトリには以下の特別な機能が追加されています：

リポジトリ構造

変更履歴の自動記録

  • いつ、誰が、何を変更したかがすべて記録される
  • 間違えても過去の状態に戻せる
  • チームメンバーの作業を統合できる

協働作業の支援

  • 複数の人が同時に作業しても混乱しない
  • 変更内容をレビューしてから反映できる
  • 課題管理や進捗管理も一緒にできる

新しいリポジトリの作成手順

それでは、実際にあなたの最初のリポジトリを作成してみましょう。

Step 1: GitHubにログイン

  1. https://github.com にアクセス
  2. 第1章で作成したアカウントでログイン
  3. ダッシュボード画面が表示されることを確認

Step 2: 新規リポジトリ作成画面を開く

  1. 画面右上の「+」ボタンをクリック
  2. ドロップダウンメニューから「New repository」を選択
  3. リポジトリ作成画面が開く

WebUI操作フロー

Step 3: リポジトリの基本情報を入力

Repository name（リポジトリ名） これがあなたのプロジェクトの「名前」になります。

良い名前の例：

  • my-first-website（私の最初のWebサイト）
  • learning-html-css（HTML・CSS学習用）
  • personal-portfolio（個人ポートフォリオ）
  • javascript-practice（JavaScript練習用）

避けるべき名前：

  • test（内容が不明）
  • 新しいフォルダー（日本語は避ける）
  • project1（具体性がない）
  • asdfgh（意味不明）

リポジトリ名のルール：

  • 英数字、ハイフン（-）、アンダースコア（_）のみ使用可能
  • スペースは使用不可（代わりにハイフンを使用）
  • 短すぎず、長すぎず（3-30文字程度が目安）

Description（説明文） このプロジェクトが何をするものかを簡潔に説明します。

例：

  • “My first HTML/CSS website for learning web development”
  • “Personal portfolio website showcasing my projects”
  • “Practice repository for JavaScript fundamentals”

Step 4: 公開設定の選択

Public（公開）vs Private（非公開）

Public（公開）を選ぶべき場合：

  • 学習用のプロジェクト
  • オープンソースとして公開したいツール
  • ポートフォリオとしてアピールしたい作品
  • 他の人にも参考にしてもらいたい内容

Private（非公開）を選ぶべき場合：

  • 個人的な練習や実験
  • 機密情報を含む可能性があるプロジェクト
  • まだ公開する準備ができていない作品
  • 仕事関連のプロジェクト

初心者の方へのアドバイス： 迷った場合は、最初はPrivateで作成することをお勧めします。後から Public に変更することは簡単にできますが、一度 Public にしたものを Private に変更するのは少し複雑だからです。

初期設定オプションの理解

リポジトリ作成時に、3つの重要なオプションがあります：

Initialize this repository with:

1. Add a README file READMEファイルは、プロジェクトの「説明書」です。

✅ チェックすることを強く推奨

  • プロジェクトの概要を記載するファイルが自動作成される
  • 訪問者が最初に見る「プロジェクトの顔」になる
  • 後から作成することもできるが、最初からあると便利

2. Add .gitignore バージョン管理に含めたくないファイルを指定するファイルです。

選択の目安：

  • プログラミング言語を選択している場合：その言語を選択
  • HTML/CSSのみの場合：「None」でも問題なし
  • 迷った場合：後から追加可能なので「None」

よく使われる .gitignore テンプレート：

  • Node：JavaScript/Node.js プロジェクト
  • Python：Python プロジェクト
  • Java：Java プロジェクト
  • VisualStudio：Visual Studio 使用時

3. Choose a license あなたの作品を他の人がどのように使用できるかを定める法的文書です。

初心者の方へのアドバイス：

  • Public リポジトリの場合：「MIT License」が一般的で無難
  • Private リポジトリの場合：設定不要
  • 迷った場合：後から追加可能なので最初はスキップ

Step 5: リポジトリの作成実行

すべての項目を入力・選択したら、「Create repository」ボタンをクリックします。数秒でリポジトリが作成され、あなた専用のプロジェクトページが表示されます。

作成完了後の確認事項

リポジトリが作成できたら、以下を確認してください：

リポジトリページの表示

  • あなたのユーザー名/リポジトリ名 の形式でURL表示
  • 設定した説明文が表示されている
  • README.md の内容が画面下部に表示されている

基本情報の確認

  • リポジトリ名が正しく表示されている
  • Public/Private の設定が意図した通りになっている
  • README.md ファイルが存在している

アクセス権限の確認

  • あなたが Owner（所有者）として表示されている
  • Settings タブにアクセスできる
  • ファイルの追加・編集・削除ができる

2.2 README.mdファイルの書き方

README.md の重要性

README.md ファイルは、あなたのプロジェクトの「顔」となる最も重要なファイルです。GitHubでリポジトリを訪問した人が最初に目にする内容で、プロジェクトの第一印象を決定します。

README.md が重要な理由：

訪問者への情報提供

  • このプロジェクトは何をするものか
  • どのように使用するか
  • どのような技術で作られているか
  • 作者の連絡先や貢献方法

検索エンジン最適化

  • GitHubの検索結果での表示内容
  • Google等の検索エンジンでの発見性向上
  • 関連キーワードでの検索ヒット率向上

プロフェッショナルな印象

  • 技術力のアピール
  • 丁寧な作業への姿勢の表現
  • コミュニケーション能力の証明

Markdownの基本記法

README.md ファイルは「Markdown」という記法で書かれています。Markdownは、簡単な記号を使ってテキストをフォーマットできる軽量マークアップ言語です。

基本的な記法：

見出し（Headers）

# 大見出し（H1）
## 中見出し（H2）
### 小見出し（H3）
#### より小さな見出し（H4）

強調（Emphasis）

**太字（Bold）**
*斜体（Italic）*
***太字かつ斜体***

リスト（Lists）

- 箇条書きの項目1
- 箇条書きの項目2
  - 入れ子の項目
  - 入れ子の項目

1. 番号付きリスト1
2. 番号付きリスト2
3. 番号付きリスト3

リンク（Links）

[表示テキスト](https://example.com)
[GitHubプロフィール](https://github.com/username)

コードブロック（Code Blocks）

インライン コードは `バッククォート` で囲む

```javascript
// コードブロックは3つのバッククォートで囲む
function hello() {
    console.log("Hello, World!");
}


**画像（Images）**
```markdown
![代替テキスト](画像のURL)
![プロジェクトのスクリーンショット](./images/screenshot.png)

効果的なREADME構成

基本的な構成テンプレート：

# プロジェクト名

簡潔なプロジェクトの説明（1-2行）

## 概要

このプロジェクトの目的や背景を説明します。
なぜこのプロジェクトを作成したかを記述します。

## 機能

- 主要機能1
- 主要機能2
- 主要機能3

## 技術スタック

- HTML5
- CSS3
- JavaScript
- その他使用した技術やライブラリ

## インストール・使用方法

1. リポジトリをクローンします
```bash
git clone https://github.com/username/repository-name.git
  1. ディレクトリに移動します 
    cd repository-name
  2. ファイルを開きます ブラウザで index.html を開いてください。

スクリーンショット

メイン画面

今後の予定

  • 追加したい機能1
  • 改善したい点1
  • 学習したい技術1

連絡先

  • GitHub: @username
  • Email: your.email@example.com

ライセンス

MIT License - 詳細は LICENSE ファイルを参照してください。


### 実際のREADME作成例

**初心者向けの実例：**

```markdown
# 私の最初のWebサイト

HTML とCSS を学習するために作成した個人的なWebサイトです。

## 概要

プログラミング学習を始めたばかりの私が、HTML と CSS の基本を実践するために作成しました。
シンプルな自己紹介サイトですが、レスポンシブデザインにも挑戦しています。

## 学んだ技術

- **HTML5**: セマンティックな構造の作成
- **CSS3**: Flexbox レイアウト、レスポンシブデザイン
- **Git/GitHub**: バージョン管理とプロジェクト公開

## ファイル構成

my-first-website/ ├── index.html # メインページ ├── style.css # スタイルシート ├── images/ # 画像ファイル │ └── profile.jpg └── README.md # このファイル


## 表示方法

1. このリポジトリをダウンロードまたはクローン
2. `index.html` をブラウザで開く

## 学習記録

### 実装できたこと
- ナビゲーションメニューの作成
- プロフィール画像の表示
- レスポンシブデザインの基本

### 今後挑戦したいこと
- [ ] JavaScript によるインタラクティブ要素
- [ ] CSS アニメーション
- [ ] お問い合わせフォームの追加

## 参考にした資料

- [MDN Web Docs](https://developer.mozilla.org/)
- [CSS-Tricks](https://css-tricks.com/)

## 作成者

**田中太郎**
- GitHub: [@tanaka-taro](https://github.com/tanaka-taro)
- 学習開始: 2024年1月
- 目標: フロントエンドエンジニア

ディレクトリ構造設計

プロジェクトファイル構成のベストプラクティス

効果的なプロジェクト構造を設計することは、将来の開発とメンテナンスに大きな影響を与えます。上記の図で示すように、用途に応じてファイルを適切に分類し、命名規則を統一することが重要です。

命名規則のベストプラクティス

2.3 よくあるエラーと対処法

リポジトリ作成時のエラー

エラー1: “Repository name already exists”

原因： 同じ名前のリポジトリが既に存在している

対処法：

  • 別の名前を考える
  • 数字や年号を追加（例：my-website-2024）
  • より具体的な名前にする（例：personal-portfolio-site）

エラー2: “Repository name can only contain ASCII letters, digits, and the characters . - _“

原因： 使用できない文字（日本語、スペース、特殊記号など）が含まれている

対処法：

  • 英数字のみを使用
  • スペースの代わりにハイフン（-）を使用
  • 日本語は英語に変換

エラー3: “You have reached your limit of private repositories”

原因： 無料アカウントでのプライベートリポジトリ数制限に達している

対処法：

  • Publicリポジトリとして作成
  • 不要なプライベートリポジトリを削除
  • GitHub Pro へのアップグレードを検討

README.md編集時のエラー

エラー4: Markdownが正しく表示されない

よくある原因と対処法：

見出しが表示されない

❌ 間違い
#見出し（#の後にスペースがない）

✅ 正しい
# 見出し（#の後にスペースがある）

リンクが正しく動作しない

❌ 間違い
[GitHub](www.github.com)（プロトコルが不足）

✅ 正しい
[GitHub](https://github.com)

コードブロックが表示されない

❌ 間違い
`（バッククォート1つでブロック作成を試行）

✅ 正しい
```（バッククォート3つでブロック作成）

ファイル権限とアクセス管理

ファイル権限管理

GitHubでは、リポジトリの可視性設定に加えて、個別のファイルやディレクトリに対する詳細な権限管理も可能です。チームでの開発では、適切な権限設定が重要になります。

大容量ファイルの扱い

大容量ファイル処理

GitHubには単一ファイル100MBの制限があります。動画、画像、データセットなどの大容量ファイルを扱う場合は、Git LFS（Large File Storage）の利用を検討しましょう。

バイナリファイル管理

ファイル操作のエラー

エラー5: ファイルのアップロードができない

原因：

  • ファイルサイズが大きすぎる（100MB制限）
  • ネットワーク接続の問題
  • ブラウザのキャッシュ問題

対処法：

  • ファイルサイズを確認し、必要に応じて圧縮
  • ブラウザを再読み込み
  • 別のブラウザで試行
  • インターネット接続を確認

エラー6: 編集内容が保存されない

原因：

  • commitメッセージが未入力
  • ネットワーク接続の中断
  • セッションの有効期限切れ

対処法：

  • 適切なcommitメッセージを入力
  • 再度ログインしてから編集
  • 重要な変更は事前にバックアップ

権限関連のエラー

エラー7: “You don’t have permission to access this repository”

原因：

  • 他人のプライベートリポジトリにアクセスしようとしている
  • アカウントがログアウトしている
  • URLが間違っている

対処法：

  • 正しいアカウントでログインしているか確認
  • リポジトリのURLが正しいか確認
  • リポジトリの所有者に権限を依頼

エラー8: Settings タブが表示されない

原因：

  • 他人のリポジトリを表示している
  • 権限が不足している

対処法：

  • 自分のリポジトリかどうか確認
  • リポジトリ名の前のユーザー名が自分のものか確認

2.4 公開・非公開の設定とその意味

Public と Private の違い

GitHubでは、リポジトリの公開レベルを「Public」（公開）と「Private」（非公開）から選択できます。この選択は、あなたのプロジェクトが誰に見えるかを決定する重要な設定です。

Public（公開）リポジトリ

誰が見られるか：

  • インターネット上の誰でも
  • GitHubアカウントを持たない人でも
  • 検索エンジンのクロール対象

できること：

  • プロジェクトの閲覧
  • ファイルのダウンロード
  • Issue の作成（設定による）
  • Pull Request の提案（設定による）

適している用途：

  • オープンソースプロジェクト
  • 学習成果の公開
  • ポートフォリオとしての利用
  • 技術知識の共有

Private（非公開）リポジトリ

誰が見られるか：

  • あなた（リポジトリ所有者）
  • 明示的に招待されたユーザーのみ
  • 所属する Organization のメンバー（設定による）

適している用途：

  • 個人的な学習・実験
  • 機密情報を含むプロジェクト
  • 開発中の商用プロジェクト
  • 公開前の準備作業

設定変更の方法

Public から Private への変更

⚠️ 重要な注意事項： Publicリポジトリを Privateに変更すると、以下の影響があります：

  • 既にフォークされたリポジトリは影響を受けない
  • 検索エンジンにインデックス済みの内容は残存する可能性
  • 外部サービスとの連携が切断される場合

変更手順：

  1. リポジトリページの「Settings」タブをクリック
  2. 下部の「Danger Zone」セクションを見つける
  3. 「Change repository visibility」をクリック
  4. 「Make private」を選択
  5. リポジトリ名を入力して確認
  6. 「I understand, change repository visibility」をクリック

Private から Public への変更

変更前の確認事項：

  • 機密情報（パスワード、APIキー等）が含まれていないか
  • 著作権に問題のあるファイルが含まれていないか
  • 個人情報が含まれていないか
  • 公開しても問題ない内容か

変更手順：

  1. リポジトリページの「Settings」タブをクリック
  2. 下部の「Danger Zone」セクションを見つける
  3. 「Change repository visibility」をクリック
  4. 「Make public」を選択
  5. 警告メッセージを確認
  6. 「I understand, change repository visibility」をクリック

ブランチとマージの基本概念

ブランチファイル操作

ブランチ機能を使うことで、メインのコードに影響を与えることなく、実験的な変更や新機能の開発を安全に行えます。

マージ概念

マージは、異なるブランチで行った変更を統合する重要な操作です。適切なマージ戦略を選択することで、プロジェクトの履歴を整理し、管理しやすい状態を維持できます。

競合解決

公開時の注意点

機密情報の除去

絶対に公開してはいけない情報：

  • パスワード、APIキー、アクセストークン
  • データベース接続情報
  • 個人の連絡先情報（住所、電話番号等）
  • 他人の著作物（許可のない画像、コード等）
  • 会社の機密情報

よくある機密情報の隠れ場所：

  • 設定ファイル（config.js、.env等）
  • コメント内の一時的なメモ
  • データベースダンプファイル
  • ログファイル
  • 個人的なメモやTODOリスト

安全な公開のためのチェックリスト：

  • すべてのファイルを確認し、機密情報を除去
  • .gitignore ファイルで不要ファイルを除外
  • commit履歴に機密情報が含まれていないか確認
  • README.md で適切にプロジェクトを説明
  • ライセンスファイルを追加（必要に応じて）

実習：最初のリポジトリを作成しよう

実習課題

以下の手順で、あなたの最初のリポジトリを作成してください：

  1. リポジトリ名：my-github-learning
  2. 説明文：「Learning GitHub basics step by step」
  3. 公開設定：Public
  4. README.md：✅ 追加する
  5. .gitignore：なし
  6. License：なし

作成後の確認項目

✅ リポジトリページが正常に表示される
✅ README.mdが作成されている
✅ リポジトリのURLをブラウザで開ける
✅ 「Create new file」ボタンが表示される

次のステップ

リポジトリの作成が完了したら、次の章でREADME.mdファイルを編集し、ファイルの追加・変更の基本操作を学習します。

まとめ

この章では、GitHubでの最初のリポジトリ作成について学習しました：

リポジトリ作成の基本

  • 適切なリポジトリ名の付け方
  • 初期設定オプションの理解
  • 公開・非公開設定の選択基準

README.md の重要性

  • プロジェクトの「顔」としての役割
  • Markdown基本記法の習得
  • 効果的な構成とテンプレート

エラー対処とトラブルシューティング

  • よくあるエラーパターンの理解
  • 段階的な問題解決手順
  • 事前予防の方法

公開設定と権限管理

  • Public と Private の適切な使い分け
  • 機密情報保護の重要性

あなたの最初のリポジトリが作成できました！次の章では、作成したリポジトリでの基本操作を学びます。

理解度確認： □ 適切なリポジトリ名を付けてリポジトリを作成できる
□ README.md をMarkdown記法で書ける
□ 基本的なエラーに対処できる
□ 公開・非公開設定を適切に選択できる
□ プロジェクトの段階に応じた設定戦略を理解している

Edit this page on GitHub