絵文字でわかるGit🍣 マージとリベースの違い・リセットとリバートの違い

公開日: : 最終更新日:2016/12/20 マンガでわかるGit

こんにちは。絵を描くWebデザイナーの湊川あいです。
絵文字 / Emoji Advent Calendar 2016 10日目を担当します。
emojigit_catch01

はじめに

普段は マンガでわかるGit というものを描いていますが、今回は「絵文字」を使ってGitを解説したいと思います。

そもそもの発端

以前、深夜テンションで #絵文字でわかるGit というものを少しつぶやいたところ、想像以上に反応がありましたので、今回改めて解説記事を書いてみます。

本記事の対象

  • Git初心者の方
  • Git初心者に、どう教えたら伝わりがいいか悩んでいる先輩方

Gitとは

バージョン管理システムです。
「バージョン管理システムって何?」という方向けには、こちらのマンガで解説しています。

Gitの基本

ご飯を例にしましょう。
絵文字でわかるGit1
このように、Gitは、作業工程のキリのいいところでスナップショットを撮っておくことができます。

このスナップショットひとつひとつをコミットと呼びます。
コミットについて詳しくはこちら:マンガでわかるGit 第4話「コミットしてみよう」

コミットしておくことで
絵文字でわかるGit2
「ミスった!」という時にも
絵文字でわかるGit3
変更を加える前の状態に復元することができます。

コミットは、単に差分だけを記録しているわけではなく、 瞬間瞬間の、全ファイルのスナップショット を記録しています。
よって、今の作業ディレクトリの状態がどうあろうと、コミットさえしていれば、基本的には、過去のファイルをそっくりそのまま再現できます。

Gitの特徴

Gitは、コミットやログ閲覧などの主要な操作がローカルで行われます。

そのため
– オフラインでも作業できる
– 高速で動作する
というのが強みです。

ここからの記法

Gitでは「一番新しい履歴ほど上に表示される」というのがよくある書き表し方です。
今後は下記のように書き表します。
絵文字でわかるGit4

ブランチ

さて、Gitは複数人で同時並行で作業するときに真価を発揮します。
たとえば、AさんとBさんでお寿司を作りたいとします。

  • お米

せっかく2人いるので、時間短縮のために、それぞれ同時並行で作ることにしましょう。

emojigit01

上の図だけで、ブランチというものがなんとなくわかった方もいるかもしれませんが、ここでマンガでわかるGitでお馴染みの、初心者わかばちゃんにもう少し突っ込んでもらいましょう。

icon_wakaba_normal.jpg (15.0 kB)
ブランチって何!?

・・・Gitの公式サイトを見てみましょう。

Git におけるブランチとは、(中略)単にコミットを指す軽量なポインタに過ぎません。

3.1 Git のブランチ機能 – ブランチとは より

icon_wakaba_normal.jpg (15.0 kB)
なるほどわからん!ポインタって何!?

・・・ポインタとは、簡単に言うと「👈今ココ!」です。
g05
icon_wakaba_smile.jpg (15.3 kB)
ほほ〜。新しいコミットが積み上げられると「今ココ!」が移動していくんだね。

チェックアウト

今自分がいるブランチは「*」を付けて表します。

この状態から
emojigit02
sakanaブランチへチェックアウトしてみます。

$ git checkout sakana

すると
emojigit03
kome ブランチから sakanaブランチへ移動できました!

チェックアウトすると、任意のコミットへ自分を移動させることができるのです。

チェックアウトについてはマンガでわかるGit 5話で詳しく解説しているので、そちらをざっと読んでもらうと理解しやすいと思います。

マージ

さて、お米と魚を合体させてお寿司を作りたいとします。
以下の3つのコミットだけで説明します。
g06
絵文字の隣にくっついている1文字のアルファベットは、それぞれのコミットのIDだと思ってください。
(コミットIDは、本来はもっと長い文字列ですが、この解説では便宜上アルファベット1文字で表します)

まずはkomeブランチにチェックアウトして

$ git checkout kome

g07
sakanaブランチをマージします。

$ git merge sakana

すると
g08
komeブランチに、sakanaブランチの変更分が取り込まれ、2つのブランチが統合されたコミットDができました!

リベース

さて、お米と魚を合体させるのは、リベースでも行えます。
マージとリベースの違いは何でしょう?

実際に、リベースして確認してみましょう。

まずsakanaブランチにチェックアウトします。

$ git checkout sakana

g09
komeブランチにリベースしましょう。

$ git rebase kome

すると
g10
何が起きたのでしょう?

マージした時と見比べてみましょう。
mergerebase01.png (9.9 kB)

  • マージの場合、過去の履歴は改変されずに、マージするためだけの新しいコミットDが作成される

  • リベースの場合、sakanaブランチの履歴が改変されて 履歴が一直線になる

リベースとは 「re+base」
つまり ブランチの付け根を植え替える と考えるとわかりやすいでしょう。

icon_wakaba_smile.jpg (15.3 kB)
マージしてもリベースしても、得られる結果🍣は一緒だけど、生成される履歴の形が異なるんだね。

インタラクティブモードのリベース

$ git rebase -i (ブランチ名)

rebaseにオプション(-i)をつけると、インタラクティブモードのリベースができます。
このコマンドを使うと、必要なコミットだけを取捨選択できたり、コミットの順番を入れ替えられたり、コミットを統合できたりします。
pushする前に、同じような内容のコミットをひとつにまとめたいときに使えますね。

リセット

ここからは「Gitの履歴を元に戻す方法」を解説します。
一口に「元に戻す」と言っても、Gitには色々な戻し方があります。以下の例を見てみましょう。

稲穂🌾を調理して、白ご飯🍚にするつもりが、おせんべい🍘にしてしまいました。
コミットを戻したいときはどうしたらいいのでしょう?
greset01
resetでコミットBの時点まで戻してみましょう。

$ git reset --hard B

すると
greset02
このように、コミットCがなくなり、全ての更新がなかったことになります。
resetのオプション(softやhard)の詳細については、fnobiさんのこちらの記事がわかりやすくてオススメです→ git resetは結局何を戻すのか

※rebaseやresetなどの履歴改変系のコマンドを使うのは、リモートリポジトリへpush前にするのが望ましいです

リバート

自分のパソコン上だけなら、さっきの「リセット」でうまくいきました。
でも、先ほどのような履歴を上書きする方法は、他の人と共同で使っているリモートリポジトリには使うのは危険です。
(使い方によっては他人に迷惑をかける場合があるため)

変更を巻き戻して他の人と共有するためには、「リバート」を使う必要があります。

この状態から
grevert01
コミットCをrevertします。

$ git revert C

すると
grevert02
コミットCを打ち消す内容のコミットC’が作られました!

リセットとリバートの違い

emoji_g_02.png (14.7 kB)

それぞれ直訳すると

  • リセット(reset)= 置き直す・再び置く
  • リバート(revert)= 元の状態に立ち戻る

つまり

  • リセットの場合、過去のコミットそのものを消す (コミットを置き直すために古いコミットを消す)
  • リバートの場合、過去のコミットはそのままで、それを打ち消す内容の新たなコミットが作られる(その結果、ファイルの内容は元に戻る🌾)

リセットはコミット自体を消してしまうので、たとえば他の人と一緒に使っているリモートリポジトリに記録されているコミットを消してしまうと、リポジトリ間で差異が発生し、エラーになります。
リバートなら、過去のコミットはそのままで、新しいコミットが上に積み重なるだけなので、リモートリポジトリにpushしてもエラーにはなりません。

チェリーピック

Gitには様々なコマンドがありますが、最後にひとつ、かわいいコマンドを紹介しましょう。
その名もチェリーピック🍒です。kawaii。

チェリーピックを使うと、「好きなコミットを選んで摘み取る」ことができます。
cherry-pickは英語の慣用句で、「熟れているサクランボだけを選んで摘み取る」ことから「いいとこ取り」という意味で使われているっぽいです。

季節柄、クリスマスツリーで例えてみましょう。
gch01
指輪に加工する前の宝石💎を、ツリーに取り込みたいとします。(どんだけ豪華なツリーだよって感じですが)

ここでcherry-pickです!

$ git cherry-pick C

すると
gch02
おめでとうございます!
宝石を取り込み、クリスマスツリーが飾り付けられました🎄✨

おわりに

皆さんが初めてGitに出会ったタイミングはいつ・どんなときでしょう。
「家で」「会社で」「勉強会で」「友達に教わって」……色々あると思います。

Gitに初めて出会ったときは、知らない言葉だらけで、混乱してしまうかもしれません。かつて、私もそうでした。
でも、ひとつひとつ概念を理解していけば、Gitは怖くありません。
この記事が「Gitって感覚的で、おもしろいものなんだ!」と思うきっかけになれば嬉しいです。

Gitコマンドのクイズ

Gitコマンドの選択式クイズがCodeIQさんで出題されています。出題者はてぃーびーさん@tbpgrです📺✨
2〜3分でサクッと答えられます。
ぜひチャレンジしてみてくださいね〜。

おまけの1コママンガ付き Gitクイズ


emoji_q01.png (62.0 kB)


emoji_q02.png (79.5 kB)


emoji_q03.png (72.5 kB)

マンガでわかるGit書籍化決定

catch_git_syosekika.png (411.8 kB)
私、湊川あいがCodeIQさんで連載しているマンガでわかるGitの書籍化が決定しました。
出版社はC&R研究所さんです。
只今、書籍用の原稿を書き貯めています。
書籍版の内容は、ガッツリ増し増しになりますのでご期待ください(頑張ります)!

発売中の本

わかばちゃんと学ぶ Webサイト制作の基本
わかばちゃんと学ぶ Webサイト制作の基本 | C&R研究所

8割以上が書籍限定の内容となっております。
HTML5・CSS3のコーディングだけでなく、Webサイトの企画・運用(SEO・アクセス解析)についても解説しています。
アマゾンで冒頭を試し読みできます

Next

次は ナユさん@nayucolony の「絵文字で学ぶ継承とリファクタリング🍎」です!楽しみ!!

The following two tabs change content below.

湊川 あい

湊川あい(みなとがわ あい) 絵を描くWebデザイナー。2014年より「マンガでわかるWebデザイン」をインターネット上に公開していたところ、出版社より声がかかる。 著書「わかばちゃんと学ぶWebサイト制作の基本」 Web連載「マンガでわかるGit」「わかばちゃんが行くオフィス訪問マンガ
  • Pocket       
  • このエントリーをはてなブックマークに追加

関連記事

dakkou

マンガでわかるGitが書籍化!2017年4月21日 書店にて発売予定

マンガでわかるGitが書籍になります Web連載中の「マンガでわかるGit」の書籍用原稿が完成いた

記事を読む

マンガでわかるGIt第1話

マンガでわかるGit 第一話「Gitってなあに?」

次回以降の流れは?(2016/04/11 0

記事を読む

catch_git_03_800x800

フロー情報をストック情報へ。マンガでわかるGit 連載一覧をTogetterにまとめて分かったこと

絵を描くWebデザイナーの湊川(みなとがわ)あいです。 先日、CodeIQ MAGAZINEさ

記事を読む

マンガでわかるGit コードIQにて連載

CodeIQ Magazineにて、マンガでわかるGitの連載が始まりました

こんにちは、Webデザイナーの湊川あいです。 最近やっと一段落ついたので、改めて怒濤の3ヶ月をまとめ

記事を読む

Gitコラボ漫画

【コラボマンガ】怖くない!黒い画面入門【 #シス管系女子 + #マンガでわかるGit 】

こんにちは!絵を描くWebデザイナーの湊川あいです。 普段 マンガでわかるGit わかばちゃんと学ぶ

記事を読む

Comment

  1. llminatoll より:

    書きました!他の技術をテーマにした「絵文字でわかる」系の解説も見たい。

  2. 湊川 あい より:

    一部の表現を、適切になるよう修正しました!
    丁寧なレビューをくださったDQNEOさん、ありがとうございます!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

dakkou
マンガでわかるGitが書籍化!2017年4月21日 書店にて発売予定

マンガでわかるGitが書籍になります Web連載中の「マンガでわかる

tax_001
マンガでわかる確定申告 第1話 源泉徴収ってなあに?

第1話 源泉徴収ってなあに? 書籍「わかばちゃんと学ぶWebサイト制

HTMLちゃん
2016年ふり返り:本を出して会社を辞めてフリーランスになってました

湊川あいです。 Webデザイナーの傍ら、マンガや図解を取り入れた技術書

Gitコラボ漫画
【コラボマンガ】怖くない!黒い画面入門【 #シス管系女子 + #マンガでわかるGit 】

こんにちは!絵を描くWebデザイナーの湊川あいです。 普段 マンガでわ

emojigit_catch01
絵文字でわかるGit🍣 マージとリベースの違い・リセットとリバートの違い

こんにちは。絵を描くWebデザイナーの湊川あいです。 絵文字 / Em

→もっと見る

PAGE TOP