株式会社リクルートスタッフィングが運営するITSTAFFINGでは、弊社に派遣登録いただいている皆さまのスキル向上を支援するイベントを、定期的に開催しています。
2019年4月5日のイベントでは「マンガで学ぶ、Gitの使い方超入門ハンズオン」を開催。プログラム開発者からWeb制作者まで、幅広い層に使われているバージョン管理ツール「Git（ギット）」。まだ使ったことがない人のために、基礎の基礎から教えてくださいました。書籍『わかばちゃんと学ぶ Git使い方入門』のマンガのエピソードを交えながら解説してくださる上、自分のノートPCを持ち込んで実際に操作するハンズオン形式だったので、とても楽しく分かりやすいイベントでした。
・Gitってなに？どう便利なの？
・リポジトリとは
・ステージングとコミットの概念
・ブランチの概念
・GitHub上のリポジトリにプッシュとプルができるようになろう
Twitterアカウント： https://twitter.com/llminatoll
Gitってなに？どう便利なの？
Gitというと「難しそう」とか「エンジニアが使うもの」という印象があるかもしれません。そもそもメリットがわからないと学ぶ気になれないものです。書籍『わかばちゃんと学ぶ Git使い方入門』の主人公であるわかばちゃんが、マンガでGitのメリットを紹介してくれました。
大学に通うわかばちゃんは、Webのゼミを選択しており、誰もいないゼミの教室で、勉強を兼ねて個人サイトを制作しています。しかし、CSSをちょっと編集しようとしたら、デザインが壊れてしまいました。元に戻したいと思い、修正を加える前のファイルを探すのですが、過去に保存したファイル名の付け方がいい加減で、見つからず、思わず「どれだよ」と叫びます。
Web制作、プログラム開発だけでなく、ワープロや表計算ソフトで文書を作成する際もよく見かける「あるある」です。わかばちゃんの気持ちがよく分かります。
Gitは、プログラムのソースコードやドキュメントのバージョンを管理するためのツールです。例えるならば、ロールプレイングゲームで、ボスキャラを倒す前にセーブしておくイメージです。ボスに負けてゲームオーバーになっても、ボス戦前に戻ることができるアレです。つまり、間違ったコードを書き込んでしまい、プログラムが動かなくなったとしても、正常に動いていた頃の状態をいつでも復元できるというわけです。
Gitのメリット
Gitには、さらに大きなメリットがあります。複数名で開発や制作を行う現場では、誰が・いつ・どこで・何のために・どう修正したかという記録が煩雑になります。Gitは、それを一元的に取りまとめることができます。
企業やプロジェクトでGitを複数名で利用する際、よく使われているのがGit Hub（ギットハブ）というサービスです。GitHubは、簡単に言うとソースコードの保管場所です。とはいえ単なるソースコード置き場ではなく、メンバー間のコミュニケーションの場として機能するのが特徴です。たとえば、修正した箇所をプルリクエストという形で提案したり、掲示板のような見た目でお互いのソースコードにレビューしあったりすることができます。
リポジトリとは？
ここからは、実際にGitを動かしながら、使い方を学んでいきました。
まずはリポジトリについてです。Gitにおけるリポジトリは、コードの過去の状態が記録されている貯蔵庫のようなもの。
はじめに、あらかじめイベント開始前に自分のPCにダウンロード&インストールしておいたGUIツール「SourceTree」を起動します。SourceTreeは、もともとコマンドラインツールのGitをGUI環境で手軽に使うためのものです。まずはリポジトリを新規作成します。
ローカルリポジトリ「R-TEST」が作られます。これをダブルクリックして開いてみると、まだ何もありません。そこでフォルダR-TESTの中にテキストファイルを作成します。
リポジトリにファイルの更新履歴を記録していきます。リポジトリへの記録手順について理解するために、またわかばちゃんが登場します。
マンガでは、みんなでお好み焼きを作るのですが、その手順の要所要所で写真に記録を残していきます。粉と水と卵を混ぜたところを撮影台に乗せて撮影し、キャベツを千切りにしたものを混ぜて、また撮影台に乗せて撮影し……と。「料理ブログにでも載せるのかな？」と不思議に思うわかばちゃん。ところが、最後に、ゼミの教授がそこにコーラを混ぜてしまい残念な結果になってしまいます。
「はぁ、キャベツを混ぜたところに戻れれば……」
そんな声に応えてくれるのがGitです。Gitは、撮影した時点にいつでも戻せる魔法のカメラのようなものなのです。
早速、先ほどR-TESTフォルダ内に作成したテキストファイルを、ステージングエリアに乗せてみましょう。
次にステージングエリアに乗せたファイルを選び、コミットします。
これで、初めてのコミットが記録されました。以降、同様にファイルに変更を加え、ステージングして、コミットすると、そのたびに更新履歴が記録されていきます。
コミットを繰り返すうちに、以前の状態に戻したくなったら、SourceTreeの履歴一覧から目的のものをダブルクリックします。これでファイルの内容がその時点のものに戻ります。これをチェックアウトと呼びます。
もしかすると、ステージングエリアに乗せる作業が二度手間なように思った方もいるかもしれませんね。なぜステージングエリアは必要なのでしょうか？
それは、開発の中で、一度にいくつもの更新ファイルがあったとき、コミットを分けて行いたいというケースがあるからです。たとえば、CSSとJavaScriptを同時に編集し、まとめてコミットしてしまったとしましょう。コミットした時点では特に問題がないように思えますが、後々CSSだけを元に戻したくなった場合、JavaScriptまで一緒に過去の状態に巻き戻ってしまうと不都合です。そういうわけで、コミットの粒度を人間が選ぶことができるようにこのステージングエリアという仕組みがあるのです。
ブランチの概念
Gitには、ブランチという概念があります。これはいわば並行世界、つまり“同時並行で進む世界”と考えることができます。ここでは湊川さんのサイトにある「絵文字でわかるGit」をベースに解説が進みます。
https://webdesign-manga.com/emojigit/
たとえば、お寿司を作ることを考えます。お寿司はシャリとネタからできていますが、これらを用意する過程をkomeブランチとsakanaブランチに分けるとします。
komeブランチでは、苗を植え→稲を育て→米を収穫するというように作業を進め、sakanaブランチのほうも、稚魚→魚→マグロと作業を進めていき、米とマグロを最終的にマージしてお寿司にします。
ソフトウェア開発のシーンでも、機能ごとに分け、同時並行で開発したり、本番用と新規機能用の開発を並行して進めることがあります。そういったときに役立つのがブランチです。それぞれのブランチで作業を進め、結果をマージ（合体）させます。
同時並行で開発を進めていくと、同じ行に異なる修正が入ることがあります。たとえばAさんとBさんが同じファイルの3行目をそれぞれ別の内容に書き換えていた、といった場合です。その状態でマージしようとすると、Gitが「コンフリクト（衝突）しているよ」と教えてくれます。AさんとBさん、どちらの修正を採用するかは、マージする人が適宜判断します。
GitHub上のリポジトリにプッシュとプルができるようになろう
後半では、複数メンバーでの開発について学びました。Git Hubにログインし、湊川さんが用意した練習用リポジトリ（すでにHTMLファイルが用意されているもの）を、自分のGit Hubアカウントにフォーク（分岐）させて、そのGit Hubのリモートリポジトリのクローンを自分のPCに作成（コピー）し、ローカルリポジトリを作成します。
そして、ローカルリポジトリ上でHTMLファイルに自己紹介を追加し、Git Hub上のリモートリポジトリにプッシュし、自身の変更を湊川さんのソースにマージしてもらうためプルリクエストを送ります。プルリクエストとは「こういう変更を加えたからあなたのリポジトリに反映して欲しい」という連絡です。これを見て、湊川さんはリクエストのあったソースコードを自分のGit Hubリポジトリに取り込みます。
会場では、イベント参加者から寄せられるプルリクエストに応じて、湊川さんが、それぞれの変更をマージして取り込み、GitHub Pages上でひとつのWebページを完成させました。
Gitは、もともとコマンドラインで使うツールとのことですが、今回はSourceTreeというGUIツールを使ったので、クリックするだけの直観的な操作で行うことができました。また、湊川さんの書籍『わかばちゃんと学ぶ Git使い方入門』のマンガを見ながら学ぶことで、概念を理解しやすく、苦手意識を持つことなく、参加者の皆さんもGitに親しむことができました。
