概要

お久しぶりです
最近ありがたいことにチーム開発をする機会が増えて、改めてGitやGitHubについて人に教えられるぐらいちゃんと理解したいと思い今回記事を書いてみることにしました
今回は第一回ということでGitHubを理解する前にGitと基本用語の復習と環境構築の手順をまとめました

いまさら人に聞けないGitに関する基礎知識、これさえ読めば完全に理解できるでしょう…たぶん

なお筆者はWidows環境で開発しているのでMacでの環境構築とは解説等少し異なるかもしれませんので、その点ご理解いただけると幸いです💦

目次

事前準備
 1. Gitってなんだ？
2. Gitを理解する
 3. Gitのインストール
 4. Gitの設定
 あとがき

事前準備

GitHubについて勉強する前にそもそもGitとはなんぞ？と思う人もいるかもしれません
なんかチーム開発で共同作業できる便利なツール！ぐらいにざっくり知ってて使ってる人も多いと思います
これを機にしっかり復習しましょう👍

1. Gitってなんだ？

そもそもGitとは…

「ソースコードのバージョンを管理するツール」

ソースコードのバージョン管理？それができてどう便利なんだ？って思う人もいるかもしれません
今までこんな経験はありませんでしたか？

余計な変更を加えたソースコードそのまま保存しちゃった！元に戻したい！
開発途中のソースコードの続きを友達に作ってもらったけど、どこがどう変わったのか分からない！

そんなお悩みをさっくり解決してくれるのがGitと呼ばれるツールです

ソースコードの変更前と変更後の違いを確認することができる！
セーブした地点に巻き戻すことができる！

RPGに例えるならダンジョンの前でセーブして、上手く攻略できなかったらダンジョン前のセーブ地点に戻ることができたり、苦手なボス戦を友達に任せることができる！しかもリプレイ機能付きで攻略してるところを見返すことができる！そんなイメージです（今どきのゲームはオートセーブか…）

2. Gitを理解する

Gitについてなんとなく分かったところで、Gitでよく登場する用語をもとにGitがどういうものなのか理解していきましょう

リポジトリ(Repository)

たぶんみんなが一番よく目にする概念ですね
リポジトリとはずばり、管理したいソースコードのひとつのまとまりのこと です。

HTMLとかCSSとかJSなどなど…それらソースコードをまとめた大きなフォルダのまとまりのことをそう呼んでいます
このフォルダの中で必要なファイルを追加したり、ソースコードを編集、削除したりしますよね

コミット(Commit)

で、これらリポジトリに行う様々な操作を記録（セーブ）することをコミットと言います

基本的にソースコードに何か１つ編集を加えたらすぐコミット！を心がけましょう
ゲームもこまめにセーブするのが大事っていうよね

ブランチ（Branch）

ただ、闇雲にコミットをしていいわけではありません
一つのセーブデータに上書きしながらセーブしていくと誤ってゲームが積んでしまうことがあるのと同じように、開発においても闇雲なコミットによって作ってるものが壊れてしまうリスクがあります
そんな事故を防ぐために、Gitにもセーブデータを別の場所に複製できる機能があります

それがブランチです

我々エンジニアたちの間では「複製する」というよりも「分岐させる」と表現するのが一般的ですね
だからブランチ（木の枝）って呼ばれているんですね

具体的にどういった場面で使われるのかというと、
例えばここまで開発が順調に進んでるプロジェクトがあるとしましょう
そこでこんなことがあったとします

デザインが気に入らないからちょっと作り直したいけどまた戻したくなるかも…
次につくる新機能は○○君に任せたいけど安心して任せていいのかな
お客さんからの要望で新しい機能を追加したい！でもサービスを止めるわけにはいかない…

これらの悩みをすべて解決しましょう！

ブランチを活用すると上記の図のようにリポジトリを分岐させることができます
この時、分岐元（上の段）となる青いリポジトリがある場所、一番太い幹をmainブランチと呼びます
mainブランチには必ずバグのない正常なソースコードが管理されていなければなりません
最終的にこのmainブランチにあるソースコードが世に公開されるものと考えましょう

それに対し、今回上の図では赤色の「ブランチA」と呼ばれるブランチが作られました
このブランチはさっき紹介したmainブランチとは別のセーブデータなのでここで変更された内容はmainブランチには一切反映されません
つまり、mainブランチで正常に動いているソースコードを傷つけることなく新たに機能を追加したり編集することができるわけです！すごく便利ですよね！

「あれ？」

勘のいい皆さんならお気づきのことでしょう
ブランチAで編集した内容がmainブランチに反映されないなら何のためにブランチがあるんだ！新機能作った後はどうすればいいんだ！

マージ（Merge）

ちゃんとその悩みに応えてくれる機能があります
それがマージです
マージとは、あるブランチに対して別のブランチを取り込むことをいいます
先程ブランチAで完成させた新機能をmainブランチに反映させちゃいましょう

このようにマージを使うことで攻略の進んだ別のセーブデータで古いデータを上書きすることができます
これで安全にmainブランチに新機能を追加することができました

この他にもいろいろな単語が登場してきますが実際に触りながらの方が理解しやすいのでここからはGitが使えるようにセットアップしていきましょう

3. Gitのインストール

上記のリンクにアクセスすると下の画像のようなページに飛ぶと思います（下記Windows環境のインストール手順になります）

画像の赤枠で囲った部分をクリックするとインストーラがダウンロードできます
そのままデスクトップ等分かりやすい場所に落としましょう
インストーラを起動します

保存場所、コンポーネント、スタートメニューフォルダはそのままNext→

デフォルトのエディタ設定です
VSCodeを使ってる場合は「Use VisualStudioCode as Git's default editor」を選びましょう
VimとかSublimeTextとか他のエディタ使っている人はそれぞれ適したエディタをプルダウンから選択してください

イニシャルブランチ（前述したmainブランチのこと）の名前の指定ができます
下を選んでmainと入力しましょう

GitのPATH環境変数の設定です
真ん中を選びましょう、Gitコマンドをどのターミナルでも使用できるようにしてくれます

SSH、SSLの設定です
デフォルトのままNext→

Gitの行終端処理の設定です
一番下を選んでNext→

3つとも一番上を選んでNext→

追加オプションの設定です
上はfsCacheを有効にするか設定するオプション、下はシンボリックリンクを使用するか設定するオプションです
後から変更可能なので今は両方チェックを入れてNext→

試験的なオプションのインストールができますがこちらは両方とも不要なのでチェックを外してInstall→

インストールが開始されます
完了したらFinishでインストーラを閉じましょう

インストールされているか確認

コマンドプロンプトを開きGitのバージョン確認をしてみましょう
下記のようにコマンドを入力してみて、バージョン情報が返ってこればインストール完了です

$ git --version
git version 2.40.1.windows.1

4. Gitの設定

Gitに自分のアカウント情報を登録しましょう
コンフィグコマンドを使って設定ができます

$ git config --global user.name "{自分の名前}"

$ git config --global user.email "{自分のメールアドレス}"

チームで開発をするときに誰がコミットしたのかが分かるように表示される名前になります
必ず設定しておきましょう

以上でGitの環境構築が終わりました。

あとがき

今回はGitの理解と環境構築編でした
いかがでしたでしょうか？
次回はGitで扱える優秀なコマンドたちを、実践を交えながら解説していければと思います
使いうちに投稿すると思うので今しばらくお待ちください
ご不明点や間違っている箇所があればコメントいただけると嬉しいです
それではまた次回の投稿でお会いしましょう～👋