gitの使い方と流れ | まずはローカルで自分だけで練習!

Friday, September 24, 2021

FF13的に言うと「gitのaddがcommitでpush」といった感じです(意味不明)

gitの使い方はなんとなくわかったけどもっと短くシンプルにやってみせてくれ、という人(昔の自分自身)のためにこの記事でデモンストレーションして見たいと思います。

職場の同僚に説明するときにも役に立つはず ^^

VS Codeとgitをインストールしたら準備完了です。さっそく始めていきましょう ^^

gitの基本的な使い方

gitは別にGithubやらGitlabやらを使わなくても問題ありません。

なのでまずは一人で自分のコンピュータ内で使って練習してみましょう。

gitの基本の流れは以下のとおり

  • 新しいフォルダーをつくってVS Codeで開く
  • git initでフォルダーをgit対応にする
  • 新しいファイルをつくる
  • git addで変更をgitにセーブ(ステージング)
  • git commitでaddしたものをgitにセーブ(コミット)
  • git pushでGithubへアップロード(次回の記事で解説)

簡単にいうとこんな具合になります。

新しいフォルダーをつくってVS Codeで開く

まずはどこかに新しくフォルダーをつくってからVS Codeで開きます。

VS Codeでフォルダーを開く

VS Codeでフォルダーを開く

こんな具合になります(OSによって多少見た目が違います)

git initでフォルダーをgit対応にする

次にVS Codeのターミナルでgit initを実行します。すると↓のようになるはずです。

ターミナルでgit init

ターミナルでgit init

いろいろとHintがでてきますが今は無視しても大丈夫です。

git initコマンドでは、今いるフォルダーに「.git」というフォルダーがつくられます(.gitフォルダーは表示されないようになってますが存在してます)。

この.gitが同じフォルダー内にあるほかのファイルを管理してくれる、というわけです。

git initは一回やればOKなので、このフォルダー内ではこれ以降やる必要なしです ^^

ファイルをつくる

テストとして今いるフォルダーで「test.txt」というファイルをつくって、なんでもいいので書き込んで保存します。

するとgitが反応して

新しいファイルをつくる

新しいファイルをつくる

という感じに緑色になります。色付けはVS Codeによるものですがgitと連動しており

  • :追加があったもの
  • 青:変更されたもの
  • 赤:消去されたもの
  • 灰色:gitで管理されていないもの

といった色使いがされているのでいい目安になります。

とりあえずこのまま進みます。

git add

いま保存したファイルはあくまでOSで保存された状態です。

この時点ではgitは新しくファイルが追加されたことは知っているけど、gitのファイル管理システムには保存されていません。

ここがわかりにくいのですが、あとでまとめるので今は進めていきます。

gitのファイル管理システムにこの新しいファイルを保存(記録)するためには

  • git add ファイル名
  • git commit

の2つのコマンドで段階的に記録します。

git add ファイル名では一時的にgitに記録したいものを保存しておき(ステージング)、いくつかのファイルをaddしてからまとめてコミットする、という具合です。

まあ、とりあえずやってみましょう ^^

ターミナルでgit add test.txtとやって、VS Codeの左のメニューにある「Source Control」を選択すると↓のようになっているはずです

git addでステージングする

git addでステージングする

「Staged Changes」にtest.txtが入ってます ^^

これがステージングされた状態で、コミットする準備ができた状態になります。(ちなみにファイル名をクリックすればどんな変更がされたのかチェックできます)

(VS Codeでは「Source Control」内で「+」ボタンを押すことで簡単にgit addができます。今回はこれを使ったんでターミナルにgit addコマンドが映ってませんのでご注意を ^^;)

git commit

つぎにステージングされたファイルをコミットします。

コミットすることによってgitのファイル管理システムに変更点・日時・Authorなどの情報が保存されます!

ではさっそくgit commit -m "added test.txt"とうってみましょう。

「-m “test.txt”」の部分はコミットに追加するメッセージのことで、どんな変更をしたのか自分や他の人にわかるように説明を入れます。

コマンドを実行すると

git commitでコミットする

git commitでコミットする

となっているかと思います。

「Git Graph」で確認してみると↓のようにコミットが点として表示されており、コミットメッセージもしっかりと記録されております ^^

git commitでコミットする

git commitでコミットする

VS CodeのExtensionであるGit Graphについてはこちらの記事で解説しているので興味があればぜひ :)

ここまでのgitでの流れを図解すると

gitのコミットまでの流れ

gitのコミットまでの流れ

こんな感じでしょうか?

何回もやってみる

さて、とりあえずこれでgitを使って保存履歴を残すことができるようになりました。

ここからは練習として

  • ファイルの変更・追加・削除などをする
  • git addでコミットしたいものをステージング
  • git commitで記録する

を何回もやってみましょう ^^

そうすれば何がどうなってどうすればああなるのか頭の中で整理できてきますよ ^^

例↓

test.txtに新しいテキストを追加して保存

test.txtに新しいテキストを追加して保存

addとcommitでgitに記録

addとcommitでgitに記録

Git Graphで2つめの点ができているのが確認できます ^^

もちろんもっといろんなことができるようにならないとまだ実用性はそこまで高くはないです。

なので次の記事でもっと踏み込んで解説していきたいと思っております :)

まとめ

この記事ではgitでの基本的な流れを

  • git init
  • git add ファイル名
  • git commit -m "コミットメッセージ"

の3つのコマンドを用いてデモンストレーションしてみました ^^

とりあえずこれらに集中して自分のローカル環境でガチャガチャやっていると自分が何をしているのかどんどん理解できるはずです。

僕も最初は↓のような点について混乱してました

  • 「Comand + S」とか「Ctrl + S」でファイル保存したのにgitに保存されてない
  • addとcommitの違いは?
  • フォルダーでgitが有効になってない
  • gitコマンドを打っても「not recognized」になる

などなど枚挙にいとまがない感じでした ^^;

僕の職場の同僚もみんな経験しているのでいろんなトラブルをシュートしていければと思います。

もちろん今回触れなかったブランチやらリモートやらも今後解説していきます :)

ではでは ^^/


記事をシェア・Likeしてくれると ^_^ です!


comments powered by Disqus