エルマスさんに教えてもらいながら、ローカルリポジトリを作ったわかばちゃん。
「飲み物を買いに行ってくる」と言って出て行ったきりの魔王教授ですが、帰ってきてくれるのでしょうか。
⇒前回までの「マンガでわかるGit」を読む
コミットしてみよう
ファイルの変更を記録しよう
リポジトリにファイルの変更を記録してみましょう。 基本の流れはこうです。
- 作業する
- ステージする（撮影台に乗せる）
- コミットする（スナップショットを撮る）
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
8,568通り、あなたはどのタイプ？
グッドポイント診断で、あなたの隠れた強みを診断してみましょう。
診断結果は8,568通り。あなたはどのタイプ？
あなたの新しい可能性が見つかるかも
リクナビNEXTにログインすると、あなたの志向に合った特別な求人一覧を見ることができます。
予想外の求人が、あなたの世界を広げるかもしれません。
