見出し画像

Git + VScode + GitHub 覚え書き

今日、オンラインのプログラミングスクールでgit, Visual Studio Code, git hubの連携を習いました。

来週から卒業制作に入る予定。オンラインスクールでチームを組むのだからファイル共有は絶対必須のスキルでしょう。しかし…どうにもコマンドが覚えにくい気がしたのでメモしておきます。


※Windowsの場合です(OSによって結構違うっぽい)

※間違い見つけたらご指摘いただけると励みになります!

※プログラミングスクール…https://sunabaco.com/

※6年くらい前の仕事で(全然プログラミングとは関係のない)、大量の業務ファイルを管理するために試行錯誤していた時、たまたまコマンドプロンプトの存在を知り、使えそうなコマンドを検索して個人用チートシートを作っていました。当時、コマンドラインやGitの存在を知っていたら、もっとラクに仕事できたのに…と、今日の講義を受けながら歯ぎしりしていました。フフフッ


【環境設定】

1.Gitをインストール

・書かれている通りにやればOK

gitのインストール元

画像5


・Windowsでインストールするときの注意点


Adjusting your path environment (パス環境の調整)のところで、真ん中の項目になっているのが大事。(Use Git from the windows command prompt = コマンドプロンプトでgitを使うよ)

画像1


・インストールできたら、コマンドプロンプト

git -- version

を実行。

コマンドプロンプト上で「git version 2.26.2.windows」のように表示されればOK。

画像5

2.名前とメールアドレスを登録

コマンドプロンプトで、以下を実行する

git config --global user.name "xxx"

git config --global user.email "xxx"

(xxxにはそれぞれ名前やメールアドレスを半角英数で入力。後から変えられるのでひとまず入れておく)


・登録がうまくできたか確認したいときは、同じくコマンドプロンプトで

git config --list

で、ズラズラっと出てきた一覧の中に載っているはず。(表示が1ページを超える場合、↓ボタンを押してドンドン表示させていこう)


【ここから作業】

3.自分のローカルリポジトリを作る

・ローカルリポジトリを作る(自分用のファイル保管場所、みたいなイメージ)

パソコン上に、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。


【ここからファイル共有】

4.ファイルを用意する

VScode上で、管理したいファイルを作成する

※今回は復習用なので、index2.html を新しく作りました。


VScode上で新規作成したファイルを見ると、ステータスが「U」と表示される。U = Untracked (追跡対象外)

画像4


・状況を確認する

コマンドプロンプトで、

git status

(status = 状況)


すると、作ったファイル名(index2.html)が赤色で表示される。

(赤色=まだgitの管理対象になってませんよ)

画像5


5.ファイルを追加する(ステージング)

コマンドプロンプトで、

git add index2.html

(ファイルをgitのバージョン管理にadd=追加しますね!)

git status


すると、作ったファイル名(index2.html)が緑色で表示される。

(緑色=gitの管理対象になりました!)

画像6


VScode上では、このファイルのステータスが、「A」と表示される。A = Added(追加済み)

画像8


6.追加したファイルをコミットする

※「コミット」は、処理を確定する的な意味。前の項で追加したファイルの処理はまだ終わっておらず、以下のコミットという処理をすることで完了する。


コマンドプロンプトで、ファイルの変更理由を追記する。

git commit -m "変更理由をここに書く!!"

追記した変更理由が表示される。

画像8


※絶対に「理由」を書いておくこと!後で見返した時にどのバージョンが何の変更だったかわかるように。


7.履歴を確認

コマンドプロンプトで、

git log

すると、commitした番号らしきものと、自分が残したメッセージが表示される。

画像9


VScodeを見ると、ファイルに付いていたステータスは消えている。

画像10


8.GitHubと連携

GitHubのサイトで、自分のアカウント作成(すでにアカウントある人はスルーで)

※にゃんこが可愛い

画像11


GitHubのサイト上で、New repositoryを選択

画像12


・必要事項を入力&選択

画像13


Repository name →とりあえずわかりやすい名前に

Public / Private →Privateを選択する(Publicにすると自分のコードが全世界公開になる)

・「Initialize this repository with a README」 →チェックしない。(既にコマンドプロンプトの操作でinitializeは済んでいる為)

※initializeについてはこちら
https://wa3.i-3-i.info/word16120.html


・上手くいけば、GitHub上にいろいろ表示される。この画面はまだ使うので開いておく。

画像14


9.ファイルをアップロードする(プッシュする)

GitHubに表示されているコマンドを使って、ファイルをプッシュする。

ひとつ前と同じ、この画面を使う。

画像14

・ファイルを紐づけする

赤枠の「…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のページがこのように変わる。

画像15

(他のファイルは、講義中にプッシュしたファイル)


10.ファイルを修正

Gitにプッシュしたファイルを修正したいとき


VScode上で、ファイルの中身を書き換える

ファイルのステータスが、「M」と表示される。M = Modified (修正しました)

画像20


コマンドプロンプトで、状況を確認する

git status

すると、ファイル名がまた赤文字になっている。

画像21


git add index2.html

git status

すると、ファイル名が緑色になっている。

画像22


VScodeを見ると、ExplorerではMになっていて、

画像24

 Source Controlのほうではファイルの表示そのものが消えていた。

画像25


 VScodeSTAGED CHANGESというところにあるファイル名をクリックすると、ファイル内の差分が表示されている(便利!)

画像25


コマンドプロンプトでファイルをコミットする

git commit -m "(更新理由)"


ちゃんとやったよ感のあるメッセージが表示され、

画像27


VScodeを見ると、Source Controlはすっからかんになっていた。

画像26


 Explorerを見ても、ステータスが消えている。

画像28


コマンドプロンプトでログを確認

git log

来歴の一覧が表示される。

画像29



以上。お疲れさまでした!!


※Gitコマンド早見表(講義で配布されたもの)


※git addするファイルの指定

git add ファイル名

→指定したファイルだけを追加する

git add .

→現在いるフォルダ(カレントディレクトリ)にあるファイル全てを追加する。

※VScode上で差分チェック

VScodeのSource Control画面(Gitっぽいアイコンのところ)で、差分チェックできる。


※コマンドプロンプトの文字化け対策(<E7><BF><08>…みたいなやつ)

Windowsでgit logを実行した時に、コミットで送った日本語が文字化けする場合の直し方:

(↓文字化け…こんなの読めない!!)

画像18


setx LANG ja_JP.UTF-8

↑をコピペしてコマンドプロンプト上で実行し、コマンドプロンプトを立ち上げ直したら直りました。

(↓読める)

画像19


※詳細?はこちら
https://pasomaki.com/git-mojibake/


※GitHub上でプッシュしようとしたら、fatal: remote origin already exists. と表示された場合の解決法

これが出ちゃうと、プッシュできない。

画像20


git remote rm origin

↑をコピペしてコマンドプロンプト上で実行してから、もう一度プッシュしてみてください。

※詳細はこちら
https://qiita.com/yu-ki0718/items/3c8aae2c81ca3f82f522





この記事が参加している募集

いま私にできること

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

ここまで読んでいただき、ありがとうございます!さらにはサポートをご検討いただけるなんて感激です!いただいたサポートは、なんらかの形で恩送りさせていただきます。

ありがとうございます!
23
日々取り組んでいることや、私の周りにいるすてきな人達のことを紹介していきます。

こちらでもピックアップされています

プログラミング関連
プログラミング関連
  • 11本

プログラミングとかその界隈

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。