2020/09/27
前回の続きです。今回はVisual Studio Code(VS Code)から前回作成したリモートリポジトリのクローンを作り、編集して行きます。
本題に入る前に、Gitの概要についてファイルの記録保存の流れを以下に示します。
Gitは大きく分けて、保管場所(リポジトリ)が「Local」と「Remote」の2箇所あります。Localリポジトリは個人PC内の保管場所(フォルダ単位)で、RemoteリポジトリはGitHub等の編集後のファイルを最終的に保管する場所です。
Localリポジトリ内のファイルの状態は、Worktree(Working directory)、Staging Area、Git directoryの3つに分けられ、gitコマンド(git add、git commit)で状態を変更することができます。git directoryにあるファイルは最終的に「git push」コマンドでRemoteリポジトリに保管することができ、逆に、Remoteリポジトリにあるファイルは「git clone」コマンドでLocalリポジトリに保管することができます。
今回は、「git clone」コマンドを実行する所からスタートします。gitコマンドが実行できない場合は、Gitをインストールして始めてください。
それでは、VS Codeのターミナルからgitを使って編集していきます。
まず、以下のコマンドを実行しました。
git clone (作成したリモートリポジトリのURL)
GitHub上のリポジトリ名のフォルダが作成され、VS CodeがGitHubにサインインして良いかを聞いてきますので「許可」ボタンを押しました。
サインインしたGitHubで、以下の認証画面が出ますので「Continue」を押すと、
以下の画面が出ますので「Authorize github」ボタンを押しました。
その後、VS Code側でURLを開いてもよいかを聞いてきますので「開く」ボタンを押すと、
GitHub側で「Success!」が表示され、VS CodeとGitHub間でアクセスOKの状態になりました。
ようやく編集ができるようになりましたので、README.mdファイルに追加記入をしました。ファイルが変更されると、VS Codeのエクスプローラ上のファイル名の色が変わり、M(Modified)が表示されました。
次に、新しいファイル(test.py)を作成します。Pythonのコードです。保存するとファイル名は緑色で、U(Untracked)の文字と一緒に表示されました。これはGit管理下にない(追跡されていない)ファイルを意味しています。現在のファイルの状態がWorktreeであることを示しています。
ファイルの状態を知るには以下のコマンドを実行します。
git status
Modified/Untrackedの状態が確認できました。
次に、以下のコマンドでフォルダ内の全ファイルをWorktreeからStaging Areaに状態変更させます。
git add.
U(Untracked)のtest.pyファイルがStaging AreaにA(Add)されました。「git status」コマンドでもStaging Areaに変更されたことが確認されました。
次に、Staging AreaのファイルをGit directoryに以下のコマンドで状態変更させます。
git commit -m "Free comment"
実行するとエクスプローラ上のファイル名の色が消えました。
最後に、リモートリポジトリにファイル変更内容を反映させるために、以下のコマンドを実行しました。
git push -u origin master
実行後に、GitHub上のリモートリポジトリの中身を確認すると、編集内容が反映されていることが分かりました。
ソースコードも中身が確認できました。
次回は再度、ローカルでこれらのファイルを編集して、リモートリポジトリに再pushしてみます。
Pythonコードに計算を追記することにします。3、4行目が追加されたコードです。実行結果も問題なしです。2つのファイルは編集済みなので、M(Modified)表示されています。
git addを実行し、Staging Areaに変更し、
git commitを実行しました。この時のメッセージとして「add calcuration」を設定しました(calculationのスペルミスにいまさら気付いた。そのまま行かせてもらいます・・)。最後に、git pushコマンドでリモートリポジトリに変更内容を保存しました。
ソースコード(test.py)も同様に更新済みです。
リモートリポジトリのメッセージ(add calcuration)にリンクがついているのでクリックすると、
先程編集した履歴を確認することができました。大変便利な機能ですね。
