様々なコミット

Git講座 その1 - 様々なコミット」の進行状況をシェアする

  • ファイルの変更
  • 複数のファイルの追加
    • ステージを分けてコミット可能
  • ファイルの削除

様々なコミットを行なっていきましょう。

では、初めてのコミットが行われましたね。続いて色んなコミットをどんどんやっていって、コミットするということについて慣れていきたいと思います。画面を共有します。

はい、「test. txt」を初めてのコミットとして登録しました。それができましたので今度は色んなコミットですね。ファイルの中身を変えてみたり、複数のファイルにしてみたり、今度はファイルを削除したり、と様々な変更をリポジトリに加えて、その内容を元にコミットを行っていきましょう。ではやってみます。

ファイルの内容を変更

はい、じゃあまずはこのテキストファイルの中身を変えたいのでエディターで設定していきます。そうですね、さらに追加でテキストを入力してみましょう。

「テキストの追加ですよ。」という形で一行だけ追加しました。この状態で git のSourceTreeの中身を見てみると、このようにまた自動的に検知されましたね。

今、この最初のコミットから新に検知されて「test. txt」に変更が加えられたよ、ということを見つけてくれています。具体的にはこちらで、1行消えて、2行増えたという内容になってます。

このように、既存のファイルに何かしら変化を加えた場合にも、自動的に検知されて出てくるという内容になります。

もしファイルステータスの方に、ここにカレントがなっている場合はこのように見えているはずですね。masterブランチの方に行くとこのように見えています。はい、ここまで見えましたら、今度はファイルステータスのところで、これをまたステージします。ステージして、そしてコミットですね。

コミットボタン押せばコミットの入力枠が出てきます。ここに何かしら、またテキストメッセージを書き加えコミットします、というような内容なります。

「test. txtに文言を追加」という形で、もちろんメッセージは何でもいいですよ。私は今「test. txtに文言を追加」としました。はい、じゃあこれでコミットします。コミット。

はい、これでmasterのブランチの方に行ってみると、このように、お、なんか見たことある感じになりましたね。このコミットが繋がってるのが分かります。そして「First commit」の次に「test.txt に文言を追加」というコミットが増えたのがわかりますね。その時にはこの内容の変更があったよ、ということも出ています。バッチリ。

ファイルを複製する

続いてファイルをコピーして増やしてみましょう。

今度はこれ、今ここですね。今までは、テキストのエディターの方で変更をしていました。もちろんここ(Visual Studio Code)でファイルを増やしていただくでも結構ですし、フォルダーの中身をコピーしてもですね、 command + c でコピーして command + v とすれば、当然テキストが増えますね。今こちらにも増えました。そしてこの中身の名前を「test2.txt」とします。はい、しました。これで「ファイルが一個追加されたよ」という状態になります。

では、この状態でまたSourceTreeを見てみましょう。

はい、このように、また「Uncommitted changes」が増えてるのが分かります。なるほどですね。そして中身を見てみると、今度は緑のプラスマークではなくて、紫色のはてなのマークになっています。

これは「これまでの git の管理にはまったく覚えのない、知らないファイルが新たに追加されたよ、変更されてるよー」ということで、はてなマークになっています。

そして中身を見てみると「テストです、テキストの追加ですよ」という先ほど「test.txt」をコピーした内容が入っているのがわかりますね。

はい、じゃあこれをコピーしたので、これをコミットします。上に持って行って(ステージして)コミットボタンをクリック、そしたらメッセージを書く。このあたりは一緒ですね。「testを複製しtest2を追加」というような形でコミットします。はい、コミットができました。バッチリです。バッチリ。簡単ですね。簡単です、簡単です。

それぞれのファイルを変更する

じゃあ今度は、二つのファイルを同時に変更してみましょう。「test.txt」の方にはテスト1ですよというふうにして、今「1」だけ書き加えました。そして「test2.txt」の方にはテスト2です、というふうにして書き加えました。

はい、このテキストエディターが、今フォルダで開いていますけども、これは Visual Studio Code の機能という形になります。Visual Studio Codeの利用の仕方については別途レッスンでお伝えしておりますのでそちらをご覧ください。

フォルダーをね、ここの該当のフォルダをこのまま、こちらの Visual Studio Code にドラック&ドロップしていただければ、このフォルダーとして開きました、という内容です。

一応ここでご紹介しましょうか。 Visual Studio code 開いたら、ここにフォルダ追加して下さいねーとかっていうのが出てきますから、この時にこの「testフォルダ」をぽいっとすれば、このように開くという形です。はい。

ステージを分けてコミットできる

今、「test.txt」と「test2.txt」で数字を書き加えました。どうなるかというと、今度ここですね、はい。今度は黄色の「…」のマーク、これは「既存で git 管理されているファイルに変更がありましたよ」という意味になります。その中身を見てみるとここ(test.txt)は「テスト1」になっていて、こっち(test2.txt)は「テスト2」になっているという形になります。

はい、で、今二つ以上のファイルの変更がありました。実際には二つですけどね、これから先いろんな修正を行うと二つ以上のファイルの変更がある場合もあります。このときに初めてステージが役に立ちます。ステージでこっち(test.txt)を上にしてこっちだけをコミットする、こっち側まだ変更として残して送っていたことができますね。

これは、コミットを行う際に「作業のコミットの単位としてわかりやすい、区切りのいいところでコミットしてあげたほうがいい」という内容になります。

例えばWebサイトを作っていて、headerを作って、中身(body)を作って、footerを作って、そしてゴールみたいなものがあったとして、作業が正常にすいすいと進んで調子に乗ってどんどんやっちゃって、headerもやってbodyのメインのエリアの途中ぐらいまで作業した時に「あ、コミットしなきゃ」って思ったとしましょう。そうするとheader部分だけをコミットして、後からbody部分はまた別の作業してからコミットしたいみたいなことがありますよね。

そういった時には、このステージ上でコミットするファイルを分けることでその内容が実現できる、ということになります。

今回は両方とも一気にコミットしてしまっていいと思いますのでコミットします。

「ステージを使うことで、コミットのタイミングでファイルを分けられる」ということだけ覚えておいてください。コミットして二つのコミットします。(2つのコミット)ですね。はい、コミット。(グラフが)どんどん繋がっていますね。

ファイルの削除

はい、じゃあ最後に、ここでは「削除する」っていうのやってみたいと思います。

今フォルダの中には二つのファイルがありますので一つを削除します。削除。(test2.txtが)なくなりました。この状態はどういう風に表現されるかと言うと、やはりこれもリポジトリー内への変更という形で表現されます。

そしてこちらの中身を見てみると、今度はグレー色のマイナスで表現されているのがわかりますね。これは「元々管理していたファイルなのに削除されたよ、変化が起こったよ」ということ教えてくれています。

当然のように、元々あったファイルが削除されるというのは「なくなった」という変更なので、gitでは、これまでの「ファイルの追加」や「ファイルの中身の変更」と同じように変化として伝わるということになります。ですので、ここにファイルは実際にないんですが、ないんですけども、まるであったかのように「変更」としてコミットすることが可能です。「test2.txt」が削除されたということをコミットする為に、「変更」として「test2.txt」をコミット内にファイルとして含めるという内容になります。伝わりますか?伝わりますか?難しいですね。無いのにある、無いのに加える、みたいな形です。はい、そういうことだと覚えといてください。

またコミットします。「test2の削除」という形ですね。はい。で、コミットしましょう。コミットの時にここの中身にどんどん複数行のコミットができるということは覚えておいてくださいね。はいじゃあコミットします。はい、コミットできました。

1、2、3、4、5…これで合計5つのコミットを行いました。

是非、皆様もコミットして頂いて、今はテキストをコピーしたりしただけですけども、もし余裕のある方は画像を追加されたり、色んなファイル…CSSとかHTMLとかいろんな形式のファイルを追加頂いて、何でも結構ですのでコミットして、どんどんのコミットを増やして最低でも5つ以上ぐらいコミットしていただければと思います。

では、作業なさってください 。

戻る: Git講座 その1 > SourceTreeを利用したGitの基本操作