コンテンツにスキップ

Git・GitHub入門

Git はファイルの変更履歴を記録し，いつでも過去に戻れるようにするためのバージョン管理システムです。GitHub はその履歴をオンラインで共有するサービスです。

ここでは，ローカルで Git を始めて GitHub へ公開するまでを一通り体験します。前章でインストールした Git と VSCode を活用しながら進めましょう。

Git が解決してくれること

  • 変更履歴を自動で記録し，誰が・いつ・何を変更したかを追跡できる。
  • 間違えても過去の状態へ戻せる。
  • 複数人で同じファイルを編集しても差分をマージできる。

個人開発でもチームでも必須のツールです。

事前準備：インストール確認

Git for Windows をインストール済みか確認します。PowerShell または Git Bash を開いて次を実行しましょう。

git --version

バージョン番号が表示されれば準備完了です。インストールされていない場合は Git for Windows からダウンロードしてください。

Terminal を開いて以下を実行します。

git --version

初回は Xcode Command Line Tools のインストールを求められることがあります。表示されたダイアログに従って進めれば OK です。

Git の初回設定（ユーザー情報）

Git はコミットを作るときに名前とメールアドレスを記録します。初めての場合は設定しておきましょう。

git config --global user.name "あなたの名前"
git config --global user.email "your-email@example.com"

GitHub に登録しているメールアドレスと合わせると便利です。

ハンズオン：初めてのリポジトリ

  1. fes-training フォルダの中に hello-git というフォルダを作ります。

  2. ターミナルで hello-git に移動し，Git を初期化します。

    cd ~/Documents/fes-training/hello-git
git init

  3. README.md を作り，簡単な自己紹介を書きます。VSCode で編集するか，以下のコマンドで作成できます。

    echo "# はじめてのGit" > README.md

  4. Git の状態を確認します。

    git status

    README.md が「Untracked files」と表示されれば成功です。

  5. ファイルをステージに追加し，コミットします。

    git add README.md
git commit -m "初回コミット"

    1 file changed と表示されればコミット完了です。

GitHub との連携

  1. GitHub で新しいリポジトリ（例：hello-git）を作成します。README を自動生成するオプションはオフにしてください。

  2. リポジトリ作成後に表示される git remote add origin ... のコマンドをコピーして実行します。

    git remote add origin https://github.com/あなたのユーザー名/hello-git.git

  3. メインブランチを main に設定していない場合は作成し，GitHub へ push します。

    git branch -M main
git push -u origin main

  4. ブラウザで GitHub のリポジトリページを更新し，README.md が表示されていれば成功です。

SSH 接続を使いたい場合

公開鍵を登録すれば git@github.com:... の形式で push できるようになります。詳しくは GitHub Docs の「SSH を使用した Git 操作」を参照してください。

よく使う基本コマンド

コマンド 目的
git status 現在の状態（変更の有無，ブランチ）を確認
git add ファイル名 変更をステージに追加
git commit -m "メッセージ" ステージされた変更を記録
git log --oneline これまでのコミット履歴を確認
git push リモートリポジトリへ送信
git pull リモートの最新状態を取得

コミットメッセージは短く要点を

「何をしたのか」が 1 行で伝わるように意識しましょう。例：Add hero section layout など。

チーム開発では

  • 1 つの機能ごとにブランチを分けて作業します。
  • Pull Request でレビューを受けながらマージします。
  • Issues を使ってタスク管理を行うと便利です。

これらは React コースや実際の開発で徐々に体験していきます。

次のステップ

GitHub へ push できるようになったら，HTML・CSS と JavaScript / TypeScript の章へ進んでフロントエンド開発の基礎を固めましょう。React コースに挑戦する準備は万端です。