GitHubを使う方法

<h2>Githubの使い方を備忘録として（VSCode使用・インストール済）</h2>

まずはgit for Windowsをインストールする
https://gitforwindows.org/

VSCodeのファイルを開き、ユーザー設定、設定、設定の検索で"Terminal.Integrated.Default Profile: Windows"を検索。gitbashに変更
※設定を変えるとフォルダにsettingというフォルダが自動生成される

<h3>ToDoアプリを作りながら開発フローを追跡</h3>

https://github.com/

Githubにサインインして、新しいリポジトリを作成する【New】ボタンを押下

todogitapp_github-flow（仮）というフォルダ名でとりあえず作成

PCにフォルダを作ってでVSCodeを展開（同じ名前が望ましい）

先ほど作ったリポジトリを自分のフォルダにcloneする（自分のPCにアップロードする）

todogitapp_github-flowで作成した場所にURLが埋め込まれているのでターミナルを開き下記を打ち込む

※git bashでターミナルが開いていないと実行されないので注意する
※ターミナルのショートカットキーはCtr+Shift+@

```
git clone https://github.com/kohsukeve/todoapp_github-flow.git
```

ターミナルで"ls"と打ち込んで確認
※lsは list directory contents の略でディレクトリに存在するコンテンツをリスト化するという意味。（しなくても大丈夫）
```
cd todoapp_github-flow
code.
```
 で階層移動して"code."でVSCODEの立ち上げ）

<h2>コミットの仕方【git commit】</h2>

```
git commit --allow-empty -m "first commit"
```
フォルダが空でも許容するという意味の--allow-empty、
-m "first commit"、""の中にコメントを入れる

この時点ではまだコミットされていないのでリモートリポジトリは空の状態なのでPUSHする必要がある。
```
git push origin main
```
※origin mainはつけなくてもPUSHできる
originはここではtodoapp_github-flow.gitのことを指している
mainはmainブランチにプッシュされるという意味。

ウェブサイトのGithubの更新ボタンを押してPUSHされているか確認。
タブのbranchで確認できる。

<h2>次はBranchを分けて作業していく。</h2>
branchを分けて作業する理由は不当な統合を防ぐため

```
git branch
```
現在branchにはmainのみ
```
git branch todo-base
```
これでtodo-baseというbranchができる

git checkout todo-baseでbranchを切り替える

<h2>簡単なToDoアプリを作成（jQueryを使用）</h2>

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Todo app</title>
  </head>
  <body>
    <h1>@60secs.jp</h1>
    <div><a href="https://qiita.com/kohsukeve/items/a400f27cc7eacd0f0b79">Githubの使い方説明</a></div>
    <div>
      <input type="text" id="input" />
      <button id="addTodo">Todoを追加</button>
    </div>
    <div>
      <ul id="todoList"></ul>
    </div>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
      integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script src="app.js"></script>
  </body>
</html>
```
※jquery - Libraries - cdnjsで検索

todo-baseというbranchでの作業が終わったのでプッシュしていく
```
git add *
```
今いる階層のすべてのディレクトリをステージに挙げて（git add .でも対応可能）
```
git commit -m "completed base-todo"
```
```
git push origin todo-base
```
でmainと同じようにプッシュする。

<h2>ウェブサイトのレポジトリに移動</h2>
GithubにすでにPUSHされているので"new pull request"でレビューを書く。

※Files changedでチェンジした内容が見れる

問題がなければ、【Marge pull request】の下部にある【Write】でコメントを残した後、Marge pull requestで結合する

結合すると【Pull request successfully merged and closed】とメッセージがでてくる

【todo-base】のブランチはもう使わないので【Delete branch】のボタンを押して削除する

削除したのはウェブサイトのもの（リモート側）でローカルのブランチも削除する
<h2>VSCODEに戻る</h2>
todo-baseを削除するのでmainに移動。

```
git checkout main
```
削除する
```
git branch -D todo-base
```
削除するとindex.htmlにコードが無いためファイルに斜線が入る。最新の情報を引っ張ってくる
```
git pull origin main
```
この実行でリモートにある情報をローカルにPULLしてくるのでindexの斜線が消える

<h2>次のbranchを作成していく</h2>

```
git checkout  -b todo-add
```
branchを作成し、todo-addのbranchに遷移できる
※git branch todo-addとgit checkout todo-addをやるような感じ

app.jsを作成(入力したら下記にどんどん追加されていくようなプログラム)
```
$("#addTodo").click(function () {
    const inputTodo = $("input").val();
    $("#todoList").append("<li><input type='checkbox'>" + inputTodo + "</li>");
  
    $("input").val("");
  });
  
  $(document).on("change", "input[type=checkbox]", function () {
    if ($(this).is(":checked")) {
      $(this).parent().css("text-decoration", "line-through");
      $(this).parent().css("color", "#ccc");
    } else {
      $(this).parent().css("text-decoration", "none");
      $(this).parent().css("color", "#000");
    }
  });
  
```
あとは先ほど同様にCommitしていく
```
git add *
```
```
git commit -m "add function"（コメント追加）
```
```
git push origin todo-add
```
<h2>再度ウェブのGithubに移動</h2>
1 pull request確認後Compare&pullrequestでレビューを書く

2 marge pull requestで結合する
3 実装出来たらtodo-addをDelete branchする

※ローカルも破棄して最新情報に更新
```
git checkout main
git branch -D todo-add
git pull origin main
```

<h3>完成</h3>

追記

git pullしか知らなかったあの頃が懐かしい。git pull --rebaseがいいのね。