github_practice

Githubの使い方の練習memo帳（常に編集中( ´∀｀ )）

• memo : 面倒くさかったので、Gitの基本操作（VSCode上でのgit操作も含む）は全て概要で説名しています(;'∀')
• 注意：GitとGithubの練習のために作ったものなので、このコードには特に意味はなく実行してもエラーを吐くと思います

目次

1. 参考資料
2. 用語解説
3. 概要
4. 筆者の現在の環境
5. Githubの見方
6. Github上でリモートリポジトリを作成し、初めてローカルからpushする
7. タグの付け方
8. Issuesの使い方
9. Pull Requestの使い方
10. 下層フォルダの矢印問題

参考資料

ぶっちゃけこの文章を読むよりこっち見てもらった方が早い

• [Github入門]初心者向け！Githubでチーム開発するための基本操作を解説（Pythonプログラミング VTuber サプー）

自分用

• マークダウン記法1：githubのリファレンス
• マークダウンの記法 2: 参考サイト（Qiita）
• マークダウンの記法 3: 参考サイト（Qiita）
• マークダウン画像サイズ調整：参考サイト

用語解説

• ローカルリポジトリ：自分のPCで、コードが保存されている場所
• ステージ：ローカルリポジトリで変更保存（コミット）する前に一時的にファイルの変更を保存しておく場所
• ワークツリー：編集中のファイルツリー（ローカルPC上）
• コミット：コード変更保存ノード。公式リファレンスによると、変更されたコードだけを保存しているのではなく、すべてのコードをスクリーンショットしノードとして保存しているような感じ？らしい。
• リモートリポジトリ：github上のコードが保存されているURL。
• 下の図は、リモートリポジトリとローカルリポジトリの関係を示したもの。
  Githubでは、Gitで管理されているファイルをみんなで編集する。
• はじめてリモートリポジトリからローカルリポジトリにファイルをコピー(クローンする、という。)する場合はgit clone URLとコマンドを実行する。 （git cloneを行うとローカルリポジトリが作成され、Github上のリモートリポジトリと自分のパソコンのローカルリポジトリが紐づけされる。）








• ブランチ：機能別にコードを編集したりするために開発工程を分岐させることができる機能。
• remotes/develop ブランチ：製品を公開する前の開発中ブランチ
• remotes/origin/main ブランチ: 製品を公開しているリモートのメインブランチ。タグをつけてpushすると商品感が出る

概要

開発の流れ

ざっくり流れはこんな感じ（あとで図を載せる）

Git コマンド解説(ターミナルで操作)

• git add . : ワークツリーからステージへ変更を一時保存
• git commit -m コミット名 : ステージからローカルリポジトリへ変更を一時保存
• git restore ファイル名 : ワークツリーから指定したファイルの変更を取り消す。
• git restore --staged ファイル名 : ステージ上から指定したファイルの変更を取り消す。
• git branch ブランチ名 : ブランチを作成
  • git branch : ローカルリポジトリに存在するブランチをすべて表示
  • git branch -a : リモートリポジトリ、ローカルリポジトリに存在するすべてのブランチを表示
  • git checkout -b ブランチ名 : ブランチを作成してそのブランチへ切り替える
  • git checkout ブランチ名: 指定したブランチに切り替える
  • git branch -d ブランチ名　：指定したブランチを削除
• git pull : 以下で紹介するfetchとmergeを一緒に行う。コンフリクトが起きているときはエラーが出ます。
  • git fetch [<options>] [<repository> [<refspec>…]]: repositoryで指定されたリポジトリから、ブランチやタグの情報を収集する。
    ex. git fetch origin main : remote/origin/mainからブランチやタグの情報を収集。
  • git merge [<options>][<repository> branch_name ]:ブランチを統合して一つにする。
    ex. git merge origin main
git mergeして使い終わったブランチはgit branch -d "ブランチ名"で消すか、Github上のpull requestsからDelete Branchで消す。
• git push : ローカルリポジトリにあるブランチからリモートリポジトリにあるブランチへ、コードを同期する。

Github + VSCodeでGitを操作する場合

ここまで色々書いたけど、ここからは一々コマンド全部自分で実行するのはめんどくさいよ(´;ω;｀)って方向けに。

Git Graph

• VSCode上のExtentionからGit Graphをインストールすると、綺麗なブランチとコミットの履歴を見ることができる。ただし、gitの操作した結果の反映には多少時間がかかる模様。
• Git Graphは以下の場所から表示できる。
  1. 左のタスクバーからSource Controlを選択。

     

  2. 上段右から2番目の変なマークを選択。

     

  3. 
     Git Graphが表示される。

     

• 上の図のノード(点)がコミットの履歴で、縦の棒が各ブランチ。この図では分岐していたブランチがいったん黄緑のブランチ(remotes/develop)に統合され、最終的に青のブランチ(remotes/origin/main)に統合されていく様子を示している。

ターミナルでブランチを確認する方法

gitで管理されているファイル直下に移動し、ターミナルでgit branch -aと打つ。
現在位置は、先頭に※が付いている + 緑で表示される。下の図の場合はmainブランチにいることが分かる。

因みに、git branchとだけ打つとローカルリポジトリ（自分のPC）に存在しているブランチ（上の図だと、頭にremotes/originと表記されていないブランチ。）だけが表示される。

筆者の現在の環境

VSCodeで既に作成したコードが手元にある。これをgithub上に作った自分のレポジトリに載せたり、削除したりする。
gitはインストール、初期設定済み (git についてはこの動画が分かりやすい)
また、VSCode上でgithubにログイン済み。サインインしているかはVSCodeの「アカウント」で確認できる。

Githubの見方

• 左上のmainはremote/origin/mainブランチにコミットされたプログラムを表示していることを示す。
  ブランチごとに選択してコードを確認できる
• ファイル名、そのファイルが変更された最新のコミット名、コミット時刻の順番で並んでいる
• コミット名をクリックすると、コミットの変更点を確認できる。
  下の図の緑の領域(+)は、このコミットによって追加されたコードを示す。
  

  

• ファイル名をクリックし、History（右端）をクリックすると、そのファイルで行われたコミットの履歴が表示される。
  コミット名をクリックすると、上記同様にコミットの変更したコードを確認できる

他の機能

• <>Code: さっき説明した場所。ファイルやブランチ、コミット履歴が確認できる
• ☉Issues：非同期でチーム開発中に課題を見つけたら、ここに課題を書いて誰が解決するか担当を割り当てる。
  ブランチを作成してコードを編集する。
• Pull Requests: 開発したブランチをdevelopにマージする。コンフリクトが生じたらこれを解消する。
• 参考：
  pullについて1: 参考サイト
  pullについて2: 参考サイト

Github上でRemote Repositoryを作成し、初めてローカルからpushする（初回のみ）

Github上で行うこと

• Githubサイト右上の+マークからNew Repositoryを選択し、Repositoryの名前とPubric/Privateを選択してレポジトリを作成する
• アクセストークンをGithubサイト上のsetteings >> Developer Settings >> personal access tokens >> Tokens(classic)から取ってくる
  Personal Access tokens が保存されていなければ、自分で作る

自分のPCで行うこと

1. ターミナル(コマンドプロンプト)を開き、github上に載せたいファイル直下でgit initを実行する

   • git branchとターミナルで実行してローカルレポジトリのメインブランチの名前を確認する。
     • もしOn branch mainではなくOn branch masterだったら、mainにしておくとよい。（名前を統一できるから）
     • git branch -m 変更するブランチ名 変更後のブランチ名でブランチ名を変更する
       • ex. git branch -m master main

2. コミットする。
   必要に応じてgit statusで状況を確認しながら、

     git add . ：変更をステージに一時保存
     git commit -m "コミット名 "：ファイルをコミットする。ステージからローカルリポジトリに変更履歴を保存
     git log : コミットの履歴を見てちゃんとコミットできてるか確認
   

   • ちなみに、git status <<git add . <<git statusの順でコマンドを実行すると、 git add .を実行する前にはChanges not staged for commitと赤で表示されていたファイルが、実行後にはChanges to be commitedとして緑で表示されていることが分かる。これはファイルがstageに一時保存されていることを示している.

     

   git addや上書き保存で保存してしまった後に、コードを元に戻したい場合。

   • 一度git add . でワークツリーからステージに保存してしまったり、コミットしちゃったけど元に戻したいよというときはgit restoreを使用する。
   • 例：ステージに上げる前、上書き保存しただけの段階でファイルを元に戻したいとき
     1. ファイルの内容を変更して、上書き保存（Ctrl + S）。

        

     2. git statusとターミナルで打つと、上書き保存しても変更内容はまだステージには上がっていないことが分かる。

        

     3. この変更を取り消すには、git restore <ファイル名>をターミナルで実行。すると、上書き保存前に戻れます。

        

   • 例：ステージに保存後、コミットする前にファイルを元に戻したいとき
     1. ファイルの内容を変更して、git addした後git statusでステージの状態を確認すると

     2. この変更を取り消すには、一度--stagedで保存状態をstageからワークツリーに戻して、再度ワークツリーでの変更を消す

        

3. ローカルPCとリモートURLの紐づけを行う

   • git remote add リモートリポジトリURL : リモートリポジトリとローカルリポジトリを紐づける!
   • 以下の例は、このリポジトリの場合。

     ex1. git remote add origin https:<user_name>:<Personal Access Token>@github.com/mickylan2367/github_practice.git (パーソナルアクセストークンを使用する場合)
     ex2. git remote add origin https://github.com/mickylan2367/github_practice.git （パーソナルアクセストークンを使用しない場合--こっちの方が簡単）
     

   • Personal Access Token：Githubから取ったAccess tokenを入力する
   • user_name: 自分のアカウント名

4. フェッチとマージを行う。

   • git fetchでリモートリポジトリの情報を取り込む
   • git merge --allow-unrelated-histories origin/mainを実行して、関連付けられていないブランチ同士をマージする。

5. プッシュする。

   • git push origin mainなど。

ここで発生したエラーが3個

エラー1個目

  fatal: Could not read from remote repository. 
  Please make sure you have the correct access rights and the repository exists.

• 対処：とりあえずアクセストークンを使用しないURLにリモートリポジトリを設定した
• 参考：サイト

エラー2個目

  ! [rejected]        main -> main (fetch first)
  error: failed to push some refs to 'https://github.com/mickylan2367/github_practice.git'
  hint: Updates were rejected because the remote contains work that you do
  hint: not have locally. This is usually caused by another repository pushin
  hint: to the same ref. You may want to first integrate the remote changed
  hint: (e.g., 'git pull ...') before pushing again.
  hint: See the 'Note about fast-forwards' in 'git push --help' for details.

• 内容：Readmeを編集しながらpushしてしまったので、「Readmeを編集中ですよね？そのファイルはローカルのmainブランチにないのでプッシュできないよ」と叱られた。
• 対処：Readmeの編集をいったん中止して、git pull origin mainと打ってみた
• 結果：そしたら、下のエラーメッセージが出てきた

エラー3個目

  fatal: refusing to merge unrelated histories

• 内容：関連付けられていないブランチにはマージできない
• 対処：git fetchのあと、git merge --allow-unrelated-histories origin/mainを実行。git pull(= fetch + merge)の二つの機能のうち、mergeのみ再度実行。
• 参考：サイト

4. git push -u リポジトリ名 ローカルブランチ名：リモートブランチ名：リモートのブランチにローカルブランチをアップロード
   ex. git push -u origin main:main
   ＊ 1でブランチ名を変更していない場合、ローカルブランチ名がmasterの場合もあるので注意
   ＊ローカルブランチ名とリモートブランチ名が同じ場合は、どちらか一方のみ書けばいい。
   ex. git push -u origin main
   参考：Github公式リファレンスはこちら

Tagの付け方(製品のバージョン管理みたいなことができるよ!)

• git tag -a タグ変数 -m 'タグの名称' : タグに名前を付ける（ex. git tag -a v1.0 -m 'v1.0.0'）
• git push origin タグ変数: タグをプッシュ（ex. git push origin v1.0 ）
• タグのネーミングはセマンティックなんちゃらを参照するといいらしい？

参考：

• gitの 公式リファレンス
• Qiitaを参照

Issuesの使い方

• ここでは、Issueを立ててブランチの作成し、VScode上で編集したファイルをコミットしてリモートリポジトリの同じ名前のブランチへpushするところまでを行う。
• Issuesは非同期でみんなが編集しているとき、課題の割り当て、ブランチの作成を行う。

1. Issues >> New Issues(黄緑のボタン) を選択

2. Issuesのタイトルと内容詳細を書いてSubmit new issueを選択

3. 同ページ右のAssigneesでこのIssueを解決する人を割り当てる。（ここでは、とりあえずassign youselfを選択している）

4. Assigneesと同じ列下にあるDevelopmentからCreate a branchを選択

5. ブランチ名を編集してCreate Branchを選択

6. 下のようなポップアップ画面が出てくるので、コードをコピーします。

7. VSCodeに戻りターミナルを開き、先ほどコピーしたコードを実行

8. ブランチ上でファイルを編集、Ctrl + Sで上書き保存します

注意：次の手順は10（ターミナルでコマンドを直接打つ）か11（VSCodeの機能を使用）のどちらかを選択してねb

9. （10を行う場合は不要）ターミナル上でコマンドを打ってコミットする場合は、以下のように実行します

コミットメッセージの名前の付け方はルールがあると便利。参考サイト

10. （9を行った場合は不要）VSCode上のSource Controlを開き、Changesと書かれた場所のファイル名の横の+を選択する。

• 変更ファイルをgit addする。ぶっちゃけこの手順は省いても（後で下のような警告は出てくるけど）OK
  下の警告文の意味：「addせずにコミットしようとしているけど、変更ファイル全部ステージに上げて(git add .することと同じ。)からコミットしちゃってOKですか？」

  

• その後、コミットメッセージ(ここでは「Add : 花を追加」としている。)を記入して☑Commitを選択。
  コミットメッセージの付け方に注意しよう（詳しくは10の参考サイトをチェック）

  

• コミットメッセージを記入せずに☑Commitボタンを押してしまうと、以下のようなファイルが開いてコミットできない。
  この場合はコミットメッセージを記入してからもう一度コミットボタンを押す。

  

11. (10の続き。10を行った人は飛ばしてください) コミットが行われると下のような画面に代わるので、Sync Changesを選択する。

• ポップアップ画面で表示されるOKボタンを押すと、ローカルリポジトリで編集中のブランチから、リモートブランチにある同じ名前のブランチにプッシュされます。

Pull Requestの使い方

• 前章ではIssueの使い方についてみてきけど、今度はその続きとしてPull Requestsの使い方を説明する。
• 基本的にPull Requestは航海されているプログラムでバグを発見した際、他の人が修正したコードをremote/origin/mainやremote/origin/developにマージする前に正常に動くコードしてマージできるかを確認するための機能。
• pythonのライブラリのコードも公開されていて、バグを見つけたらユーザがIssue/Pull Requestsを通してプログラムのバグを報告・修正・加筆することができる。

12. Githubに戻ってpull request上を確認すると、マージされたブランチごとにポップアップが表示されている。

Compare & pull requestを選択する。

13. マージ先のブランチ(base:)とマージするブランチ(compare:)を選択する。

• マージできる場合はブランチ選択場所の右にAble to mergeを緑で表示される。
  Merge pull requestを選択。

  

• マージできない場合は同じ場所にCan't automecally merge.と赤で表示される。
  このように表示された場合は上記同様Merge pull requestを選択した後、手順18へ飛んでください。

  

14. マージできる場合は適宜コミット名を編集し、Confirm mergeを選択

15. 必要なくなったブランチは削除するため、Delete Branchを選択する。

• ここの段階でDelete Branchを選択しても、VSCode上でgit branch -aで確認すると削除したはずのブランチが表示される場合。

  

  • ブランチの最新情報はgit pullしても更新されないので、git fetch -pとコマンドを打ってブランチ情報を最新に保つ必要があります。
  • ローカルリポジトリに残っているブランチはVSCodeのターミナルでgit branch -d ブランチ名と打って直接消しましょう。

  

  1. git pullでファイルを最新にします
  2. git fetch -pをVSCodeのターミナルで実行します。

  

  3. すると、Github上で削除したブランチがローカルリポジトリ上でも削除されていることが分かる。

  

16. 解決し終わったIssuesは閉じておく。(Issuesに戻ってclose issuesを選択)

とりあえずこれで一通り編集修了！お疲れ様です。

17. 手順14でマージできないと表示された場合、コンフリクトを解消する必要があります。下の画面からweb editorを選択

18. どこでコンフリクトが起きているかを表示してくれるので、コードを修正

19. 編集し終わったらMarked as resolvedを選択。編集結果がマージできそうなら下の画面のように、Commit mergeと表示されるのでこれを選択

20. コンフリクトが解消できて下の画面のようにMerge Pull Requestが表示されたら、手順15-18へ戻ります。

下層フォルダの矢印問題

• 次のように、紐づけたはずのローカルリポジトリの下のフォルダの中にあるファイルが、pushしてもgithubにアップロードされない問題が発生することがある.
• ファイル名の前が⇒になっていて、クリックしても中身が出てこないのだ(;´･ω･)

この場合、

git ls-files

でgitで管理されているフォルダを確認すると、フォルダ下のファイルが管理されていないことが分かるはず。

$ git rm -rf --cached <対象ファイル or path>
$ git add <対象ファイル or path>
 // <対象ファイル or path>部分は、$git ls-files した時に表示されている部分。
 // --cachedオプションを付けることにより、ファイルを残したまま管理対象から外すことができる。

今回の場合は、

git rm -rf --chached chaos
git add chaos/chaos.pde

を実行する。git logでファイルがトラッキングされていることを確認してから、

git add -A
git commit -m commit_name

ですべてのファイルをadd、commitする。この状態でpull & pushすればうまくいくかも！

• 参考サイト："githubでフォルダに矢印が！やっと解決した話"
• 疑問：別のリポジトリと関連付けたい場合ってどうすればいいんだろう?