派遣で働くエンジニアのスキルアップを応援するサイト

PRODUCED BY RECRUIT

【イベントレポート】マンガで学ぶ、Gitの使い方超入門ハンズオン

株式会社リクルートスタッフィングが運営するITSTAFFINGでは、弊社に派遣登録いただいている皆さまのスキル向上を支援するイベントを、定期的に開催しています。

2019年4月5日のイベントでは「マンガで学ぶ、Gitの使い方超入門ハンズオン」を開催。プログラム開発者からWeb制作者まで、幅広い層に使われているバージョン管理ツール「Git(ギット)」。まだ使ったことがない人のために、基礎の基礎から教えてくださいました。書籍『わかばちゃんと学ぶ Git使い方入門』のマンガのエピソードを交えながら解説してくださる上、自分のノートPCを持ち込んで実際に操作するハンズオン形式だったので、とても楽しく分かりやすいイベントでした。

■今回のイベントのポイント
・Gitってなに?どう便利なの?
・リポジトリとは
・ステージングとコミットの概念
・ブランチの概念
・GitHub上のリポジトリにプッシュとプルができるようになろう
 
【講師】湊川 あいさん

【講師】湊川 あいさん
フリーランスのWebデザイナー・漫画家・イラストレーター。マンガと図解で、技術をわかりやすく伝えることが好き。著書『わかばちゃんと学ぶ Webサイト制作の基本』『わかばちゃんと学ぶ Git使い方入門』『わかばちゃんと学ぶ Googleアナリティクス』が全国の書店にて発売中のほか、動画学習サービスSchooにてGit入門授業の講師も担当。「マンガでわかるGit」「マンガでわかるDocker」「マンガでわかるUnity」といった分野横断的なコンテンツを展開している。
Twitterアカウント: https://twitter.com/llminatoll
 
f:id:itstaffing:20190528101926j:plain

Gitってなに?どう便利なの?

Gitというと「難しそう」とか「エンジニアが使うもの」という印象があるかもしれません。そもそもメリットがわからないと学ぶ気になれないものです。書籍『わかばちゃんと学ぶ Git使い方入門』の主人公であるわかばちゃんが、マンガでGitのメリットを紹介してくれました。

大学に通うわかばちゃんは、Webのゼミを選択しており、誰もいないゼミの教室で、勉強を兼ねて個人サイトを制作しています。しかし、CSSをちょっと編集しようとしたら、デザインが壊れてしまいました。元に戻したいと思い、修正を加える前のファイルを探すのですが、過去に保存したファイル名の付け方がいい加減で、見つからず、思わず「どれだよ」と叫びます。

Web制作、プログラム開発だけでなく、ワープロや表計算ソフトで文書を作成する際もよく見かける「あるある」です。わかばちゃんの気持ちがよく分かります。

Gitは、プログラムのソースコードやドキュメントのバージョンを管理するためのツールです。例えるならば、ロールプレイングゲームで、ボスキャラを倒す前にセーブしておくイメージです。ボスに負けてゲームオーバーになっても、ボス戦前に戻ることができるアレです。つまり、間違ったコードを書き込んでしまい、プログラムが動かなくなったとしても、正常に動いていた頃の状態をいつでも復元できるというわけです。

Gitのメリット

Gitには、さらに大きなメリットがあります。複数名で開発や制作を行う現場では、誰が・いつ・どこで・何のために・どう修正したかという記録が煩雑になります。Gitは、それを一元的に取りまとめることができます。

企業やプロジェクトでGitを複数名で利用する際、よく使われているのがGit Hub(ギットハブ)というサービスです。GitHubは、簡単に言うとソースコードの保管場所です。とはいえ単なるソースコード置き場ではなく、メンバー間のコミュニケーションの場として機能するのが特徴です。たとえば、修正した箇所をプルリクエストという形で提案したり、掲示板のような見た目でお互いのソースコードにレビューしあったりすることができます。

リポジトリとは?

ここからは、実際にGitを動かしながら、使い方を学んでいきました。

まずはリポジトリについてです。Gitにおけるリポジトリは、コードの過去の状態が記録されている貯蔵庫のようなもの。

はじめに、あらかじめイベント開始前に自分のPCにダウンロード&インストールしておいたGUIツール「SourceTree」を起動します。SourceTreeは、もともとコマンドラインツールのGitをGUI環境で手軽に使うためのものです。まずはリポジトリを新規作成します。

f:id:itstaffing:20190528101929j:plain
▲作業用フォルダ「R-TEST」を作成しておき、SourceTreeの「Create」ボタンをクリックし、先ほどのフォルダ「R-TEST」を指定してローカルリポジトリを作成する

ローカルリポジトリ「R-TEST」が作られます。これをダブルクリックして開いてみると、まだ何もありません。そこでフォルダR-TESTの中にテキストファイルを作成します。

リポジトリにファイルの更新履歴を記録していきます。リポジトリへの記録手順について理解するために、またわかばちゃんが登場します。

マンガでは、みんなでお好み焼きを作るのですが、その手順の要所要所で写真に記録を残していきます。粉と水と卵を混ぜたところを撮影台に乗せて撮影し、キャベツを千切りにしたものを混ぜて、また撮影台に乗せて撮影し……と。「料理ブログにでも載せるのかな?」と不思議に思うわかばちゃん。ところが、最後に、ゼミの教授がそこにコーラを混ぜてしまい残念な結果になってしまいます。

「はぁ、キャベツを混ぜたところに戻れれば……」

そんな声に応えてくれるのがGitです。Gitは、撮影した時点にいつでも戻せる魔法のカメラのようなものなのです。

f:id:itstaffing:20190528101932j:plain
▲変更作業をする、ステージングエリアに乗せる(撮影台に乗せる)、コミットする(撮影する)という手順を踏むことでリポジトリに変更が記録され、後からその時点の内容に戻すことができる

早速、先ほどR-TESTフォルダ内に作成したテキストファイルを、ステージングエリアに乗せてみましょう。

f:id:itstaffing:20190528101934j:plain
▲画面下の[ログ]タブをクリックして画面を切り替え、作業ツリーのファイル一覧から、目的のファイルを選び、[選択をインデックスに追加]ボタンをクリックする

次にステージングエリアに乗せたファイルを選び、コミットします。

f:id:itstaffing:20190528101938j:plain
▲[ファイルステータス]タブに戻し、ステージしたファイル一覧から目的のファイルを選び、[コミット]ボタンをクリックする

これで、初めてのコミットが記録されました。以降、同様にファイルに変更を加え、ステージングして、コミットすると、そのたびに更新履歴が記録されていきます。

f:id:itstaffing:20190528101940j:plain
▲masterブランチにソースが登録された。以後、コミットするたびに履歴が保存されていく

コミットを繰り返すうちに、以前の状態に戻したくなったら、SourceTreeの履歴一覧から目的のものをダブルクリックします。これでファイルの内容がその時点のものに戻ります。これをチェックアウトと呼びます。

f:id:itstaffing:20190528101944j:plain
▲ソースツリーから過去のものを選びダブルクリックすることで、その時点での内容に戻せる(ソースファイルの内容が戻っている)

もしかすると、ステージングエリアに乗せる作業が二度手間なように思った方もいるかもしれませんね。なぜステージングエリアは必要なのでしょうか?

それは、開発の中で、一度にいくつもの更新ファイルがあったとき、コミットを分けて行いたいというケースがあるからです。たとえば、CSSとJavaScriptを同時に編集し、まとめてコミットしてしまったとしましょう。コミットした時点では特に問題がないように思えますが、後々CSSだけを元に戻したくなった場合、JavaScriptまで一緒に過去の状態に巻き戻ってしまうと不都合です。そういうわけで、コミットの粒度を人間が選ぶことができるようにこのステージングエリアという仕組みがあるのです。

ブランチの概念

Gitには、ブランチという概念があります。これはいわば並行世界、つまり“同時並行で進む世界”と考えることができます。ここでは湊川さんのサイトにある「絵文字でわかるGit」をベースに解説が進みます。

▼絵文字でわかるGit
https://webdesign-manga.com/emojigit/

たとえば、お寿司を作ることを考えます。お寿司はシャリとネタからできていますが、これらを用意する過程をkomeブランチとsakanaブランチに分けるとします。

komeブランチでは、苗を植え→稲を育て→米を収穫するというように作業を進め、sakanaブランチのほうも、稚魚→魚→マグロと作業を進めていき、米とマグロを最終的にマージしてお寿司にします。

f:id:itstaffing:20190528101947j:plain
▲komeブランチとsakanaブランチで同時並行作業を進め、最終的に両者をマージしてお寿司が完成する(湊川さんのサイト「絵文字でわかるGit」より)

ソフトウェア開発のシーンでも、機能ごとに分け、同時並行で開発したり、本番用と新規機能用の開発を並行して進めることがあります。そういったときに役立つのがブランチです。それぞれのブランチで作業を進め、結果をマージ(合体)させます。

同時並行で開発を進めていくと、同じ行に異なる修正が入ることがあります。たとえばAさんとBさんが同じファイルの3行目をそれぞれ別の内容に書き換えていた、といった場合です。その状態でマージしようとすると、Gitが「コンフリクト(衝突)しているよ」と教えてくれます。AさんとBさん、どちらの修正を採用するかは、マージする人が適宜判断します。

GitHub上のリポジトリにプッシュとプルができるようになろう

後半では、複数メンバーでの開発について学びました。Git Hubにログインし、湊川さんが用意した練習用リポジトリ(すでにHTMLファイルが用意されているもの)を、自分のGit Hubアカウントにフォーク(分岐)させて、そのGit Hubのリモートリポジトリのクローンを自分のPCに作成(コピー)し、ローカルリポジトリを作成します。

そして、ローカルリポジトリ上でHTMLファイルに自己紹介を追加し、Git Hub上のリモートリポジトリにプッシュし、自身の変更を湊川さんのソースにマージしてもらうためプルリクエストを送ります。プルリクエストとは「こういう変更を加えたからあなたのリポジトリに反映して欲しい」という連絡です。これを見て、湊川さんはリクエストのあったソースコードを自分のGit Hubリポジトリに取り込みます。

f:id:itstaffing:20190528101950j:plain
▲SourceTreeでコミットしてプッシュした後、Git Hubの画面でプルリクエストを送る

会場では、イベント参加者から寄せられるプルリクエストに応じて、湊川さんが、それぞれの変更をマージして取り込み、GitHub Pages上でひとつのWebページを完成させました。

Gitは、もともとコマンドラインで使うツールとのことですが、今回はSourceTreeというGUIツールを使ったので、クリックするだけの直観的な操作で行うことができました。また、湊川さんの書籍『わかばちゃんと学ぶ Git使い方入門』のマンガを見ながら学ぶことで、概念を理解しやすく、苦手意識を持つことなく、参加者の皆さんもGitに親しむことができました。