メインコンテンツまでスキップ

Gitを用いたバージョン管理

なぜバージョン管理システムが必要なのか​

企画書を作成することを考えてみてください。 企画書を修正する時に、最初の企画書を保存しておきたいと思うことがあるでしょう。 ファイル名を工夫することによりそれらのファイルを区別することが考えられます。 しかし、次の画像のようになってしまいます。 これだと、どのファイルが本当に最新であるのかがわかりません。

バージョン管理の例

Gitによるバージョン管理の仕組み​

バージョン管理システムを使うことでこのような問題を解決することができます。 Gitは、代表的なバージョン管理システムのひとつです。

Gitでは、コミットを作成することで、その時点での状態を記録することができます。 ここでいう状態とは、Gitで管理されているすべてのディレクトリやファイルの名前、その内容などです。 次の図のようにプロジェクトのある一定のまとまりごとにその時点での状態をコミットとして記録します。 こうすることで、どのファイルが最新であるのかがわかりやすくなり、また、過去の状態に戻すことも簡単になります。

Gitを使ったバージョン管理をする​

では、実際にGitを使ってバージョン管理をしてみましょう。

Gitを使ったバージョン管理は大きく次のような流れで行います。

  1. Gitリポジトリを作成する。
  2. ファイルに変更を加える。
  3. 必要な変更のみをステージする。
  4. コミットを作成する。

2回目からは、2.以降の手順を繰り返すことで、新たなコミットを作成していきます。

では、それぞれについて見ていきましょう。

Gitリポジトリを作成する​

Gitでは、リポジトリと呼ばれる単位でソースコードを管理します。 リポジトリはひとつのディレクトリに相当し、そのディレクトリ以下の全てのファイルがGitによる追跡対象となります。

まずはGitで管理するためのディレクトリを作成し、VS Codeで開きます。 左側のアクティビティバーのSource Controlパネル内のInitialize Repositoryボタンを押してください。 これで、カレントディレクトリをGitの管理下に置く (カレントディレクトリをGitリポジトリにする) ことができます。

git initコマンド

Gitの操作は、コマンドラインからも行うことができます。 次のコマンドを実行することで、カレントディレクトリをGitの管理下に置くこともできます。

git init

コマンドラインでのリポジトリ作成

.gitディレクトリ

Gitの管理下に置かれたディレクトリには.gitという名前のディレクトリが生成されます。 このディレクトリには過去のコミットの履歴など、Gitが内部的に使用するファイルが格納されます。 誤ったディレクトリでgit initコマンドを実行してしまった場合、このディレクトリを削除しましょう。 なお、ピリオドから始まるディレクトリやファイルはlsコマンドに-aというオプションをつけないと表示できないので注意が必要です。 また、VS Code上でも.gitディレクトリはデフォルトでは表示されません。

$ ls
$ ls -a
.  ..  .git
$ ls .git
branches  config  description  HEAD  hooks  info  objects  refs

変更をステージする​

コミットを作るためには、まず変更をステージする必要があります。 ステージすることで、Gitに対して該当ファイルをコミットする意思があることを伝えることができます。 Source Controlパネル内に表示されているファイルを押すとそのファイルにどのような変更が加えられたかを確認できます。 ステージするには、コミットしたいファイルの横の+ボタンを押します。 ファイルがChangesからStaged Changesに移ったら成功です。

git addコマンド

git addコマンドを使うことで、コマンドラインから、変更をステージすることもできます。

git add ステージするファイルへのパス

git addコマンドを使う前後で、現在のリポジトリの状態を確認することができるgit statusコマンドを使うことで、ステージされたファイルとステージされていないファイルを確認することができます。

最初のコミットを作成する​

それでは、最初のコミットを作成してみましょう。

ステージされた変更からコミットを作成するには、コミットメッセージを入力してCommitボタンを押します。 コミットメッセージには、そのコミットで行われた変更を説明する適切なメッセージを入力してください。

変更がコミットとして記録されました。

git commitコマンド

git commitコマンドを使うことで、コマンドラインから、コミットを作成することもできます。

git commit -m "コミットメッセージ"

コマンドラインでのコミット

.gitignore

.gitignoreファイルで指定されたファイルはGitの管理下に置かれません。 package.jsonとpackage-lock.jsonの情報から全く同じものをダウンロードできてバージョン管理するメリットのないnode_modulesや、機密情報や環境ごとに異なる情報を含む.envといったファイルが指定されます。

変更履歴を表示する​

先ほど作成したファイルを変更し、もう一つコミットを作ってみましょう。

これにより、2つ目のコミットが作成されました。 それぞれのコミットでどのような変更がなされたのかを確認するために、先ほどインストールしたGit Graph拡張機能を使ってコミット履歴を確認しましょう。command + shift + P (macOS) / Ctrl + Shift + P (Windows) キーを押してコマンドパレットを開き、Git Graph: View Git Graph (git log)を選択します。 それぞれのコミットでどのような変更がなされたのかを確認することができます。

git logコマンド

git logコマンドを使うことで、コマンドラインから、コミット履歴を確認することもできます。

コマンドラインでのコミット履歴の表示

git diffコマンド

git diffコマンドを使うことで、コマンドラインから、コミット同士の差分を確認することもできます。

コミットには一意のIDが割り当てられており、このIDをgit diffコマンドに与えることで、コミット同士を比較することができます。

下の動画の最後で実行されているgit diff @ @~は、最新のコミットとそのひとつ前のコミットを比較するためのコマンドです。 @が最新のコミットを、~が「そのひとつ前」を表します。

演習​

大学の学部一覧ページを作成することで、Gitの基本的な操作を学びましょう。 まずは、法学部、医学部、工学部、文学部、理学部、農学部、経済学部を含めた学部一覧を作成しましょう。 次に、教養学部、教育学部、薬学部を一覧に追加しましょう。

学部一覧

手順1​

Gitリポジトリを作成しましょう。

解答例

手順2​

index.htmlを作成し、学部一覧ページを作成しましょう。

解答例
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>学部一覧</title>
  </head>
  <body>
    <h1>学部一覧</h1>
    <ul>
      <li>法学部</li>
      <li>医学部</li>
      <li>工学部</li>
      <li>文学部</li>
      <li>理学部</li>
      <li>農学部</li>
      <li>経済学部</li>
    </ul>
  </body>
</html>

手順3​

差分を確認して、index.htmlをステージしましょう。

解答例

手順4​

コミットを作成しましょう。

解答例

手順5​

index.htmlを編集し、教養学部、教育学部、薬学部を追加しましょう。

解答例
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>学部一覧</title>
  </head>
  <body>
    <h1>学部一覧</h1>
    <ul>
      <li>法学部</li>
      <li>医学部</li>
      <li>工学部</li>
      <li>文学部</li>
      <li>理学部</li>
      <li>農学部</li>
      <li>経済学部</li>
      <li>教養学部</li>
      <li>教育学部</li>
      <li>薬学部</li>
    </ul>
  </body>
</html>

手順6​

差分を確認して、index.htmlをステージし、コミットを作成しましょう。

解答例

手順7​

コミットの履歴を確認して、変更が正しく記録されていることを確認しましょう。

解答例