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

PRODUCED BY RECRUIT

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

f:id:itstaffing:20190617145602j:plain

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

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

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

・Amazon著者ページ
・Twitterアカウント
 
f:id:itstaffing:20190617145606j:plain

GUIとCLIの違い

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

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

▼CLIの例:ターミナル(Windowsだとコマンドプロンプトという名前)
f:id:itstaffing:20190617145611j:plain

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

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

▼GUIの例:SourceTreeの操作画面
f:id:itstaffing:20190617145613j:plain

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

CLIのメリット

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

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

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

$ git init

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

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

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

CLIを使ってみよう

f:id:itstaffing:20190617145541j:plain
ではさっそく、CLIの画面を出してみたまえ。
Macの場合:
MacのCLIは「ターミナル」と呼ばれているぞ。Launchpadの「その他」から選んでクリックします。もしくは[Control] + [スペース]キーを同時に押して、「terminal」と入力、検索すると出てきます。
f:id:itstaffing:20190617145617j:plain

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

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

$ git --version

と入力して、
git version 2.19.0

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

f:id:itstaffing:20190617145622j:plain

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

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

基本的なコマンド

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

/Users/wakaba
f:id:itstaffing:20190617145535j:plain
おお!?なんか文字が出てきた!
f:id:itstaffing:20190617145541j:plain
これが、君が今いるディレクトリ(階層)だ。 ディレクトリはわかるな?
f:id:itstaffing:20190617145535j:plain
フォルダ構成みたいな感じだよね。今私は、Usersというフォルダの中の、wakabaというフォルダにいるってワケだ。
f:id:itstaffing:20190617145541j:plain
その通り。pwdというのは「Print Working Directory」の略なんだ。今どこにいるか表示して」という意味だな。
f:id:itstaffing:20190617145541j:plain
お次は「ls」とだけ打ち込んでみたまえ。(Windowsコマンドプロンプトの場合は「dir」)
$ ls

Desktop

Documents

Downloads

Library

Movies

Music

Pictures

Public

……
f:id:itstaffing:20190617145541j:plain
お見事!今自分がいるディレクトリの直下にあるものが表示されたな。ちなみにlsはList Segmentsの略だ。
f:id:itstaffing:20190617145541j:plain
今表示された中にあった「Desktop」という場所に移動してみようか。 「cd」というコマンドに続けて、移動したいディレクトリ名を打つと、その階層に行けるぞ。
$ cd Desktop
f:id:itstaffing:20190617145538j:plain
「cd」はなんの略なの?
f:id:itstaffing:20190617145541j:plain
Change Directoryの略だ。覚えやすいだろう。
ディレクトリ(フォルダ)を作ろう

f:id:itstaffing:20190617145541j:plain
デスクトップに移動したところで、Git練習用のディレクトリ(フォルダ)を作ろう。「mkdir」に続けて、希望のディレクトリ名を打ち込んでエンターだ。
f:id:itstaffing:20190617145535j:plain
じゃあlessonっていう名前にしたいわ。
$ mkdir lesson
f:id:itstaffing:20190617145624j:plain

f:id:itstaffing:20190617145535j:plain
わぁ、デスクトップにlessonっていうディレクトリが爆誕したよ!いつもクリックでやっている作業が、短い文字を打つだけでどんどんできていく!スゴイ!
リポジトリを作ろう

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

▼lessonディレクトリに移動して
$ cd lesson
▼リポジトリを作る
$ git init
すると……
f:id:itstaffing:20190617145628j:plain

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

f:id:itstaffing:20190617145535j:plain
そうそう、.gitっていう隠しファイルがGitリポジトリの証なんだよね。
サンプルファイルを作ろう

f:id:itstaffing:20190617145535j:plain
リポジトリを作ったはいいけど、lessonディレクトリにはまだ何もファイルがないや。テキストエディタを開いて、適当なファイルを作ろうかな。
f:id:itstaffing:20190617145541j:plain
おっと!せっかくならテキストファイルもコマンドで作ってみようか。

$ echo “Hello Git” > sample.txt
f:id:itstaffing:20190617145632j:plain
 
f:id:itstaffing:20190617145634j:plain
f:id:itstaffing:20190617145535j:plain
わわっ!ファイルが作成されて、しかも内容も入力されてる!CLIってなかなかやるじゃん!
ステージングエリアに乗せてコミットしよう

f:id:itstaffing:20190617145541j:plain
じゃあ、今作ったsample.txtをリポジトリに記録しよう。まずは git status コマンドを使って、作業ディレクトリの状態を確認するんだ。
$ git status
f:id:itstaffing:20190617145638j:plain
赤文字で表示されているのは、まだステージングエリアに乗せられていないファイルです。

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

f:id:itstaffing:20190617145538j:plain
私がいつも使ってるGUIでは、チェックマークを入れてステージングエリアに乗せてるけど、コマンドではどうやるんだろう?
f:id:itstaffing:20190617145541j:plain
あれは、裏で git add コマンドを実行しているだけだ。ステージングエリアに乗せたいファイルの名前を git add に続けて打ち込みたまえ。

$ git add [ファイル名]
f:id:itstaffing:20190617145538j:plain
git add sample.txt っと。……ん?しかし何も起こらないけど……?
f:id:itstaffing:20190617145541j:plain
git status で、もう一度状態を確認してみるのだ。
$ git status
f:id:itstaffing:20190617145644j:plain

f:id:itstaffing:20190617145535j:plain
おや?さっき赤文字だったファイル名が、緑色になってる!
f:id:itstaffing:20190617145647j:plain
f:id:itstaffing:20190617145541j:plain

その通り!緑色になっているファイルは「今ステージングエリアの上に乗っていて、コミット待ちですよ~」ということを示している。
f:id:itstaffing:20190617145541j:plain
最後に、いよいよコミットしてみよう。コミットは、撮影台(=ステージングエリア)に乗っているものをパシャッとカメラで撮って、アルバム(=リポジトリ)に記録するイメージだ。
f:id:itstaffing:20190617145650j:plain
$ git commit -m “ここにコミットメッセージを書く”
 
f:id:itstaffing:20190617145535j:plain
コミットメッセージは -m の後ろにダブルクォーテーションで囲って書くんだね。$ git commit -m “はじめてのコミット” っと…

コミットログ(履歴)を見てみよう

f:id:itstaffing:20190617145541j:plain
よし!では、ちゃんとコミットされたか確認してみよう。
$ git log
f:id:itstaffing:20190617145653j:plain

f:id:itstaffing:20190617145535j:plain
おおーっ!ちゃんとコミットした人・時間・メッセージが記録されてる!
f:id:itstaffing:20190617145538j:plain
履歴を見れたはいいけど… これ、履歴が多くなってきた場合は一番古いコミットログにたどり着くまで終われないよ!閲覧を終わらせるにはどーしたらいいの!?
f:id:itstaffing:20190617145541j:plain
アルファベットの「q」を押すんだ!Quit(辞めるという意味)の「q」だと覚えよう。
f:id:itstaffing:20190617145541j:plain
ちなみに、--graph というオプションをつけて実行すると、コミットログをアスキーアートでカラフルに表示してくれるぞ。今はまだコミットをひとつしか記録していないから、代わり映えがしないと思うが、たくさんブランチがあるリポジトリでやってみるとおもしろいだろう。
$ git log --graph
▼CLIで見た場合のコミットグラフ
f:id:itstaffing:20190617145655j:plain

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

▼SourceTreeで見た場合のコミットグラフ
f:id:itstaffing:20190617145555j:plain

 
★魔王教授 本日の豆知識

f:id:itstaffing:20190617145541j:plain
CLIで「↑」キーを押せば、最近自分が打ちこんだコマンドを再利用できて便利だぞ!
▼上下キーで使いたいコマンドを選び、エンターで実行できる
f:id:itstaffing:20190617145558g:plain

まとめ

さて、ここまでで

$ git init (リポジトリを作る)

$ git status (状況を確認する)

$ git add (ステージする)

$ git commit (コミットする)

$ git log (履歴を見る)

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

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

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

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

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