Gitで最初の制作履歴を保存する

Gitは制作履歴を残す道具

Gitは、ファイルを変更した履歴を保存するためのバージョン管理ツールです。途中で表示が崩れても、どこを変更したか確認しやすくなります。

GitとGitHubは別のものです。Gitはパソコン上で履歴を管理する仕組み、GitHubはGitの履歴をインターネット上で共有・保管できるサービスです。このレッスンではGitだけを使います。

Gitが管理する3つの状態

Gitでは、編集したファイルをいきなり履歴へ保存せず、確認する段階を挟みます。

Gitでは、制作中のファイル、次のコミットへ含める変更、保存済みの履歴を分けて扱います。この違いを理解すると、statusに表示される内容を判断しやすくなります。

• 作業ツリー：現在編集しているファイル
• ステージ：次のコミットへ含めると決めた変更
• リポジトリ：コミットとして保存された履歴

git addはインターネットへアップロードする操作ではありません。変更を次のコミットへ含めるため、ステージへ追加する操作です。

Gitを使えるか確認する

Visual Studio Codeでmy-first-siteフォルダーを開き、メニューから「ターミナル」→「新しいターミナル」を選びます。

次の図では、「Gitを使えるか確認する」の仕組みや関係を確認できます。

git --version

git versionに続いて数字が表示されれば使用できます。コマンドが見つからない場合は、Git公式ダウンロードページから自分のOSに合うGitを導入し、Visual Studio Codeを開き直してください。

制作フォルダーでGitを開始する

ターミナルの現在地がmy-first-siteになっていることを確認し、次のコマンドを実行します。

git init

これで制作フォルダー内に履歴を管理するための.gitが作られます。.gitは直接編集・削除しません。

Gitで保存しないものを理解する

パスワード、APIキー、サーバー接続情報などの秘密情報はGitへ追加しません。大きな書き出し元データや自動生成ファイルも、制作ルールに応じて除外します。

秘密情報を一度コミットすると、後のコミットで削除しても過去の履歴に残ります。コミット前の差分確認が重要です。

コミットする前に差分を確認する

git statusでファイル名を確認したら、Visual Studio Codeのソース管理画面またはgit diffで変更内容を確認します。意図しない削除や確認用コードを含めないようにします。

git add .は現在地以下の変更をまとめて追加します。変更が多い場合は、git add index.htmlのように対象を指定すると、内容ごとにコミットを分けやすくなります。

最初の状態をコミットする

まず、Gitが認識している変更を確認します。

次の図では、「最初の状態をコミットする」で押さえる違いを左右で比較しています。

git status

赤字で表示されたファイルは、まだ次の履歴へ含める準備ができていません。次のコマンドで制作フォルダー内の変更を追加します。

git add .
git status

対象のファイルが緑字になったら、コミットとして履歴を保存します。

git commit -m "最初のWebページを作成"

名前とメールアドレスの設定を求められた場合は、この制作フォルダーだけに使う情報を次のように設定してから、もう一度コミットします。

git config user.name "Your Name"
git config user.email "you@example.com"
git commit -m "最初のWebページを作成"

コミットは作業の区切りで作る

ページ全体が完成するまで1件もコミットしないのではなく、あとから状態を説明できる単位で保存します。表示できない途中状態を細かく残す必要はありませんが、作業目的が変わるところで区切ります。

• HTMLの基本構造を作成
• プロフィールカードの見た目を追加
• ボタンのクリック処理を追加
• スマートフォン表示を修正

コミットメッセージは、何を変更したか分かる短い文章にします。「修正」だけではなく「ボタンの余白を修正」のように対象を含めます。

履歴を確認する

git log --oneline

最初のWebページを作成というコミットが1行で表示されれば、最初の履歴を保存できています。

履歴を確認するときの見方

git log --onelineでは、左側にコミットを識別する文字列、右側にコミットメッセージが表示されます。新しい履歴が上に並びます。

この段階では、履歴を強制的に戻すコマンドを使いません。過去の内容を確認したい場合は、Visual Studio Codeの差分表示やログで変更点を読みます。

変更をもう一度保存する

index.htmlの文章を1か所変更して保存し、次の順番でもう一度コミットしてください。

git status
git add .
git commit -m "紹介文を変更"
git log --oneline

Gitの基本は「変更する → 状態を見る → 追加する → コミットする」です。何を変更した履歴なのか分かる短いメッセージを付けます。

制作で繰り返す手順

1. コードを変更してブラウザで確認する
2. git statusで変更したファイルを確認する
3. 差分を読み、意図しない変更を取り除く
4. コミットへ含める変更をgit addする
5. もう一度git statusを確認する
6. 内容が分かるメッセージでコミットする
7. git log --onelineで保存されたことを確認する