CRI BOOT CAMP
作成日：2021/04/12 更新日：2022/08/09
#3 Gitでファイルをバージョン管理
バージョン管理システムとは
「バージョン管理システム」とは、ファイルの状態を更新履歴として保存・管理するシステムです。不特定多数の人が作業する制作・開発現場において、このバージョン管理システムは力を発揮します。
一つのファイルを多数の人が編集する場合、そのファイルの状態は最終更新者のものになってしまいます。
その場合、以前までに別の人が編集していた内容が反映されていない状態になってしまったり、元に戻したくても戻せなかったりと、弊害が多いです。
バージョン管理システムでは、各作業者の変更を履歴として管理し、いつでも復元可能な状態に管理できます。
また、各変更履歴の内容を分岐させたりすり合わせたりして、ファイルを正常な状態に保ってくれます。
Gitのインストール
MacにGitをインストールします。Gitを使えるアプリケーションを入れるケースなどもありますが、VSCodeでGitを使えるようにするために、まずはMacにインストールしてみましょう。
% git --version
↓
git version 2.32.1 (Apple Git-133)
しかしバージョンを変更することが難しいので、Gitのバージョンを管理できるようにしておきたいので、Homebrewを使ってGitをインストールします。
% brew install git
% echo 'export PATH=/usr/local/bin/git:$PATH' >> ~/.zshrc
% source ~/.zshrc //.zshrcの再読み込み
か
% exec $SHELL -l //ターミナルの再起動
.zshrcファイルにパスを記述しましたので、ターミナルを再起動して完了させます。
% git --version
↓
git version 2.37.1
初期設定として、最初にユーザー名とメールアドレスを登録します。
% git config --global user.name "user"
% git config --global user.email "user@aaaa.com"
これでMacでGitが使えるようになりました。
VSCodeにGitを設定する
機能拡張からGit Graphをインストールします。
適当にHTMLを記述しました。
ファイル→フォルダをワークスペースに追加 で開いた場合には出ませんが、 新規のファイルの場合はこのような表示になります。
リポジトリの初期化 をクリックします。
リポジトリを作るフォルダ（管理対象となるフォルダ）を選択します。通常は開いているフォルダとなります。
上記でフォルダを選択すると、新たに「.git」という不可視フォルダが生成されます。このフォルダを直接触ることはありません。
状態管理が始まるため、最初は全てのファイルを登録（コミット）することになります。
適当になにかメッセージを入れて、コミットボタンを押します。
コミットするとこのような表示になります。
Git Graphで確認すると「最初のコミット」というコメントともに、コミットされていることが確認できます。
文字を変えて、保存してみます。そうすると変更のあったファイルの数がアイコンに表示されます。
再度コミットしてみようと思いますので、またコメントを記入してコミットボタンを押してみましょう。
Git Graphで確認すると二回目のコミットも保存されています。
#4 Gitを視覚的に確認できるSourcetree
Gitは本来、「CUI(Character User Interface)に分類されるアプリケーションで、 キーボードからのコマンド入力と画面の文字表示のみで操作します。Gitを説明するときに、GUIで直感的に分かりやすいので、専用のアプリケーションSourcetreeで説明してみます。
Sourcetreeインストール
Sourcetreeは主に、各々の端末上で作業を行う際に使用します。まずは下記リンクボタンよりインストーラーのダウンロードを行ってください。
Sourcetreeダウンロードサイトへ
インストーラーをダウンロードしたら、起動してsoucetree本体を各々の端末へインストールします。
※途中、アトラシアンのアカウント連携を求められる箇所があると思いますが、無視して先へ進んで問題ありません。
各項、初期設定のまま次へを押下して進んでください。
「リポジトリ」とは
ファイルやディレクトリの状態(変更履歴)を管理・記録する場所を意味します。Gitの操作やGitで管理したいファイルやディレクトリの編集作業は基本、このリポジトリ上で行うことになります。
「リモートリポジトリ」と「ローカルリポジトリ」
リポジトリには、「リモートリポジトリ」と「ローカルリポジトリ」の2つが存在します。リモートリポジトリ
専用のサーバに配置し、複数人で共有するリポジトリ。
全てのリポジトリの親に相当するリポジトリで、必ず1つだけ存在する。
ローカルリポジトリ
個人用の、自身の開発用端末へ配置するリポジトリ。
リモートリポジトリの複製で、各開発者の端末に1つずつ存在する。
Gitでの作業は、リモートリポジトリで行う作業とローカルリポジトリで行う作業の2つに大きく分かれることになります。
「クローン」とは
リモートリポジトリをコピーし、ローカルリポジトリを作成します。従って、前項での作業は
- GitHubなどのプロジェクト上で、事前に作成されているリモートリポジトリを確認
- リモートリポジトリが配置されている場所が示されているURLを取得
- Sourcetreeにて、URLを元にリモートリポジトリを参照させ、各々の端末に複製であるローカルリポジトリを作成
バージョン管理システムにGitを導入している開発・制作現場においては、まず最初に行う作業です。
全てを正確に理解するのは難しくても、作業の流れだけでも把握しておいてください。
次からは、クローンしてきたローカルリポジトリでの作業に入っていきます。
「ブランチ」とは
#1で少し触れましたが、Gitには履歴の流れを分岐して記録していく為の仕組みが備わっています。「ブランチ」と呼ばれる機能です。「branch = 枝」という名称通り、リポジトリ内において作業スペースを「分岐」させる事が可能です。
分岐したブランチは他のブランチで発生した変更の影響を受けない為、同じリポジトリ内で複数の変更を同時に進める事が可能となります。
多数の開発者が同時に作業を進めていく開発・制作現場において、ブランチの活用は非常に重要です。
ブランチを切る
実際に、これから作業を行う為のブランチを作成してみましょう。(新規ブランチを作成することを、「ブランチを切る」と言います。)
①画面左メニューバー内「ブランチ」を確認。
左側に丸が付いているものが、現在あなたが「チェックアウト(=選択)」しているブランチです。
チェックアウトしているブランチが「master」ブランチであることを確認した上で、画面上部の「ブランチ」をクリックします。
ブランチは、どのブランチからでも新しいブランチを切る事が可能ですが、今回は「master」ブランチからブランチを切ることにします。
※「masterブランチ」
リポジトリを作成すると必ず一番最初に生成されるブランチです。
Gitではよく「木の幹」に例えられる事が多いブランチで、そこから作業スペースを枝別れさせていく様から、この機能が「ブランチ」という名称になった様です。
②詳細を設定し、ブランチ作成。
各ブランチにはそれぞれ、そのブランチ毎の履歴が記録されています。なので、ただ闇雲にブランチを切れば良い訳ではなく、どのブランチから新規ブランチを切るのかも重要になってきます。
どのブランチから新規ブランチを切るのかも合わせて確認する癖をつけておきましょう。
新規ブランチの名称は、分かりやすく「practice_個人名」にしておいてください。
その他のラジオボタンやチェックボックスには触れずに、「ブランチを作成」をクリックしましょう。
入門
基礎
応用
実践フロントエンド
実践バックエンド
デザイン
キッズ