はじめに
本ブログのカテゴリ「GitHubでつくって学ぶ」では、実際にコードをGitHub Codespaces上で試しながら学習を進めていく記事を扱っている。「Reactで学ぶ 予定管理アプリ開発」シリーズも、このカテゴリに入る。
本記事では、各シリーズを読み進めるにあたって前提となる「GitHubとは何か」「なぜ学習にGitHubを使うのか」を整理しておく。すでにGitHubを使い慣れている場合は読み飛ばしてもらって構わない。
Gitとは・GitHubとは
まず、名前が似ている2つを区別しておく。
- Git：ファイルの変更履歴を記録・管理するためのソフトウェア（バージョン管理システム）。自分のパソコンの中だけでも使える
- GitHub：そのGitの仕組みを使って、コードをインターネット上で保存・公開・共有できるサービス
つまり、「Gitという道具」を使って、「GitHubという場所」にコードを置く、という関係になる。
なぜ学習にGitHubを使うのか
- 変更履歴が残る：「どこを、いつ、なぜ変えたか」が記録として残るので、後から見返しやすい
- 公開すればポートフォリオになる：自分が学んだ過程がそのまま形として残り、他の人にも見てもらえる
- 他の人のコードを参考にできる：世界中の学習者・開発者が公開しているコードを読んで学べる
- バックアップになる：パソコンが壊れても、GitHubに置いてあるコードは失われない
最低限おさえておきたいコマンド
GitHubの操作は色々あるが、学習用途であれば、まずは以下の4つを覚えておけば十分である。
| コマンド | 役割 |
|---|---|
git clone <URL> | GitHub上のリポジトリを、自分のパソコンにコピーしてくる |
git add <ファイル> | 変更したファイルを「次に記録する対象」として選ぶ |
git commit -m "メッセージ" | 選んだ変更を、履歴として記録する |
git push | 記録した履歴を、GitHub上のリポジトリに反映する |
流れとしては、「変更する → addで選ぶ → commitで記録する → pushでGitHubに送る」という順番になる。
GitHub Codespacesについて
GitHubには、ブラウザ上だけで開発環境を用意できるGitHub Codespacesという機能がある。リポジトリのページから起動するだけで、Node.jsなどがすでに入った状態のクラウド上の開発環境（VS Code風のエディタ＋ターミナル）が使える。
- 自分のパソコンにNode.jsなどをインストールしなくても、ブラウザだけで
npm installやnpm run devが試せる - パソコンの環境を変更せずに、リポジトリごとに独立した環境で作業できる
- 逆に、リポジトリのルートでコマンドを実行してしまいがちな点（本シリーズVer.1の記事で触れたディレクトリ違いのエラーなど）には注意が必要
基本的に無料で利用できるが、無料枠には上限がある点には注意が必要である。GitHubの無料の個人アカウントの場合、1か月あたりストレージ15GB、コンピューティング時間120時間（2コアマシンの場合）までが無料の範囲となっている。（2026年7月現在）
この範囲を超えて使い続けると、支払い方法を登録していないアカウントでは使用がブロックされる（登録していれば、超過分に課金される）。学習用に少し触るだけであれば上限に達することはまずないが、Codespacesを開いたまま何日も放置する、といった使い方は避けた方がよい。
本連載のコード検証は、実際にこのGitHub Codespaces上でnpm install・npm run dev・npm run buildを実行し、動作を確認したうえで記事にしている。
ローカル環境が用意できない場合でも、Codespacesを使えば同じ手順をそのまま試せるはずである。
本ブログでのGitHubの使い方
このカテゴリの記事は、以下のようなルールで運用している。
- 1つの連載につき、1つのGitHubリポジトリを用意する（例：
pc-labo-react-learning） - 連載の回（Ver）ごとに、リポジトリ内にフォルダを分ける（
01_xxx、02_xxx…） - 各フォルダには、そのVerで書いたコードと、内容をまとめたREADME.mdを置く
- 記事本文には、対応するGitHubのフォルダへのリンクを必ず貼る
つまり、記事＝説明、GitHub＝実際に動くコードという役割分担にしている。記事を読んで理解した後、実際に手を動かしたい場合はGitHubからコードを取得して試してもらえる作りになっている。
まとめ
- Gitは変更履歴を管理する道具、GitHubはそれを使ってコードを公開・共有できる場所
- 学習用途でも「変更履歴が残る」「公開できる」というメリットは大きい
- 最低限、
cloneaddcommitpushの4つを押さえておけば困らない - GitHub Codespacesを使えば、ローカル環境を用意しなくてもブラウザだけで動作確認できる（ただし無料枠には時間・容量の上限がある）
- 本ブログでは、連載ごとにリポジトリを分け、回ごとにフォルダを分けて運用している
「GitHubでつくって学ぶ」シリーズ記事は、この前提を踏まえて読み進めてもらえればと思う。
コメント