CodeIQ MAGAZINECodeIQ MAGAZINE

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

2016.07.06 Category:【連載】マンガでわかるGit Tag: ,

  • 260
  • このエントリーをはてなブックマークに追加
catch_git_04_300x300

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

コミットしてみよう






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

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

  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 “コミットメッセージ”

登場人物紹介

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

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」を使いこなせていますか?

このお話の中にヒントが隠されているかも!?

コラボ問題はこちらから

  • 260
  • このエントリーをはてなブックマークに追加

■関連記事

マンガでわかるGit 10話「masterブランチを守れ!〜危険な強制プッシュ〜」... masterブランチを守れ! 〜危険な強制プッシュ〜 そ、それはだな……ごにょごにょ わかばちゃん、私がリモートリポジトリのmasterブランチをプロテクトしておいたわ。これで、たとえ強制プッシュしてしまってもエラーで失敗するだけよ。 思う存分Gitしてね。 あ、ありがとうござい...
マンガでわかるGit 9話「pullの正体はfetch+mergeだった?」... pullの正体はfetch+mergeだった? ※前回のお話:マンガでわかるGit 第8話「GitHubを使ってみよう push・pull編」 今までは、わかばちゃんは単純にこういうイメージでpush・pullをしていましたが… ↓ 実はこういう構造! リモートブランチ リモー...
マンガでわかるGit 第8話「GitHubを使ってみよう push・pull編」... GitHubを使ってみよう push・pull編 この記事は マンガでわかるGit 第7話「GitHubを使ってみよう」の続きです。 前回の状態 マンガでわかるGit 第7話「GitHubを使ってみよう」 の演習を終えたら、このような状態になっていると思います。 SourceTree...
マンガでわかるGit 第7話「GitHubを使ってみよう」... GitHubを使ってみよう そもそもソーシャルコーディングとは ソーシャルコーディングっていうのは、「ソースコードをクラウド上で共有して、他のユーザーとコラボレーションしながら開発をしていく」ということよ。 複数人で開発できる仕組みについては マンガでわかるGit 6話 「集中型...
マンガでわかるGit 第6話「集中型と分散型、何がどう違うの?」... 集中型と分散型って、何がどう違うの? バージョン管理システムは大きく分けて2種類 集中型バージョン管理システム CVS・Subversionなど 分散型バージョン管理システム Git・Mercurialなど 集中型は「ひとつのリポジトリに接続してみんなで使う」タイプ。 分散...
マンガでわかるGit 第5話「過去の状態に戻してみよう」... 過去の状態に戻してみよう このお話は「マンガでわかるGit 4話 コミットしてみよう」の続きです。 ファイルを特定の時点に戻す方法はいろいろあるけど 、今回はチェックアウトを使ってみましょう。 チェックアウト? チェックアウトをすると、作業ディレク...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ