Gitはファイルを管理してくれるソフトウェアです。
前回までに、HTMLファイルやCSSファイルを編集してきました。Gitはこれらのファイルを保管してくれます。Gitに保管しておくことで、自分の環境が壊れてしまったり、ファイルを無くしてしまったり、うまく動作しなくなったので過去のファイルを取得したい場合などに、Gitからファイルを取得して環境を再構築することができます。

Gitの概要
Gitは主に以下のような機能をもっています。
ファイル管理
HTMLファイルやCSSファイルなどのファイルを保管してくれます。
Webエンジニアは、Gitにファイルを保管したり、Gitから保管しておいたファイルを取得することができます。
バージョン管理
Gitはバージョン管理をしてくれます。

最新のバージョンだとうまく動作しなくなった場合などに、過去のバージョンのファイルを取得することができます。
履歴管理
バージョン間のファイルの差分を確認することができます。
例えば上図の場合、「最新のバージョン」と「過去のバージョン2」との差分は、「<div class=”box3″>BOX3</div>」です。このように、Gitを介してバージョン間のファイルの差分を確認することができます。
チーム開発
複数人でプロジェクトを進める場合、ファイルをみんなで管理しなければいけません。みんながアクセスできる場所にGitサーバーを用意することで、みんながそこにファイルを保管したり、そこからファイルを取得することができるようになります。

Gitのインストール
まずは自分の環境にGitをインストールします。
Gitの公式サイトから、Gitのインストーラーをダウンロードします。

ダウンロードしたインストーラー「Git-<バージョン>-64-bit.exe」をダブルクリックして実行します。

















Windowsのタスクバーの検索窓で「cmd」と入力し、見つかった「コマンドプロンプト」を選択して実行します。

コマンドプロンプトで「git –version」と入力します。
以下のように、Gitのバージョンが表示されればOKです(=インストールに成功しています)。

Gitの基本用語
リポジトリ(Repository)
リポジトリとは、Git内でのファイルの保管場所です。
さらに、リポジトリは「ローカルリポジトリ」と「リモートリポジトリ」に分かれます。

ブランチ
リポジトリ内のファイルの保管場所は、複数に分けることができます。
複数に分けた場所のことを「ブランチ(枝)」と呼びます。

ブランチに分ける理由は、例えば以下です。
- チーム開発にあたり、Aさんにはbranch_1で、Bさんにはbranch_2で分かれて作業することで、全員がmasterブランチを触って作業が衝突しないようにする。
- お客様向けの製品開発で、X社向けの製品はbranch_1で開発し、Y社向けの製品はbranch_2で開発するようなケースです。
branch_1やbranch_2からさらに枝分かれしてブランチを作成することも可能です。
Gitコマンド
先ほど、コマンドプロンプトで「git –version」を実行しましたが、これを「コマンド」と言い、Gitに関するコマンドを「Gitコマンド」と呼びます。
Gitをインストールすると、各種のGitコマンドが使えるようになります。ここでは、基本的なGitコマンドを説明します。
clone
cloneは、リモートリポジトリからローカルリポジトリにファイルをコピーするコマンドです。

コマンドプロンプトで実行するコマンドは以下になります。
(URLは例です。ここでは参考として見るだけにしておいて下さい)
git clone リモートリポジトリのURL(https://hoge.comなど)
pull
pullは、リモートリポジトリの状態をローカルリポジトリに反映するときに利用します。

例えば、チーム開発をしていて、Aさんがファイルを編集してリモートリポジトリに保管したとします。次に、Bさんが同ファイルを使いたいとした場合、Bさんのローカルにはまだ同ファイルは存在しません。ここで、リモートリポジトリの状態をローカルリポジトリに反映することで同ファイルを取得します。
コマンドプロンプトで実行するコマンドは以下になります。
(ここでは参考として見るだけにしておいて下さい)
git pull origin master
「origin」はリモートリポジトリの名前、「master」はブランチの名前です。
前者は固定、後者は所望のブランチ名を指定して下さい。
※「master」ではなく「main」の場合もあります。
add
addは、Gitのリポジトリの外にあるファイルを、ローカルリポジトリに追加する(ローカルリポジトリに認識してもらう)コマンドです。

コマンドプロンプトで実行するコマンドは以下になります。
(ここでは参考として見るだけにしておいて下さい)
git add ファイル名
commit
addコマンドでファイルをGitに認識してもらった後は、commitコマンドでファイルをGitに保管することができます。ローカルでの開発の流れは以下になります。
① addコマンドでGitにファイルを認識してもらう(=commit対象になる)
② ファイルを編集する
③ commitコマンドでファイルをGitに保管する
(=編集内容をローカルリポジトリに反映させる)
④ ②③を繰り返す
コマンドプロンプトで実行するコマンドは以下になります。
(ここでは参考として見るだけにしておいて下さい)
git commit -m “任意のコメント”
コメントを付けることができるので、他の人に変更内容がわかるようなコメントを付けて下さい。
以下のように、addとcommitをいっぺんに実行することもできます。
git commit -am “任意のコメント”
push
pushは、ローカルリポジトリからリモートリポジトリへ、ファイルの変更内容を反映させるコマンドです。

コマンドプロンプトで実行するコマンドは以下になります。
(ここでは参考として見るだけにしておいて下さい)
git push -u origin master
「origin」はリモートリポジトリの名前、「master」はブランチの名前です。
前者は固定、後者は所望のブランチ名を指定して下さい。
本節の説明は以上になります。