はじめに
この記事は、GitHub Codespacesを使って実際にGitを体験する記事です。
ブラウザだけで動作するクラウド開発環境を使うため、自分のPCへのGitインストールやSSHキーの設定は一切不要です。
この記事は【実践編】です
Gitの基本的な概念から知りたい方は、先に【概念編】をご覧ください。
▶ 環境構築なしでGitを学ぶ【概念編】
この記事のゴール
- GitHubアカウントを作成できる
- 新規リポジトリを作成できる
- Codespacesを起動できる
- Gitの基本的な操作（add / commit / push）を体験できる
事前に必要なもの
- インターネットに接続されたPC
- ブラウザ（Chrome / Edge / Safariなど）
- メールアドレス or Googleアカウント or Appleアカウント
1. GitHubアカウントを作成する
GitHubアカウントをお持ちの方は、この章をスキップしてください。
1-1. GitHubの公式サイトにアクセスする
以下のURLからGitHubの公式サイトにアクセスします。
https://github.com/
「Sign up」をクリックしてください。
1-2. アカウント情報を入力する
画面に従って各情報を入力してアカウントを作成します。
既存のGoogleアカウントおよびAppleアカウントと紐づけて作成することも可能のため、お好みに合わせて作成してください。
注意
ユーザー名はGitHub上で公開されます。
本名は使用せず、ニックネームや英数字の組み合わせを推奨します。
1-3. メール認証を完了する
登録したメールアドレスに認証メールが届きます。
メール内のリンクをクリックして、認証を完了してください。
2. リポジトリを作成する
アカウントの作成が完了したら、以下の画面からGitHubにログインしておきます。
2-1. リポジトリ作成画面を開く
GitHubにログインした後、画面上部の「+」アイコンをクリックします。
表示されたメニューから「New repository」を選択してください。
2-2. リポジトリ情報を入力する
以下の情報を入力します。
| 項目 | 設定内容 |
|---|---|
| Repository name | 任意の名前（例：git-practice） |
| Description | 任意（空欄でもOK） |
| Public / Private | お好みで選択 |
| Add a README file | チェックを入れる |
その他の情報はデフォルトのままで問題ありません。
PublicとPrivateの違い
- Public：誰でも閲覧できる公開リポジトリ（後でポートフォリオとして活用しやすい）
- Private：自分（と招待した人）だけがアクセスできる非公開リポジトリ
GitHub Codespacesはどちらでも利用できます。
練習用であればPrivate、後から共有したい場合はPublicを選ぶと良いでしょう。
なお、リポジトリ作成後にいつでも切り替えできます。
READMEファイルとは
リポジトリの説明書のようなファイルです。
「このリポジトリは何のためのものか」「使い方」などを書いておく場所で、
GitHubでリポジトリを開いたときに最初に表示されます。
ここでREADME fileを追加する理由
READMEファイルがないリポジトリは「空っぽ」の状態となり、Codespacesで開いてもファイルが何もありません。
最初の1ファイルとしてREADMEを追加しておくと、Codespacesを起動した直後からGitの操作を試しやすくなります。
2-3. リポジトリを作成する
最後に「Create repository」をクリックすればリポジトリの作成完了です。
3. Codespacesを起動する
作成したリポジトリでCodespacesを起動します。
3-1. Codespacesを起動する
リポジトリのページで、以下の手順を実行します。
- 緑色の「Code」ボタンをクリックする
- 表示されたパネルで「Codespaces」タブを選択する
- 「Create codespace on main」をクリックする
起動時間について
Codespacesの初回起動には1〜2分程度かかります。
ブラウザ上にVS Codeのような画面が表示されれば起動完了です。
3-2. ターミナルを開く
Codespacesが起動したら、画面下部にターミナルが表示された状態になっています。
3-3. Gitが使えるか確認する
ターミナルが開いたら、以下のコマンドを入力してEnterを押してください。
git --version
以下のように表示されれば確認完了です。
Gitのインストール不要の理由
Codespacesの環境にはGitがあらかじめインストールされています。
これがCodespacesの大きな魅力で、git --versionを打つだけですぐにGitコマンドを使える状態になっていることが確認できます。
4. 実際にGitを体験してみる
ここからが本題です。実際にGitコマンドを使って、ファイルの変更履歴を記録してみましょう。
ここで体験する流れは以下の通りです。
ファイル作成
↓
git status（変更状況の確認）
↓
git add（変更を記録対象にする）
↓
git commit（変更を記録する）
↓
git push（GitHubに反映する）
4-1. ファイルを作成する
ターミナルで以下のコマンドを実行し、新しいファイルを作成します。
echo "Hello Git!" > hello.md
hello.md というファイルが作成され、中に「Hello Git!」と書かれた状態になります。
4-2. 変更状況を確認する（git status）
作成したファイルがGitにどう認識されているか確認します。
git status
以下のような出力が表示されます。
「On branch main」「origin/main」って何？
-
branch（ブランチ）：作業の枝分かれを管理する仕組み。今は
mainという名前のブランチで作業中、という意味です。 -
origin/main：GitHub上にあるリポジトリの
mainブランチを指します。 -
Your branch is up to date with 'origin/main'：自分のPC（Codespaces）の
mainと、GitHub上のmainが同じ状態であるという意味です。
ブランチについては奥が深い概念なので、この記事では「作業を区切るための仕組み」くらいの理解でOKです。
「Untracked files」とは？
Gitにまだ追跡されていないファイルのことです。
ここでいう「追跡」とは、Gitが変更履歴を記録する対象にしているという意味です。
新しく作成したばかりのファイルは、Gitから見ると「ここに新しいファイルができたのは知ってるけど、まだ履歴を記録する対象にはしていない」という状態になっています。
次のgit addを実行することで、Gitに「このファイルの履歴を記録してね」と伝えることができます。
4-3. 変更を記録対象にする（git add）
作成したファイルを記録対象に追加します。
git add hello.md
再度git statusを実行すると、ファイルが「Changes to be committed」（コミット対象）に移動していることが確認できます。
4-4. 変更を記録する（git commit）
変更を記録（コミット）します。
git commit -m "初めてのコミット"
-mオプションの後ろにあるメッセージは、コミットメッセージと呼ばれます。
「何を変更したのか」を後から見て分かるように、簡潔な内容を書きましょう。
4-5. GitHubに反映する（git push）
最後に、ローカルでの変更をリモートのGitHubに反映します。
git push
上記のログが出力されたら成功です！
4-6. GitHub上で確認する
ブラウザで自分のリポジトリのページを開き直してみてください。
hello.md が追加されていれば、無事にGitの一連の流れを体験できたことになります。
おめでとうございます
ここまでで、Gitの基本的な操作（add → commit → push）を一通り体験できました。
これがGitを使った開発の基本的な流れです。
5. Codespacesを停止する
体験が完了したら、Codespacesを停止しておきましょう。
起動したままにしておくと、無料枠を消費してしまいます。
停止手順
-
https://github.com/codespaces にアクセスする
-
起動中のCodespacesの「…」をクリックする
-
「Stop codespace」を選択し、Active表示が消えたら停止できています
無料枠について
GitHub Codespacesの無料枠は月60時間です。
使用しないときは必ず停止するようにしてください。
おわりに
ここまでで以下のことができるようになりました。
- GitHubアカウントの作成
- リポジトリの作成
- Codespacesの起動
- Gitの基本操作（add / commit / push）の体験
「Gitって難しそう」というイメージが、少しでも和らいだのであれば嬉しいです。
Codespacesを使えば、PCの環境を汚すことなく、いつでも気軽にGitを試せます。
ぜひ自分の好きなテーマでリポジトリを作って、Gitに触れる機会を増やしてみてください。
ネットにはGitについてたくさんの有益な情報がありますので、興味がある方はぜひ調べてみてください！
なお、本記事で深く触れなかったブランチについては続編で投稿予定です。
最後まで読んでいただき、ありがとうございました！