Gitの恩恵 #1 -Gitのはじめ方とリポジトリ-

こんにちは、ナオツです。

どんな開発業務においてもソースコードの管理は重要な仕事です。

今回は、開発の現場においてコード管理のデファクトスタンダードである 「Git」 について解説していきます。

読み方は「ギット」です。 僕は最初「ジット」と読んでて恥かきました^^;

Gitはソースコードの管理だけでなくチームでの共同開発を可能にします。

この記事では、

• なぜソースコードの管理が重要なのか。
• 実務ではどういうシチュエーションでGitコマンドを使うのか
• Gitを使う上での便利なTips

といったことについて紹介していければと思います。

また、Gitはコマンド操作が基本であるものの、実際の開発ではVS Codeを使ってエディターからGit操作をすることも可能です。

本記事では、実務に沿ってVS Code上での使い方も合わせて紹介します。

ソースコード管理の重要性

ファイルを間違えて編集したり、削除してしまったとき、復元できないと困りますよね。

メモ帳のようなエディターでも、編集中は復元（Undo）できます。 しかし、一度保存してエディターを閉じてしまうと復元は難しくなります。

仮に10個前の操作に戻す、といったことは普通のエディターでは難しいですよね？

あなたがWebサイトを作っているとして、追加機能をリリースをする際に、 元のコードを編集してインターネット上にアップロードしたあと、とんでもないバグが見つかってサイトそのものが動かなくなったとします。

そうなったとき、アップロードする前の元のバージョンに一時的に戻したい、ということは良くあります。

そのバージョンが100回保存した前の状態だったとしたら、、、エディターだけでこれを管理するのは難しいかと思います。

「好きなときに好きなバージョンへ戻せること」

これがソースコードの管理に求められることです。

またチーム開発においては、システムやサービスのドキュメントが完全に整備されていることは少なく、

既存のソースコードから仕様を理解することは普通にあることです。

「ソースファイルの何行目のコードを誰が編集したか」を明確にできないと、その内容がバグなのか仕様なのか判断できません。

最悪のその行を編集したエンジニアに聞けば判断できます。 障害が発生して1分1秒を問われる時、解決の可能性は広げておいたほうがダウンタイムを短くできます。

それでも判断がつかず、対応に時間がかかることは大いにありますが、、^^;

Gitのインストール方法

ではGitをインストールしてみましょう。

Homebrewでインストール可能です。

$ brew install git

Windowsユーザーの場合でもWSL上でHomebrewを実行しましょう。

詳しくはこちら

インストールが完了したら下記のコマンドで、インストールされているかどうかコマンドで確認しましょう。

$ git --version

インストールしたversionが表示されていればOKです！

git version 2.25.1

Gitの恩恵

さてGitのコマンドをいくつか実行しながら、Gitを使うとどんなメリットがあるのか解説していきたいと思います。

大きく3つあります。

• リポジトリ管理
• 更新履歴が管理できる
• チームで共同作業できる

本記事では1つ目の「リポジトリ管理」についてご紹介していきます。

残りの２つは今後の記事で紹介いたします。

リポジトリ管理

ファイルを管理する範囲のことを「リポジトリ（repository）」といいます。

「このディレクトリ以下のファイルを全部管理する」というイメージです。

これがGitのもたらす1つ目の恩恵です。

Gitの操作とは、リポジトリ内でファイルをGitの履歴対してアクションすることをいいます。

本記事では下記で作成したNext.jsのテンプレートを使っていきます。

Next.jsのテンプレート作り方

それではコマンドを実行して、リポジトリを作成します。

$ git init

Initialized empty Git repository in /xxxx/xxxx/.git/

ルートディレクトリに「.git」というファイルができました。

このディレクトリは、Gitが更新履歴などを管理していく領域です。

直接更新しないように注意しましょう。

また、ファイルを更新していく前に、最初だけ自分が何者かをGitに設定しておく必要があります。

下記コマンドを入力して自分の「メールアドレス」と「名前」を設定しておきましょう。

git config --global user.email "you@example.com"
git config --global user.name "Your Name"

特定のファイルを無視したいとき

リポジトリから特定のファイルを無視したい場合ありますよね。

とくにライブラリなどダウンロードしたソースは管理したくないものです。 またセキュリティ上、環境変数が記載された「.env」などの秘匿情報はGitの管理下に置いてはいけません。

特定のファイルをGitの管理下から無視したい場合は、リポジトリのルートに「.gitignore」というファイルを作成し、無視したいファイルを記載します。

ファイルだけでなく、ディレクトリを指定すると、指定したディレクトリ配下のファイルをすべて無視対象にできます。

.gitignoreの例

/node_modules

# local env files
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

ステージングとコミット

さて、最初の変更内容を決定して履歴に残してみましょう。

変更内容を決定するには、

• 変更したファイルをステージング状態にする
• ステージング状態のファイルをコミットする

の2段階の手順が必要です。

下記のコマンドを実行して、さきほどgit initしたリポジトリのファイルをすべてステージング状態にしてみましょう。

$ git add -A

1ファイルずつステージング状態にすることはできますが、-A にすることで、「リポジトリ内の変更した全ファイル」を対象にしています。

また、ファイルの状態を確認するには git status コマンドを実行します。

$ git status

On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
        new file:   .eslintrc
        new file:   .gitignore
        new file:   README.md
        new file:   next.config.js
        new file:   package.json
        new file:   pages/_app.js
        new file:   pages/api/hello.js
        new file:   pages/index.js
        new file:   public/favicon.ico
        new file:   public/vercel.svg
        new file:   styles/Home.module.css
        new file:   styles/globals.css
        new file:   yarn.lock

コミットしよう

ではでは、ファイルをコミットしてみましょう。

コミットする際は、メッセージを残しておくのが基本です。

どういう変更をしたのか、あとで履歴を確認したときに自分やチーム内で分かりやすくするためです。

最初のコミットなので「最初のコミットですよー」とメッセージ入れてみましょう。

コマンドは下記になります。

$ git commit -m "最初のコミットですよー"

すると、

[master (root-commit) 6ccf242] 最初のコミットですよー
 13 files changed, 3469 insertions(+)
 create mode 100644 .eslintrc
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 next.config.js
 create mode 100644 package.json
 create mode 100644 pages/_app.js
 create mode 100644 pages/api/hello.js
 create mode 100644 pages/index.js
 create mode 100644 public/favicon.ico
 create mode 100644 public/vercel.svg
 create mode 100644 styles/Home.module.css
 create mode 100644 styles/globals.css
 create mode 100644 yarn.lock

という結果が表示されます。

ステージング状態のファイルがコミットされ、Gitの履歴へ登録されました。

ブランチ管理

Gitではブランチと呼ばれる概念があります。 ブランチとはbranch（枝）のことで、更新履歴を分岐（枝分かれ）できます。

メインの履歴を main(master)ブランチ といい、はじめてコミットした時点で勝手に作られます。

ためしに下記のコマンドを実行してみましょう。作成されたブランチの一覧が表示されます。

$ git branch

すると、

* master

が表示されたかと思います。

デフォルトの履歴は「masterブランチ」として作成されます。

余談ですが、数年前に米国で黒人の差別問題が取り沙汰されました。

これを背景にしてGitHubやGitlabといったリモートリポジトリサービスが、メインの履歴ブランチを「masterブランチ」という名前ではなく、「mainブランチ」という名前にしましょう、ということになりました。

「master=主人」。

つまり主従関係・差別を連想させるからです。

この記事でも「masterブランチ」ではなく「mainブランチ」としてご紹介していきます。

それでは、コマンドを実行してメインのブランチ名を変更してみましょう。

$ git branch -m master main

再度ブランチを確認してみます。

$ git branch
* main

はい、ブランチ名が「main」に変更されました。

コマンドラインで作業ブランチ作成

もちろんメインのブランチだけでなく、作業用のブランチを好きなだけ作成できます。

ではためしに、「fix/readme」ブランチを作ってみましょう。

$ git checkout -b fix/readme

で、ブランチが作成されます。

Switched to a new branch 'fix/readme'

というログが表示され、「fix/readme」ブランチに切り替わりました。

確認してみましょう。

$ git branch
* fix/readme
  main

「fix/readme」に「*」がついているのがわかるかと思います。

これでブランチが作成され、現在のブランチが「main」から「fix/readme」に変更されました。

VS Codeで作業ブランチ作成

コマンドを使わなくても、VS Codeから簡単にブランチを作成することができます。

Gitをインストールしていると、VS CodeがGitを自動的に認識してくれます。

VS Codeの画面左下に「main」と表示されているのがわかるかと思います。

ここをクリックすると、「＋新しい分岐の作成」という操作ができます。

入力欄にブランチ名を入力すれば、コマンドラインで作成したのと同じようにブランチが作成できます。

ブランチの間違いに注意

実際の業務ではブランチをたくさん作っていくことになります。

その際に、今自分がどのブランチで作業しているかわからなくならないように、常に今のブランチを認識して作業する必要があります。

作業用のブランチで作業しているつもりが、mainブランチで作業していて間違ってコミットしてしまうと、メインの履歴に不要なコミットが残ってしまいます。

あとで履歴を探すとき邪魔になってしまいますね。

（履歴を削除するコマンドも用意されていますが、事故の元なのであまり使わないほうが良いです）

shellにGitブランチを表示させよう

シェルのコマンドラインにブランチを表示させるには、コマンドをいくつか実行するだけです。

こんな感じで、一度コミットしたGitリポジトリに移動するとブランチ名が表示されるようになります。

コマンド自体は結構長いので、ターミナルを起動するたびに実行するのは面倒です。

なので、ログインシェルにコマンドを追記しておきましょう。

Macの場合: zsh

Macのデフォルトシェルは「zsh」となるので、ホームディレクトリ（/home/{user name}）の「.zshrc」にコマンドを追記しておけば、ターミナルを起動する際に毎回ブランチを表示するためのコマンドが自動で実行されます。

「.zshrc」が見つからない場合は先に作成しておきましょう。

$ touch .zshrc

ファイルが作成されたら、下記のコードをコピペして「.zshrc」に追記しておきましょう。

# gitの設定
autoload -Uz vcs_info
setopt prompt_subst
zstyle ':vcs_info:git:*' check-for-changes true
zstyle ':vcs_info:git:*' stagedstr "%F{magenta}!"
zstyle ':vcs_info:git:*' unstagedstr "%F{yellow}+"
zstyle ':vcs_info:*' formats "%F{cyan}%c%u[%b]%f"
zstyle ':vcs_info:*' actionformats '[%b|%a]'
precmd () { vcs_info }

# 表示方法の設定
PROMPT='
[%B%F{red}%n@%m%f%b:%F{green}%~%f]%F{cyan}$vcs_info_msg_0_%f
%F{yellow}$%f '

追記したら、再度「.zshrc」を読み込みます。

source ~/.zshrc

これでシェルにブランチ名が表示されるようになります。

ブランチ名が表示されるだけでなく、ステージング状態かどうかでブランチ名の色が変わったり、いろいろ設定ができます。

詳しく知りたい方は「git プロンプト 色」などで検索してみるのも良いでしょう^^

Windowsの場合: bash

Windowsで環境構築する場合は、WSL2を用いてUbuntuなどのLinuxを使用することが多いかと思います。

その場合はデフォルトのシェルが「bash」になりますので、ログインシェルが異なります。

ホームディレクトリ（/home/{user name}）にログインシェル「.bashrc」が見つからない場合は先に作成しておきましょう。

$ touch .bashrc

ファイルが作成されたら、下記のコードをコピペして「.bashrc」に追記しておきましょう。

force_color_prompt=yes
color_prompt=yes
parse_git_branch() {
 git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}
if [ "$color_prompt" = yes ]; then
 PS1='${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[01;31m\]$(parse_git_branch)\[\033[00m\]\$ '
else
 PS1='${debian_chroot:+($debian_chroot)}\u@\h:\w$(parse_git_branch)\$ '
fi
unset color_prompt force_color_prompt

追記したら、再度「.bashrc」を読み込みます。

source ~/.bashrc

これでbashにブランチ名が表示されるようになります！

VS Codeでブランチをチェック

コマンド上だけではなくVS Codeでもチェックできます。

これは前述でブランチを作成した際にも説明しましたが、VS Codeの左下に現在のブランチ名が表示されています。

左下のブランチ名をクリックするとブランチを作成するだけでなく、いままで作成したブランチの一覧が確認できます。

ここで表示された「main」を選択してみましょう。

ブランチが「main」に切り替わります。

あとがき

いかがだったでしょうか？

今回はGitのはじめ方やリポジトリ・ブランチの概念を解説しました。

実際の業務ではVS Codeを使ってGitを操作することも多いので、VS Code上でよく使う操作もご紹介しました。

VS Codeについては、ほかにも便利なプラグインがありますので、今後の記事で紹介できればと思います。

それでは、また。