Mima Design MemottoWEB DESIGNER · mima

初心者向けGitの基本操作を図解で整理

Gitは、プログラムやデザインデータの変更履歴を記録し、複数人で安全に管理するためのバージョン管理システムです。ファイルを上書きしてしまったときも、過去の状態へ戻したり、変更内容を確認したりできます。

Web制作やiPhoneアプリ開発では、試行錯誤しながらコードを修正する場面が多くあります。Gitを使えば、「いつ、何を、なぜ変更したのか」を残せるため、初心者でも安心して作業を進められます。

GitHubなどのリモートサービスと組み合わせると、パソコン内だけでなく、インターネット上にもプロジェクトを保存できます。ポートフォリオ制作やハッカソン、勉強会の成果物を共有するときにも役立つ仕組みです。

この記事では、Gitの基本用語から、ファイルを登録して履歴を保存する流れまでを図解風に整理します。コマンドを丸暗記するのではなく、作業の順番と役割を理解することを目指します。

Gitで管理できること

Gitでは、作業中のファイル、変更を登録する準備をしたファイル、保存済みの履歴を分けて扱います。この違いを理解すると、コマンドの意味がつながりやすくなります。

ファイルを編集
    ↓ git add
ステージングエリア
    ↓ git commit
ローカルリポジトリ
    ↓ git push
リモートリポジトリ

リポジトリは、Gitが変更履歴を管理する場所です。プロジェクトのフォルダー内で git init を実行すると、そのフォルダーをGit管理下に置けます。すでに公開されているプロジェクトを取得する場合は、git clone を使います。

最初に行う設定と確認

Gitをインストールしたら、コミットに表示する名前とメールアドレスを設定します。次の設定はパソコン全体で使われるため、普段使っている開発用の情報を入力します。

git config --global user.name "名前"
git config --global user.email "メールアドレス"

設定内容やGitの状態は、コマンドで確認できます。特に git status は、変更されたファイルやステージング済みのファイルを教えてくれるため、作業中に何度も使う基本コマンドです。

git status
git log --oneline

変更を履歴として保存する

ファイルを編集しただけでは、Gitの履歴には保存されません。まず git add でコミット対象を選び、その後 git commit で変更内容をひとつの記録として保存します。

編集 → 状態確認 → 追加 → コミット

git status
git add index.html
git commit -m "トップページを更新"

複数のファイルをまとめて追加する場合は git add . も使えます。ただし、意図しないファイルまで含まれる可能性があるため、最初は git status で対象を確認しながら、ファイル名を指定する方法がおすすめです。

コマンドの役割を比較する

似たように見えるコマンドでも、操作する場所や目的が異なります。作業に迷ったときは、現在のファイルがどの段階にあるかを確認してから実行しましょう。

コマンド 主な役割 使う場面
git status 変更状態を確認する 作業前後
git add 変更を登録候補にする コミット前
git commit 履歴を保存する 区切りがついたとき
git log 過去の履歴を見る 変更を調べるとき
git diff 差分を確認する コミット前の確認
git restore 変更を取り消す 編集前へ戻すとき

git diff を使うと、まだコミットしていない変更箇所を確認できます。意図しない修正が混ざっていないかを見る習慣をつけると、履歴が読みやすくなります。

ブランチで安全に試す

ブランチは、現在の作業から分岐した作業場所です。新機能の追加やデザイン変更を別ブランチで行えば、完成前の変更がメインの履歴に直接影響しません。

git switch -c feature/header
# ファイルを編集してコミット
git switch main
git merge feature/header

作業内容を確認して問題がなければ、merge でメインブランチへ統合します。GitHubを使う場合は、プルリクエストでレビューを受けてから統合する流れが一般的です。開発記録や制作物を公開しているポートフォリオサイトを参考に、成果物の管理方法を考えるのもよいでしょう。

失敗を減らす使い方

Gitは、変更を小さく分けて保存すると効果を発揮します。大きな作業を一度にコミットするより、「ボタンの見た目を変更」「画面遷移を追加」のように、目的が伝わる単位で記録すると後から探しやすくなります。

初心者が身につけやすい習慣を、次のように整理できます。

  • 作業を始める前に git status を確認する
  • 変更内容を見てから git add を実行する
  • コミットメッセージに変更目的を書く
  • こまめにコミットして履歴を細かく残す
  • 重要な作業前にブランチを作る
  • 不明なエラーは状態と差分を確認してから直す

Gitの操作に慣れてきたら、リモートへの push と取得の pull も試してみましょう。SwiftUIとUIKitの使い分けを考えるときは、関連する開発記事のように、選択理由を記録することも技術の振り返りに役立ちます。

まずは小さなHTMLファイルやアプリのサンプルを用意し、「編集、追加、コミット、履歴確認」の流れを実際に繰り返してください。今日の作業をひとつのコミットに残し、Gitを制作活動の安全網として活用しましょう。