Gitでのファイル管理
作成したファイルをGitで管理するようにします。
GitHubにログインし、リポジトリを作成します。
![GitHub](https://tech-popeye.com/wp-content/uploads/2021/11/github_1_compressed-1024x664.png)
リポジトリの名前は「Twitter」とし、外部には公開しないので(自分しかアクセスできないようにするために)「Private」として、Create repositoryを選択します。
![GitHub](https://tech-popeye.com/wp-content/uploads/2021/11/github_2_compressed-1024x833.png)
これでリポジトリが作成できました。
HTTPSでGitHubにアクセスするので、「HTTPS」を選択し、URLを控えておきます。
「create a new repository on the command line」の箇所をこれから順に実行していきます。
![](https://tech-popeye.com/wp-content/uploads/2021/11/github_3_compressed-1-1024x592.png)
Visual Studio Codeでターミナルを開きます(以後、「ターミナル」と言います)。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_1_compressed-1024x585.png)
ターミナルで以下を実行します。
(ローカルのGitに、自分が誰かを教えてあげます)
git config –global user.email GitHubで登録したemail
git config –global user.name GitHubで登録したusername
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/cmd_1_compressed-6-1024x517.png)
ターミナルで以下を実行します。
(開発している場所である「/Applications/MAMP/htdocs/Twitter」に移動します)
cd /Applications/MAMP/htdocs/Twitter
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/cmd_2_compressed-6-1024x502.png)
先ほどのGitHubの「create a new repository on the command line」の箇所を順に実行していきます。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/cmd_3_compressed-6-1024x476.png)
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/cmd_4_compressed-6-1024x586.png)
「git init」により、Twitterフォルダ以下がローカルのGitリポジトリで管理されるようになりました(cd /Applications/MAMP/htdocs/Twitterにより、Twitterフォルダで実行しているため、Twitterフォルダ以下が管理されるようになります)。
Visual Studio Codeのエクスプローラーで、Twitterフォルダ以下の色が変わっていたり、ファイルの右側に「U」などが表示されていることが分かります。 そうなっていない場合は、Visual Studio Codeを再起動してみて下さい。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_5_compressed-1024x647.png)
「git add ファイル」は、指定したファイルを「コミット対象にする」という意味になります。ここでは「README.md」ファイルのみがコミット対象になりました。
ここで、左から3番目のアイコンをクリックして下さい。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_6_compressed-1024x647.png)
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_7_compressed-1024x655.png)
コミット対象とした「README.md」だけが、「ステージされている変更」という場所にあります。「ステージされている変更」とは、「コミット対象である」という意味になります。
ターミナルで、続きのGitHub上のコマンドを実行していきます。
![](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_9_compressed-1024x538.png)
「git commit」により、コミット対象である「README.md」がローカルリポジトリにコミットされました。「-m “first commit”」はコメントでしたね。
ターミナルで、続きのGitHub上のコマンドを実行していきます。
![](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_10_compressed-1024x540.png)
「git branch -M ブランチ名」は、ローカルにブランチを作成するコマンドです。
ここでは、ローカルに「main」というブランチを作成しました。
いま開発しているTwitterフォルダ以下は、Gitのローカルリポジトリの「main」ブランチの中にある、という意味になりました。
![Git](https://tech-popeye.com/wp-content/uploads/2021/11/git_1_compressed.png)
ターミナルで、続きのGitHub上のコマンドを実行していきます。
![](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_11_compressed-1024x482.png)
「git remote add origin https://github.com/*/Twitter.git」は、リモートの「https://github.com/*/Twitter.git」という場所に、リモートリポジトリを「origin」という名前で作成する、という意味になります。リモートリポジトリoriginのブランチ名は、デフォルトで「main(またはmaster)」になります。
いまは以下のような状態です。
![Git](https://tech-popeye.com/wp-content/uploads/2021/11/git_2_compressed-1024x821.png)
ターミナルで、続きのGitHub上のコマンドを実行していきます。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/cmd_6_compressed-7-1024x597.png)
「git push -u origin master」は、ローカルリポジトリからリモートリポジトリへ、ファイルの変更内容を反映させるコマンドでしたね。
初めてgit pushする場合は、上図のようにポップアップが上がります。
許可を押下すると、ブラウザが起動し、GitHubへの認証が求められます。
![ブラウザ](https://tech-popeye.com/wp-content/uploads/2021/11/cmd_7_compressed-7-1024x610.png)
GitHubに登録したメールアドレスとパスワードを入力します。
![ブラウザ](https://tech-popeye.com/wp-content/uploads/2021/11/cmd_8_compressed-7-1024x674.png)
入力したメールアドレスにメールが届きます。
その中に記載された「Verification code」をGitHubに入力します。
![ブラウザ](https://tech-popeye.com/wp-content/uploads/2021/11/gmail_compressed-1024x890.png)
Visual Studio CodeからGitHubへのアクセスを許可します。
![ブラウザ](https://tech-popeye.com/wp-content/uploads/2021/11/cmd_9_compressed-4-1024x671.png)
![ブラウザ](https://tech-popeye.com/wp-content/uploads/2021/11/cmd_10_compressed-3-1024x689.png)
Visual Studio Codeに戻ります。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/cmd_11_compressed-3-1024x600.png)
GitHubのユーザー名を入力します。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/cmd_12_compressed-3-1024x599.png)
最後に、以前のカリキュラムで控えておいたアクセストークンを入力します。
(※パスワードではないことに注意して下さい)
これでpushができました。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_13-1024x571.png)
![Git](https://tech-popeye.com/wp-content/uploads/2021/11/git_3_compressed-1024x821.png)
GitHubを見てみましょう。
![](https://tech-popeye.com/wp-content/uploads/2021/11/github_5_compressed-1024x666.png)
![](https://tech-popeye.com/wp-content/uploads/2021/11/github_6_compressed-1024x662.png)
mainブランチに対し、コミット対象とした「README.md」ファイルのみ連携されていることがわかります。コミットのコメントも連携されていることがわかります。
README.md以外の残りのすべてのファイルもGitHubに連携します。
ここまではターミナルで作業してきましたが、以降はVisual Studio Codeの画面を操作してcommit、pushを行います。
ソース管理の「すべての変更をステージ」の+ボタンを押して、すべてのファイルをコミット対象として下さい。
または、個別のファイルの右横の「変更をステージ」の+ボタンの押下を、すべてのファイルに対して行って下さい。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_14_compressed-1024x592.png)
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_15_compressed-1024x591.png)
「変更」にあったファイル群が、「ステージされている変更」に移ります。
そして、コミットのコメントを入力します(ここでは「コミットします」と入力しました)。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_16_compressed-1024x532.png)
右上のチェックマークをクリックしてコミットします。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_17_compressed-1024x530.png)
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_18_compressed-1024x313.png)
「変更の同期」ボタンを押して、GitHubにプッシュします。
または、右上の「…」からプッシュを選択します。
※パスワードを聞かれた場合は、PCのパスワードを入力し、常に許可を選択します。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_19-1024x298.png)
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_20_compressed-1024x456.png)
「変更(変更があるファイル)」には何も表示が無くなります。
![VSCode](https://tech-popeye.com/wp-content/uploads/2021/11/vscode_21_compressed-1024x301.png)
GitHubを見てみましょう。
![](https://tech-popeye.com/wp-content/uploads/2021/11/github_7_compressed-1024x667.png)
Twitterフォルダ配下のフォルダ・ファイルが連携されていることがわかります。
本節の説明は以上になります。