Git + VScode + GitHub 覚え書き
今日、オンラインのプログラミングスクールでgit, Visual Studio Code, git hubの連携を習いました。
来週から卒業制作に入る予定。オンラインスクールでチームを組むのだからファイル共有は絶対必須のスキルでしょう。しかし…どうにもコマンドが覚えにくい気がしたのでメモしておきます。
※Windowsの場合です（OSによって結構違うっぽい）
※間違い見つけたらご指摘いただけると励みになります！
※プログラミングスクール…https://sunabaco.com/
※6年くらい前の仕事で（全然プログラミングとは関係のない）、大量の業務ファイルを管理するために試行錯誤していた時、たまたまコマンドプロンプトの存在を知り、使えそうなコマンドを検索して個人用チートシートを作っていました。当時、コマンドラインやGitの存在を知っていたら、もっとラクに仕事できたのに…と、今日の講義を受けながら歯ぎしりしていました。フフフッ
【環境設定】
１．Gitをインストール
・書かれている通りにやればOK
gitのインストール元
・Windowsでインストールするときの注意点
Adjusting your path environment （パス環境の調整）のところで、真ん中の項目になっているのが大事。（Use Git from the windows command prompt = コマンドプロンプトでgitを使うよ）
・インストールできたら、コマンドプロンプトで
git -- version
を実行。
コマンドプロンプト上で「git version 2.26.2.windows」のように表示されればOK。
２．名前とメールアドレスを登録
・コマンドプロンプトで、以下を実行する
git config --global user.name "xxx"
git config --global user.email "xxx"
（xxxにはそれぞれ名前やメールアドレスを半角英数で入力。後から変えられるのでひとまず入れておく）
・登録がうまくできたか確認したいときは、同じくコマンドプロンプトで
git config --list
で、ズラズラっと出てきた一覧の中に載っているはず。（表示が１ページを超える場合、↓ボタンを押してドンドン表示させていこう）
【ここから作業】
３．自分のローカルリポジトリを作る
・ローカルリポジトリを作る（自分用のファイル保管場所、みたいなイメージ）
パソコン上に、git用フォルダ（ディレクトリ）を作っておく。
（もしコマンドプロンプト上でフォルダを作る時は、mkdir）
（mkdir = make directoryの略。フォルダもディレクトリもここでは同じようなものだと考えておく。※詳しくは：フォルダとディレクトリの違い
https://uxmilk.jp/27546 ）
コマンドプロンプトで、自分のgit用フォルダへ移動（フォルダ移動は cd ）
git init
を実行して、こんな感じのメッセージが出たらOK
Reinitialized existing Git repository in C:/Users/xxx/xxx/xxx/.git/
パソコンでgit用フォルダを見て、.gitというフォルダ（隠しフォルダ）が出来上がっていればOK。
【ここからファイル共有】
４．ファイルを用意する
・VScode上で、管理したいファイルを作成する
※今回は復習用なので、index2.html を新しく作りました。
VScode上で新規作成したファイルを見ると、ステータスが「U」と表示される。U = Untracked （追跡対象外）
・状況を確認する
コマンドプロンプトで、
git status
（status = 状況）
すると、作ったファイル名（index2.html）が赤色で表示される。
（赤色＝まだgitの管理対象になってませんよ）
５．ファイルを追加する（ステージング）
・コマンドプロンプトで、
git add index2.html
（ファイルをgitのバージョン管理にadd=追加しますね！）
git status
すると、作ったファイル名（index2.html）が緑色で表示される。
（緑色＝gitの管理対象になりました！）
VScode上では、このファイルのステータスが、「A」と表示される。A = Added（追加済み）
６．追加したファイルをコミットする
※「コミット」は、処理を確定する的な意味。前の項で追加したファイルの処理はまだ終わっておらず、以下のコミットという処理をすることで完了する。
・コマンドプロンプトで、ファイルの変更理由を追記する。
git commit -m "変更理由をここに書く！！"
追記した変更理由が表示される。
※絶対に「理由」を書いておくこと！後で見返した時にどのバージョンが何の変更だったかわかるように。
７．履歴を確認
・コマンドプロンプトで、
git log
すると、commitした番号らしきものと、自分が残したメッセージが表示される。
VScodeを見ると、ファイルに付いていたステータスは消えている。
８．GitHubと連携
・GitHubのサイトで、自分のアカウント作成（すでにアカウントある人はスルーで）
※にゃんこが可愛い
・GitHubのサイト上で、New repositoryを選択
・必要事項を入力＆選択
・Repository name →とりあえずわかりやすい名前に
・Public / Private →Privateを選択する（Publicにすると自分のコードが全世界公開になる）
・「Initialize this repository with a README」 →チェックしない。（既にコマンドプロンプトの操作でinitializeは済んでいる為）
※initializeについてはこちら
https://wa3.i-3-i.info/word16120.html
・上手くいけば、GitHub上にいろいろ表示される。この画面はまだ使うので開いておく。
９．ファイルをアップロードする（プッシュする）
・GitHubに表示されているコマンドを使って、ファイルをプッシュする。
ひとつ前と同じ、この画面を使う。
・ファイルを紐づけする
赤枠の「…or push an existing repository from the command line」に表示されているコマンドの1行目をコピり、コマンドプロンプトにペーストして実行する。
※1行目… git remote add origin https://github.com/xxx/gittest.git
（↑ 人によるので、必ず自分の画面からコピペすること）
・紐づけの確認
git remote -v
で、下のようなメッセージが出たらOK
origin https://github.com/xxx/(ここはリポジトリの名前).git (fetch)
origin https://github.com/xxx/(ここはリポジトリの名前).git (push)
・2行目も同様にコピペして実行する。
2行目…「git push -u origin master」
→ちょっと時間がかかった後、いろいろメッセージが出てくる。
無事にプッシュできると、GitHubのページがこのように変わる。
（他のファイルは、講義中にプッシュしたファイル）
10.ファイルを修正
Gitにプッシュしたファイルを修正したいとき
・VScode上で、ファイルの中身を書き換える
ファイルのステータスが、「M」と表示される。M = Modified （修正しました）
・コマンドプロンプトで、状況を確認する
git status
すると、ファイル名がまた赤文字になっている。
git add index2.html
git status
すると、ファイル名が緑色になっている。
※VScodeを見ると、ExplorerではMになっていて、
Source Controlのほうではファイルの表示そのものが消えていた。
VScodeのSTAGED CHANGESというところにあるファイル名をクリックすると、ファイル内の差分が表示されている（便利！）
・コマンドプロンプトでファイルをコミットする
git commit -m "（更新理由）"
ちゃんとやったよ感のあるメッセージが表示され、
VScodeを見ると、Source Controlはすっからかんになっていた。
Explorerを見ても、ステータスが消えている。
・コマンドプロンプトでログを確認
git log
来歴の一覧が表示される。
以上。お疲れさまでした！！
※Gitコマンド早見表（講義で配布されたもの）
※git addするファイルの指定
git add ファイル名
→指定したファイルだけを追加する
git add .
→現在いるフォルダ（カレントディレクトリ）にあるファイル全てを追加する。
※VScode上で差分チェック
VScodeのSource Control画面（Gitっぽいアイコンのところ）で、差分チェックできる。
※コマンドプロンプトの文字化け対策（<E7><BF><08>…みたいなやつ）
Windowsでgit logを実行した時に、コミットで送った日本語が文字化けする場合の直し方：
（↓文字化け…こんなの読めない！！）
setx LANG ja_JP.UTF-8
↑をコピペしてコマンドプロンプト上で実行し、コマンドプロンプトを立ち上げ直したら直りました。
（↓読める）
※詳細？はこちら
https://pasomaki.com/git-mojibake/
※GitHub上でプッシュしようとしたら、fatal: remote origin already exists. と表示された場合の解決法
これが出ちゃうと、プッシュできない。
git remote rm origin
↑をコピペしてコマンドプロンプト上で実行してから、もう一度プッシュしてみてください。
※詳細はこちら
https://qiita.com/yu-ki0718/items/3c8aae2c81ca3f82f522
この記事が気に入ったらサポートをしてみませんか？