それではさっそくGitの使い方を見ていきましょう。
01｜Gitを使ってみる
管理するファイルを用意する
バージョン管理を行うための練習用ファイルを準備しましょう。
ターミナルからフォルダとファイルを作成します。
ターミナルで以下のようにコマンドを入力しましょう。
練習用ファイルはパソコンの`Documents`内に`GitHubSample`というフォルダを作り、その中に作成することにします。
$ cd Documents
$ mkdir GitHubSample && cd GitHubSampleフォルダを作成したら、Gitを利用するための準備をしておきましょう。
次のコマンドで、現在のフォルダにGitの機能を使えるようにします。
$ git init次のように`Initialized empty Git repository in ~`が表示されたらOKです。
$ git init
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint: git config --global init.defaultBranch <name>
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint: git branch -m <name>
Initialized empty Git repository in /Users/shinya/Documents/GitHubSample/.git/ # このように表示されればOK次のコマンドでファイルを作成します。
$ touch index.htmlFinderで確認してみると、`書類 → GitHubSample → index.html`とフォルダやファイルが作成されていることが確認できます。
この`index.html`ファイルをVisual Studio Codeで開いて次のように編集しましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHubSample</title>
</head>
<body>
<p>これはGitHubの機能を確認するためのサンプルファイルです。</p>
</body>
</html>
ブラウザで開いて確認すると、次のように表示されます。
リポジトリにファイルを記録する
ファイルをローカルリポジトリに記録することを`コミット`と言います。
リポジトリにはインデックスに登録したファイルだけが記録されます。
ターミナルから`git add`コマンドを実行していきます。
`git add`コマンドはこれから記録する対象を指定してインデックスに登録します。
ファイルをインデックスに登録することは、どのファイルをリポジトリに登録するのかを選別する作業だと思ってください。
`git add`コマンドの構造は次のとおりです。
$ git add <インデックスに登録するファイル名>今回は先ほど作成した、`index.html`というファイルをインデックスに登録しましょう。
ターミナルで次のように入力します。
$ git add index.html現在Gitがどのような状態になっているかは`git status`で確認できます。
$ git status
On branch master
No commits yet
Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file: index.htmlコミット予定のファイルが`index.html`と表示されていますね。
ファイルをgitのローカルリポジトリに追加しましょう。
`git commit -m “xxxx”`コマンドでコミットします。
`”xxxx”`の部分には、`どのような更新をしたのか`がわかるようなメッセージを入力しましょう。
ターミナルから次のコマンドを入力します。
$ git commit -m "first commit"次のようなメッセージが表示されればコミット完了です。
$ git commit -m "first commit"
[master (root-commit) dbaee61] first commit
1 file changed, 12 insertions(+)
create mode 100644 index.htmlこれまでのコミットの記録を知りたい場合は`git log`コマンドで知ることができます。
$ git log
commit dbaee615f30c2faa5d21f83201eb4490878f8b84 (HEAD -> master)
Author: sample <sample@mail.com>
Date: Sat Nov 12 16:12:15 2022 +0900
first commit上記のようにコミットIDとコミットした人のユーザー名とメールアドレス、いつコミットしたか、コミットの際のメッセージが表示されます。
これでリポジトリへファイルを記録することができました。
Gitの基本的な使い方の流れは
- ファイルの作成・更新
- インデックスへの登録
- リポジトリへコミット
となります。
02｜ファイルを更新してリポジトリへコミットする
それでは、更新情報が記録されていくリポジトリの機能をもう少し深掘りしてみていきましょう。
ファイルを更新する
`index.html`ファイルを少し変更してみましょう。次のように書き換えます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHubSample</title>
</head>
<body>
<p>これはGitHubの機能を確認するためのサンプルファイルです。</p>
<p>Gitでは現在のファイルの状態を記録していくことで、ある地点の状態へ遡ったり、修正内容を比較したりすることができます。</p>
</body>
</html>この時点でブラウザでの表示は次のようになっていますね。
先程と同じように、リポジトリへ記録していきましょう。
インデックスへ登録する
ターミナルから`git add`コマンドを入力します。
$ git add index.htmlコミットする
インデックスに登録できたらローカルリポジトリにコミットしましょう。
$ git commit -m "index.html fixed"
[master bf74544] index.html fixed
1 file changed, 2 insertions(+)コミットの状況は`git log`コマンドで確認できます。
$ git log
commit bf74544d9b4ce4fd27a71d4d5ff9ef0d346e614b (HEAD -> master)
Author: sample <sample@mail.com>
Date: Sat Nov 12 16:51:30 2022 +0900
index.html fixed
commit dbaee615f30c2faa5d21f83201eb4490878f8b84
Author: sample <sample@mail.com>
Date: Sat Nov 12 16:12:15 2022 +0900
first commitこのように、目的とする更新が終わった時点でこまめにリポジトリへコミットしておきましょう。
何か大きなバグが発生した時に、特定のコミットまで状態を戻すことができます。
03｜以前のコミットへ戻す
それでは以前のコミットへ戻すにはどうすればいいのでしょうか？
これには`git reset`というコマンドを使います。
現在のコミット状態を見てみましょう。
`git log`コマンドで確認できますね。
このコマンドのオプションとして、`–oneline`をつけると、コミットの記録を1行ずつコンパクトに表示してくれます。
$ git log --oneline
bf74544 (HEAD -> master) index.html fixed
dbaee61 first commitこのようにコミットの記録は表示されているものの上に行くほど新しいものになります。
各行の先頭にある`bf74544`や`dbaee61`の文字列は、コミットIDの一部が表示されており、この文字列を頼りに以前のコミットに戻したりします。
※ 各PCによって表示されるコミットIDは異なりますので、自身のPCのコミットIDを確認して操作を進めてください。
それでは一番初めのコミットへ状態を戻してみましょう。
コミットを遡るには`git reset`コマンドを使います。
このコマンドには3つのオプションがあり
- –hard：コミット、インデックス、ファイルの変更をすべて削除する
- –mixed：コミット、インデックスを削除し、ファイルの変更だけは残す
- –soft：コミットだけを削除し、インデックス、ファイルの変更は残す
のいずれかを目的によって選択して実行します。
オプションを入力しない場合は、自動で`–mixed`コマンドが適用されます。
それでは一番初めのコミットへ状態を戻します。
$ git log --oneline
bf74544 (HEAD -> master) index.html fixed
dbaee61 first commitコミットの記録のうち、最初のコミットIDである`dbaee61`を使います。
コマンドから次のように入力しましょう。（コミットIDの部分は自身のPCから参照しましょう）
$ git reset --hard dbaee61
HEAD is now at dbaee61 first commitこれで以前の指定したコミットまで戻ることができました。
`git log`コマンドで確認してみましょう。
$ git log
commit dbaee615f30c2faa5d21f83201eb4490878f8b84 (HEAD -> master)
Author: sample <sample@mail.com>
Date: Sat Nov 12 16:12:15 2022 +0900
first commitコミットの記録も最初のコミットだけになっていますね。
修正した`index.html`ファイルも確認してみると、最初に編集した状態へ戻っています。
ブラウザで確認しても以下のようになっていますね。
誤って以前のコミットへ戻した場合
誤って以前のコミットに戻してしまった…
という場合は、すぐに以下のコマンドを実行すれば最新のコミット状態へ戻すことができます。
$ git reset --hard ORIG_HEADこのコマンドで、直前の`git reset`コマンドによる操作を取り消すことができます。
実行して確認してみましょう。ターミナルから以下のコマンドを実行します。
$ git reset --hard ORIG_HEAD`git log`コマンドで確認してみると、確かに最新のコミットの状態へ戻っていますね。
$ git log
commit bf74544d9b4ce4fd27a71d4d5ff9ef0d346e614b (HEAD -> master)
Author: shinya kunisada <shinyadev2924@gmail.com>
Date: Sat Nov 12 16:51:30 2022 +0900
index.html fixed
commit dbaee615f30c2faa5d21f83201eb4490878f8b84
Author: shinya kunisada <shinyadev2924@gmail.com>
Date: Sat Nov 12 16:12:15 2022 +0900
first commit`index.html`ファイルも最新の状態へ復元されています。
04｜まとめ
このようにGitを使うことで、細かく更新状況を記録できたり、万が一何かあった時に以前の状態まで簡単に戻すことができます。
簡単ではありますが、ここまでがGitの基本的な使い方になります。
自分の手でも実際に操作して確かめてみてくださいね。
さいごに
もしプログラミング学習にお困りなら、TechPro（テックプロ）にお任せください！
あなたの現状と目標に合わせて、最適な学習コースのご提案と学習計画のプランニングをお手伝いします。
お問い合わせは以下のボタンからお気軽にお申し込みください!
ご連絡お待ちしています！
