マンガでわかるGit 第4話「コミットしてみよう」

エルマスさんに教えてもらいながら、ローカルリポジトリを作ったわかばちゃん。
「飲み物を買いに行ってくる」と言って出て行ったきりの魔王教授ですが、帰ってきてくれるのでしょうか。

⇒前回までの「マンガでわかるGit」を読む

コミットしてみよう






ファイルの変更を記録しよう

リポジトリにファイルの変更を記録してみましょう。 基本の流れはこうです。

  1. 作業する
  2. ステージする(撮影台に乗せる)
  3. コミットする(スナップショットを撮る)

1.作業する

第3話で指定したフォルダに、テキストファイルを作成します。

練習として、テキストファイルでお好み焼きのレシピを作ることにしましょう。 「お好み焼き粉・水・卵を入れます」と入力し、okonomi.txtという名前で保存しましょう。


(エディタはお好みのものを使ってください。記事ではBracketsを使っていますが、メモ帳でもできます)

▼今はこの状態です

2.ステージする

SourceTreeを開きます。 すると、”作業ツリーのファイル”というところにokonomi.txtが出現しています。


ファイルが追加されたことを、Gitが自動で察知してくれているのだ!


okonomi.txtにチェックマークを入れると、ステージングエリアに移動させられるわ。


撮影台に乗せるイメージだな。


これで撮影待ち状態になるんだね。

▼これで、この状態になりました

3.コミットする

さあ、コミットしてみましょう。 その瞬間のファイル・ディレクトリの状態を、写真に撮って記録するイメージです。 左上の[コミット]アイコンをクリックします。

コミットするときには、必ず、コミットメッセージをつけましょう。「お好み焼きのタネを作成」と入力し、右下の[コミット]ボタンをクリックします。

▼これで、この状態になりました


このコミットという作業で、バージョンが作られた。 バージョン管理の歴史に追加されたということだ。


コミットは、キリのよい所で行えばいいわ。 たとえば「ボタンデザイン変更」「ヘルプページを追加」といった具合ね。

続けて、歴史を積み重ねてみよう(キャベツを入れる)

テキストエディタに戻り、さきほどと同じファイルに「キャベツを入れます」と追記して、保存しましょう。

ブランチの[master]をクリックしましょう。 さきほど記録したコミットの上に「コミットされていない変更があります」と表示が出ています。


すごい!Gitが、ファイルに変更があったことを察知してくれたんだね!

okonomi.txtにチェックマークを入れ、ステージングエリアに移動させます。

画面左上の[コミット]アイコンをクリックしてコミットしましょう。 コミットメッセージは「具材を追加」と入力しましょう。

最後にもうひとつ、歴史を積み重ねてみよう(コーラを入れる)

さて、もう一段階、歴史を積み重ねてみましょう。 テキストエディタに戻り、「コーラを入れます」と追記して、保存します。

さきほどと同じように、ステージングエリアに移動させ、コミットしましょう。 コミットメッセージは「隠し味を追加」と記入します。

これで、[master]をクリックしてみましょう。 このような表示になっていればOKです。


ここまでできたら、今回の作業は終わりよ。 次回は、過去の状態に戻す方法を教えるわね。

豆知識:コマンドで操作するときは?

ステージングエリアに追加する

$ git add ファイル名

コミットする

$ git commit -m “コミットメッセージ”

登場人物紹介

●次回のマンガでわかるGitは?

第5話の内容は「過去の状態に戻してみよう」の予定です。お楽しみに!

※この記事は2016年6月28日時点、SourceTree2.0.5.5、Windows10 Pro バージョン1511(Build 10586)における実施内容です。時期や環境によって、操作が異なることがあります。

著者プロフィール

湊川あいマンガ:湊川あい(みなとがわ あい)

フリーランスのWebデザイナー・マンガ家・イラストレーター。マンガと図解で、技術をわかりやすく伝えることが好き。「マンガでわかるGit」書籍版発売中!
主な著書 わかばちゃんと学ぶ Webサイト制作の基本わかばちゃんと学ぶ Git使い方入門わかばちゃんと学ぶ Googleアナリティクス〈アクセス解析・Webマーケティング入門〉
Twitter: @llminatoll

Pagetop