この記事の対象者
Git や GitHub という言葉は聞いたことがあるけれど、具体的にどうやって使うのかがチンプンカンプンな初心者向けです。
そんな当たり前のことをわざわざ書いてるんじゃねえよ！ というご指摘はごもっともですが、初心者はここがわからんのです。そういう私も初心者です。
この記事では、*gitのコマンドを極力つかわず、VS CodeのGUI操作に絞って紹介 、かつ自分用の備忘録も兼ねて書いています。
もっとこうすると良いよ！というアドバイスがあればぜひコメントを寄せていただけるとありがたいです。
ここまではわかる
- 画面左下のくるくるマークを押して、GitHub上の変更を反映させる
- VS Codeでフォルダーとして開いて、コードを書いて保存したら「変更」というところに現れる
- プラスボタンを押してステージに上げる（アップロードの対象にする）
- 上の欄にどういう変更をしたのかコメントを書いてコミットボタンを押す（ローカル上で保存）
- 変更の同期をクリックしてGitHubへ反映する（内部的には Push / Pull が実行される）
GitHubはプライベートでも無料で使える
初心者はお金がかかるのが怖いのです。てっきりOSSを公開するパブリックは無料、プライベートは有料と勘違いしていたのでなかなか手が出せなかったのですが。無料で使えます！
プライベートでもパスワードとかAPIキーなどはハードコードしないように細心の注意をしましょう。
見せてはいけないキーなどはGitHub上のSecrets and Variablesという領域に記載して使うことができます。こちらの記事で軽く紹介しているので参考にしてください。
知っておきたい戻し方
コミットの取り消し
Git初心者が知っておきたいのが間違ったコミットの取り消し方。これを知っておくだけで安心です。
コミットはして同期前だけれど取り消したい場合は「前回のコミットを元に戻す」というのが「変更」の右側の三点リーダーの中にあります。
ステージングされている変更に戻りました。
変更の破棄
マイナスボタンを押してステージングから「変更」に戻します。すると「変更の破棄」というのが右クリックで選べるようになります。画面右側の「testテスト」という変更部分もないことにしたいという場合にクリックすると？
変更から消えて「テスト」の文字も消えました。やっぱり必要だったという場合には、CTRL+Z で復活するのでその状態で保存すればよいです。
変更を破棄すると元に戻せない場合があります。心配ならスタッシュしておくか、変更内容を別の場所に退避しておきましょう。
個人開発でもブランチとプルリクエストにチャレンジ
一人で開発しているならば、ずーっとmainにコミット&プッシュしていればよいのですが。
せっかくの誰にも迷惑をかけない個人レポジトリなら手を動かして理解してみましょう。
ブランチってなんですのん？
なにかの機能を追加したり、バグを修正したり。
そういう変更を行うときに、本流（main）に影響を与えずに作業するための作業用コピーです。
私みたいな初心者がずーっと引っかかっていたのは、ローカル上で枝分かれさせて、またマージさせてとかをやる必要があると思い込んでいたためです。
新機能ブランチを作ったら、GitHubにプッシュして「取り込んでおくれ！」というプルリクエストを送って、GitHub上でmainへマージされるので、そもそも個人開発で GitHub 上で Pull Request をマージするだけなら、最初のうちはローカルマージを意識しなくても十分でした。
語弊があったらすみません。もちろんローカル上でブランチ作って適切にマージしてからプルリクエストするのが正しいのかもですが、この記事は独りプルリク筋トレ用なのでご容赦ください
というわけで追加開発してみる
GitHubのREADME.md にQiitaの自身の投稿リンクを書いてくれるPythonスクリプトを先日作りました。
画面のようにタグごとに目次ができるのですが、どうせなら購読数やイイねの数も表示させたい。追加機能開発ですね。
ブランチの新規作成
画面左下の「main」というところをクリックすると、上部中央に「＋新しいブランチの作成」というコマンドが出てきます。これから追加する機能の名前をつけて作成します。
ブランチができました。さきほどの「main」のところがブランチ名になっているので、自分がどこで編集しているのかがわかります。 グラフのオレンジの雲マークよりも上に青いマークがあるので、GitHubの現在の状態よりも進んだ機能を作っているんだよということがわかります。
追加機能を編集したら、いつものようにステージに上げて、名前をつけてコミットしたのがこの状態です。
これだけは覚えておくコマンド
git status
さっきのスクリーンショット上で変更にREADME.md が残っていました。スクリプトをローカルで実行した結果で更新したので変更に載っています。
この状態で git status で状態を確かめるとこのようにになりました。
変更を元に戻してしまうなら？
私は今回こちらを選択しました。変更は破棄されてGitHubと同じ状態に戻ります。
git restore README.md
一旦保留でならスタッシュ
用語がわかりにくいですが、プッシュさせずにgitの変更検知から一旦取り除くなら変更ファイルの三点リーダーから「スタッシュ」を選ぶと、変更から消えます。
GitHubにブランチを同期してプルリクエストを出す
「変更の動機」をクリックして、ブランチごとGitHubへアップロードします。
GitHub側を開くとこんな感じにブランチ名が表示されました。
Behind と Ahead という表示が見えます。Aheadに数字が出ているので現在のGitHubのmainブランチよりも先に進んでいるという意味になります。
この変更をmain に統合してほしいので「New Pull request」をクリックします。
この変更を取り込んで頂戴！というリクエスト文を書きます。
独り開発なので、わかってるわい！なのですが、タイトルとどんな変更なのかをしっかりとコメントしておきます。レビューしてくれる人へのメッセージなので、丁寧に。
かけたら緑色のボタンを押すのですが、いくつか選択肢があるようです。
| 選択肢 | 意味 |
|---|---|
| 1. Create pull request*** | 通常はこちらです。レビュー依頼可能。マージ可能。「完成したので見てください」という状態。自分しか使わないリポジトリなら基本これ。今回のケースなら こちらを選べばOK です。 |
| 2. Create draft pull request | 下書きPRです。レビュー前の作業中扱い。マージできない。タイトルに「Draft」が付く。「まだ完成していません」の意思表示。例えば、実装途中、CI結果を待っている、設計レビューだけ先に受けたい、共同開発者に途中経過を見せたいといった場合に使います。 |
マージする
プルリクエストするとこのような画面になりました。
「Merge pull request」となっているので、この画面が表示されている立場はリクエストを受けた内容を吟味してmainにマージするかどうかの判断をするという状態です。
独り開発なので、マージをクリック！
コミットメッセージには自動入力されています。問題がなければ Confirm merge をクリックします。
無事マージに成功したようです！
ローカル側を同期させる
最後に VS Codeの画面左下のブランチをmainに戻してクルクルマークをクリックして同期させます。
グラフ画面の今回のブランチにはmainの青いマークと雲のマークが表示されているので、マージされて最新状態になったことがわかります。
マージし終わったブランチはどうするか？
これは開発チームのお作法によるらしいです。
main ブランチに取り込まれたブランチは用済みなので、ローカルで削除してもGitHub上に影響しません。
おなじく、GitHub上のブランチを削除しても、すでにその変更内容はmain の中にあるので影響しません。
最後に
今回は実際にブランチを切り、Pull Request を作成し、マージするという一連の流れを体験しながら、page_views・likes・stocks の表示機能を追加できました。
こちらのスクリプトもGitHubに公開していますので、よかったらどんな変更がされているのか、見てみてください。
