5. コミットとプッシュ

add(追加)

VSCode のソース管理機能で、addcommitpush 操作をしてみましょう。

add とは

add はワークツリーにあるファイルを、ローカルリポジトリのインデックス情報に登録する作業で、これを日本語で言うと変更をステージするといいます。

ワークツリーと Untracked File

Git を初期化するとファイル名の右横に U と表示されています。これは未追跡ファイル(Untracked File) と呼ばれ、ローカルリポジトリ内のワークツリーという場所にいる状態です。

git add コマンド

add コマンドはファイル名を指定して実行します。

ターミナル
git add ファイル名

README.md ファイルを add するには以下のコマンドになります。

ターミナル
git add README.md

すべてのファイルを add

複数のファイルを add コマンドするのは面倒です。すべてのファイルを add するには、.(ピリオド) を指定します。

git add .

commit(コミット)

commit は、追加したインデックス情報の変更をログとして記録する作業です。 誰が何をいつ修正したかを管理し、過去の状態に戻すこともできます。

git commit コマンド

git commit-m で修正したファイルのコメントを入力します。

ターミナル
git commit -m "コメント"

「first commit」というメッセージで commit します。

ターミナル
git commit -m "first commit"

add & commit 同時コマンド

addcommit コマンドを同時に実行することもできます。

ターミナル
git commit -am 'コメント'

push(プッシュ)

commit とリポジトリの設定が完了したら、GitHubpush してみましょう。

main ブランチの場合

デフォルトブランチを main にしている場合は、以下のコマンドになります。

ターミナル
git push -u origin main

master ブランチの場合

デフォルトブランチを master にしている場合は、以下のコマンドになります。

git push -u origin master

ソース管理でCommit

VSCodeのソース管理で Git操作します。ソース管理では、ファイルが追加・修正されると、リアルタイムでGit の情報が確認できます。

ファイル作成

README.md 作成

「README.md」ファイルを作成します。

publicフォルダ作成

VSCode のエクスプローラ画面で public フォルダを作成します。

index.html作成

public フォルダの中に index.html ファイルを作成します。

ソース管理の確認

各ファイルに U(Untracked File) 、ソース管理メニューには、ファイル数が表示されています。

add & commit

ソース管理を開く

ソース管理を開きます。

コメント追加

テキストボックスにコメントを入力して、【Commit】ボタンをクリックします。commitでは、何を修正したかのコメントは必須です。

ショートカットキー

テキストボックスにコメントを入力して、以下のショートカットでもcommitできます。

OS ショートカット
Windows Ctrl + Enter
Mac Cmd + Enter

初回ダイアログが表示された場合

はじめての commitでダイアログが表示されたら 【常に行う】をクリックします。

  • 【常に行う】の場合、今後ダイアログなしでcommit

add & commit完了

変更ファイルがなくなり、commit が完了しました。

commit はローカルリポジトリのみ

ローカル(自分のPC内)ではGit管理がでましたが、これで終了ではありません。リモートリポジトリとの同期(push)が必要です。

ソース管理でPush

Push

初回のpushは、ソース管理で【Publish Branch】をクリックします。

リモートリポジトリの作成

コマンドパレットが開いたら、リモートリポジトリの作成します。今回は全公開するための「public」の方を選択します。

初回時の認証

GitHubpush するときは、VSCodeとGitHub間でトークン認証が必要です。

  • SSHによる鍵認証に関しては別のセクションで説明

ブランチを公開するか?の質問ダイアログが表示されたら【OK】をクリックします。

トークン認証

以下のようなダイアログが表示されたら【許可】をクリックします。

GitHub にログインしていない場合は、ログインダイアログが表示されるのでログインします。

認証ページで【Continue】をクリックします。

  • この画面は、異なる場合があります

ダイアログの【Visual Code Studio.app を開く】をクリックします。

VSCode のダイアログが開いたら【開く】をクリックします。

GitHubの確認

push が完了したら、GitHubのリモートリポジトリ画面で確認してみましょう。

以下のダイアログが表示されれば、ここからでもリモートリポジトリにアクセスできます。

ソース管理で push

ローカルリポジトリの commit したら、ソース管理で push してみましょう。

ボタンで push する場合

VSCode の最新版では、ソース管理の【変更の同期】ボタンをクリックして push できます。

メニューから push する場合

ボタンがない場合は、ソース管理のメニューから「プッシュ」を選択して、push します。

push が完了しました。

GitHub で push の確認

GitHubpush できたか確認してみましょう。

はじめての Git