ガジェット通信

見たことのないものを見に行こう

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

DATE:
  • ガジェット通信を≫

コミットしてみよう

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

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

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

1.作業する

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

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

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

 ▼今はこの状態です

2.ステージする

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


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


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


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


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

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

3.コミットする

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

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

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


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


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

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

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

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


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

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

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

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

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

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

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


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

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

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

$ git add ファイル名

コミットする

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

登場人物紹介

わかばちゃんが登場する書籍が発売中です!

わかばちゃんと学ぶ Webサイト制作の基本

Webサイトの企画・制作・運用までを、4コママンガと図解で楽しく学べます。
HTML5やCSS3以外にも、アクセス解析やSEOも解説しています!

アマゾンで中身を試し読みする

わかばちゃんが真央ゼミにやってくる前のストーリーになっています。
ぜひ、書店のWeb制作コーナーで、わかばちゃんを見つけてみてくださいね。

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

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

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


湊川あい(みなとがわ あい)
絵を描くWebデザイナー。高等学校教諭免許状 “情報科” 取得済。マンガと図解の力で、物事をわかりやすく伝えることが好き。2014年より「マンガでわかるWebデザイン」をインターネット上に公開していたところ、出版社より声がかかる。初の著書「わかばちゃんと学ぶ Webサイト制作の基本」が書店発売で6/14、Amazonでは6/15発売決定。Amazonで発売中

Twitter: @llminatoll
Webサイト: http://webdesign-manga.com/

コラボ問題 出題中!

CodeIQでは「マンガでわかるGit」のコラボ問題を出題中!
gitのadd / commitについての6つの選択問題!あなたは「Git」を使いこなせていますか?
このお話の中にヒントが隠されているかも!?

コラボ問題はこちらから

カテゴリー : デジタル・IT タグ :
CodeIQ MAGAZINEの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。