GitHub Desktop

リポジトリにコミットについてのまとめ-STEP3

リポジトリにコミットについてのまとめ

ローカル環境でVSCode編集で保存した内容はコミットするまでリポジトリに影響はでません。この章ではVSCodeでファイル編集→保存→コミットまでの流れを解説します。

コミット(commit):追加・変更したファイルをローカルリポジトリに記録すること。

ファイルを新規作成する

フォルダ内で右クリックCodeで開くを選択でVSCodeで開いた状態。

VSCode
VSCode

+マークを選択しindex.htmlのファイルを作成します。

新しいファイル
新しいファイル index.html

VSCodeで作ったindex.htmlファイルがエクスプローラーの方に追加されているのが確認できます。

index.html追加
index.html追加

今の段階でGitHub Desktopを開くとChangesindex.htmlが追加されています。

GitHub Desktop
GitHub Desktop

VSCodeに下記コードを追加しGitHub Desktopの表示がどうなっているか確認しましょう。

<!DOCTYPE html>
<html lang="ja">
<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">
<link rel="stylesheet" href="style.css">
<title>Git練習</title>
</head>
<body>
<main>
<section><h1>見出し1</h1></section>
</main>
</body>
</html>

コードをVSCodeに貼り付けて保存をします。

GitHub Desktopを開くとChangesindex.htmlに記述した内容が表示されています。

GitHub Desktopの表示
GitHub Desktopの表示

GitHub Desktopでコミットはされておらず追加や変更が表示されている状態です。

コミットする

コミットする際は、コミットの内容を表すコミットメッセージを入力する必要があります。コミットメッセージはタイトルと説明を設定できますが、タイトルだけでもOKです。

追加内容をコミット
追加内容をコミット

Commit to masterをクリックしてNo local changesと表示されていればコミット成功です。

コミット成功
コミット成功

コミットの履歴を確認するにはHistoryに切り替えます。Historyにはこれまでのコミットが一覧で表示されており、選択するとその内容を確認することができます。

History(ヒストリー)
History(ヒストリー)

Historyの上を選択すると先ほどコミットした内容が右側に表示されます。

2つ目のコミット内容
2つ目のコミット内容

ファイルを編集してコミットする

コミットの仕様を理解するためにVSCodeで変更や追加した内容がGitHub Desktopでどのような表示になるか確認しましょう。

GitHub Desktopを開きRepositoryOpen in Visual Studio CodeVSCodeを開きます。

コード内容変更
コード内容変更

VSCodeで変更し保存した後に、GitHub Desktopを開くとChangesに変更した箇所が表示されます。

削除された内容は-赤色で、追加された内容は+緑色で表示されています。コミットからの変更部分を表していて、差分といいます。

Changes変更履歴
Changes変更履歴

コミットメッセージを入力してCommit to masterを選択してコミットします。

変更・追加をコミット
変更・追加をコミット

Historyをクリックしてコミットされた内容を右側で確認することができます。

コミット履歴 History
コミット履歴 History

コミットを取り消す

コミットの取り消し方法についての解説になります。

まずは、直前のコミットを取り消す方法についてです。この方法で取り消した場合は直前のコミットは完全に消えてHistoryの履歴も残りません。

VSCodeで何かしらの文字を入力し、GitHub Desktopでコミットします。

変更をコミット
変更をコミット

コミット完了後、左下にUndoのボタンが表示されています。Undoは元に戻すという意味なので、ここをクリックして、直前のコミットを取り消すことができます。

Undoで取り消し
Undoで取り消し

※リモートリポジトリへのプッシュなどの操作を行うと、この方法では取り消せなくなります。Undoボタンはコミット後、直前取り消しに使用できます。

リバートでコミット取り消し

Undoは直前のコミットのみ取り消し可能で、リモートリポジトリへプッシュなどの操作を行うと取り消せなくなってしまいます。

リバートを使うことによって、リモートリポジトリへプッシュした内容も取り消すことができます。

リバートはコミットの取り消しというよりも、コミットによる変更を打ち消すコミットととらえた方がわかりやすいです。

一番新しい履歴のコミットで右クリックRevert changes in commitをクリック。

Revert changes in commit
Revert changes in commit

リバートコミットの内容では、削除された部分が赤色で表示されています。リバートコミットはこのように履歴に残るようになっています。

リバートコミット
リバートコミット

次の章ではGitで共同作業するためのリモートリポジトリについての解説になります。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


上にスクロール 下にスクロール