第1話リポジトリを作ってコミットしてみよう【連載】マンガでわかるGit ～コマンド編～

Webサービスやアプリ開発の現場では必須のバージョン管理システム「Git（ギット）」。4月のイベントでは、Gitの基礎の基礎をお伝えしましたが、この連載コラムでは、「Git コマンド編」をマンガで解説します。

Gitは、専用のソフトを使えばクリックで直感的に操作することもできますが、いざというときにコマンドが使えると便利です。今回は、ある程度のGUIでならGitは使えるけれど、コマンド操作は苦手という方のために、主人公のわかばちゃんがカンタンなGitコマンドを実践していきます。みなさんも一緒に操作してみましょう！

【筆者】湊川あいさん

フリーランスのWebデザイナー・漫画家・イラストレーター。マンガと図解で、技術をわかりやすく伝えることが好き。著書『わかばちゃんと学ぶ Git使い方入門』『わかばちゃんと学ぶ Googleアナリティクス』『わかばちゃんと学ぶ Webサイト制作の基本』『運用ちゃんと学ぶシステム運用の基本』が発売中のほか、マンガでわかるGit・マンガでわかるDocker・マンガでわかるRuby・マンガでわかるScrapbox・マンガでわかるLINE Clova開発・マンガでわかる衛星データ活用といった分野横断的なコンテンツを展開している。千代田まどかさんとのコラボレーション企画をTECH PLAY Magazineで連載中。

･Amazon著者ページ
･Twitterアカウント

GUIとCLIの違い

みなさんが普段パソコンを操作するとき、どのように操作していますか？マウスやタッチパッドを使って、デスクトップのアイコンをクリックしたり、ファイルをドラッグしてゴミ箱に捨てたりしていると思います。これがGUI（グラフィカルユーザーインタフェース）です。

対して、キーボードのみを使ってOSに命令を送り、パソコンを操作するのがCLI（コマンドラインインターフェース）です。プログラマが使っている「黒い画面」と言えばイメージが付きやすいでしょうか。

▼CLIの例：ターミナル（Windowsだとコマンドプロンプトという名前）

もともと、初期のコンピュータは、キーボードからコマンドを打ち込んで操作するものでした。1980年以降、コンピュータの処理性能が上がったことによって、直感的に操作できるGUIが普及し始めたのです。

Gitも本来はCLIで操作するものですが、普及に伴って、コマンドを打ち込まずともクリックで操作できるGUIソフトが登場してきました。SourceTree（ソースツリー）やGitKraken（ギットクラーケン）、GitHub Desktop（ギットハブデスクトップ）などです。

▼GUIの例：SourceTreeの操作画面

これだけを聞くと「操作しやすいGUIがあるなら、わざわざ玄人向けのCLIを使う必要はないじゃない」と思うかもしれません。ところがCLIには様々なメリットがあるのです。

CLIのメリット

たとえば、今から新規リポジトリを作るとしましょう。

GUIの場合、ソフトを立ち上げてから「新規リポジトリ → ローカルリポジトリを作成」の順にクリックする必要があります。

対して、CLIならこう打つだけです。

$ git init

これだけで新規リポジトリができてしまいます。
どうですか？簡単でしょう。

単に操作がシンプルになるだけではありません。CLIにしかできない操作もあります。GUIは初心者でも使いやすいことを目的として作られているため、基本的な操作はできるものの、一部削ぎ落とされている機能があるからです。

いざというとき便利なコマンド、かゆいところに手が届くコマンドがGitにはたくさんあります。この連載でひとつずつ知っていくことで、「pushできなくなった」「マージしていないブランチを間違って消してしまった」といった問題が起きても、すぐ対処できるようになります。きっとあなたもGitをもっと好きになることでしょう。

CLIを使ってみよう

ではさっそく、CLIの画面を出してみたまえ。

Macの場合：
MacのCLIは「ターミナル」と呼ばれているぞ。Launchpadの「その他」から選んでクリックします。もしくは[Control] + [スペース]キーを同時に押して、「terminal」と入力、検索すると出てきます。

Windowsの場合：
Windowsでは「コマンドプロンプト」と呼ばれています。
[スタートボタン] > [すべてのプログラム] > [アクセサリ] > [コマンドプロンプト] をクリックすると立ち上がります。

Gitがインストール済みか確認しよう

$ git --version

と入力して、

git version 2.19.0

のように出てくればインストール済みです。次に進みましょう。

インストールがまだの方は、Git公式ドキュメントのGitのインストールの手順を実行するか、SourceTreeをインストールしてください。SourceTreeのパッケージの中にGitも含まれています。

コマンドでGitを使ってみよう

基本的なコマンド

まずは、もとからパソコンに入っている基本的なコマンドを使ってCLIに慣れてみよう。「pwd」と打ち込んでエンターを押したまえ。あぁ、先頭の$マークは打たなくていいぞ。

$ pwd

たった3文字でいいんですか？pwd エンターっと…

$ pwd

/Users/wakaba

おお！？なんか文字が出てきた！

これが、君が今いるディレクトリ（階層）だ。　ディレクトリはわかるな？

フォルダ構成みたいな感じだよね。今私は、Usersというフォルダの中の、wakabaというフォルダにいるってワケだ。

その通り。pwdというのは「Print Working Directory」の略なんだ。今どこにいるか表示して」という意味だな。

お次は「ls」とだけ打ち込んでみたまえ。（Windowsコマンドプロンプトの場合は「dir」）

$ ls

Desktop

Documents

Downloads

Library

Movies

Music

Pictures

Public

……

お見事！今自分がいるディレクトリの直下にあるものが表示されたな。ちなみにlsはList Segmentsの略だ。

今表示された中にあった「Desktop」という場所に移動してみようか。「cd」というコマンドに続けて、移動したいディレクトリ名を打つと、その階層に行けるぞ。

$ cd Desktop

「cd」はなんの略なの？

Change Directoryの略だ。覚えやすいだろう。

ディレクトリ（フォルダ）を作ろう

デスクトップに移動したところで、Git練習用のディレクトリ（フォルダ）を作ろう。「mkdir」に続けて、希望のディレクトリ名を打ち込んでエンターだ。

じゃあlessonっていう名前にしたいわ。

$ mkdir lesson

わぁ、デスクトップにlessonっていうディレクトリが爆誕したよ！いつもクリックでやっている作業が、短い文字を打つだけでどんどんできていく！スゴイ！

リポジトリを作ろう

さて、いよいよGitコマンドを使っていくぞ。Gitコマンドは先頭に「git」をつけるのが特徴だ。

▼lessonディレクトリに移動して

$ cd lesson

▼リポジトリを作る

$ git init

すると……

たったこれだけでリポジトリができました！

そうそう、.gitっていう隠しファイルがGitリポジトリの証なんだよね。

サンプルファイルを作ろう

リポジトリを作ったはいいけど、lessonディレクトリにはまだ何もファイルがないや。テキストエディタを開いて、適当なファイルを作ろうかな。

おっと！せっかくならテキストファイルもコマンドで作ってみようか。

$ echo “Hello Git” > sample.txt

わわっ！ファイルが作成されて、しかも内容も入力されてる！CLIってなかなかやるじゃん！

ステージングエリアに乗せてコミットしよう

じゃあ、今作ったsample.txtをリポジトリに記録しよう。まずは git status コマンドを使って、作業ディレクトリの状態を確認するんだ。

$ git status

赤文字で表示されているのは、まだステージングエリアに乗せられていないファイルです。

では、sample.txtをステージングエリアの上に乗せてあげましょう。

私がいつも使ってるGUIでは、チェックマークを入れてステージングエリアに乗せてるけど、コマンドではどうやるんだろう？

あれは、裏で git add コマンドを実行しているだけだ。ステージングエリアに乗せたいファイルの名前を git add に続けて打ち込みたまえ。

$ git add [ファイル名]

git add sample.txt っと。……ん？しかし何も起こらないけど……？

git status で、もう一度状態を確認してみるのだ。

$ git status

おや？さっき赤文字だったファイル名が、緑色になってる！

その通り！緑色になっているファイルは「今ステージングエリアの上に乗っていて、コミット待ちですよ～」ということを示している。

最後に、いよいよコミットしてみよう。コミットは、撮影台（＝ステージングエリア）に乗っているものをパシャッとカメラで撮って、アルバム（＝リポジトリ）に記録するイメージだ。

$ git commit -m “ここにコミットメッセージを書く”

コミットメッセージは -m の後ろにダブルクォーテーションで囲って書くんだね。$ git commit -m “はじめてのコミット” っと…

コミットログ（履歴）を見てみよう

よし！では、ちゃんとコミットされたか確認してみよう。

$ git log

おおーっ！ちゃんとコミットした人・時間・メッセージが記録されてる！

履歴を見れたはいいけど… これ、履歴が多くなってきた場合は一番古いコミットログにたどり着くまで終われないよ！閲覧を終わらせるにはどーしたらいいの！？

アルファベットの「q」を押すんだ！Quit（辞めるという意味）の「q」だと覚えよう。

ちなみに、--graph というオプションをつけて実行すると、コミットログをアスキーアートでカラフルに表示してくれるぞ。今はまだコミットをひとつしか記録していないから、代わり映えがしないと思うが、たくさんブランチがあるリポジトリでやってみるとおもしろいだろう。

$ git log --graph

▼CLIで見た場合のコミットグラフ

コミットグラフを見るときはGUIの方が見やすいので、操作はCLIで行って、確認用にGUIを横に置いて作業する人もいます。
このあたりはいろいろ試しながらやってみて、あなたがやりやすい方法を選んでくださいね。

▼SourceTreeで見た場合のコミットグラフ

★魔王教授本日の豆知識

CLIで「↑」キーを押せば、最近自分が打ちこんだコマンドを再利用できて便利だぞ！

▼上下キーで使いたいコマンドを選び、エンターで実行できる

まとめ

さて、ここまでで

$ git init （リポジトリを作る）

$ git status （状況を確認する）

$ git add （ステージする）

$ git commit （コミットする）

$ git log （履歴を見る）

が使えるようになりましたね！

Gitにはまだまだたくさんのコマンドがあります。次回は、さらに役立つGitコマンドも登場。わかばちゃんと一緒に学んでいきましょう！

▼登場キャラクター紹介
f:id:itstaffing:20200122103525j:plain

▼わかばちゃんが登場する書籍

・わかばちゃんと学ぶGit使い方入門
・わかばちゃんと学ぶGoogleアナリティクス
・わかばちゃんと学ぶWebサイト制作の基本

▼ これまでの「マンガでわかるGit」

第1話「リポジトリの作成」
第2話「ブランチの概念」
第3話「マージの仕組み」
第4話「コンフリクトの修正」
第5話「git revert」
第6話「git reset 3種類」
第7話「git reflog」
第8話「git switchとgit restore」
第9話「git diff」
第10話「git cherry-pick」
第11話「git stash」
第12話「git grep」
第13話「git blame」
第14話「git remote」
第15話「.gitconfig でコマンドを短縮」
第16話「.gitconfig と .git/config で複数のGitアカウントを使い分ける」
第17話「prune オプション」
第18話「git tag」
第19話「detached HEAD 状態って何？」