Skip to content
secchanu edited this page Sep 5, 2023 · 5 revisions

※先に導入を読んでください

手順

開発中のGitHubおよびVS Codeで必要な操作を解説します。

実装の流れ

例:BotにAという機能を実装したい

  1. BotリポジトリのmainブランチからAブランチを分岐させます
  2. Aブランチで作業する際にはさらにA-aブランチを分岐させ作業します
  3. A-aブランチでの作業が一区切りついたらAブランチにマージ(統合)します
    マージの際はPull requestを作成し、実装した内容に誤りがないか共同開発者に確認してもらう必要があります
  4. 最後に機能Aが完成したらmainブランチにマージして実装完了となります

ブランチの作成

mainは完成したコードを置く場所にするため、機能実装用にAブランチを作成し、さらに作業用にA-aブランチを作成します。
実装作業は必ずA-aブランチで行います。

  • ソース管理→・・・(ビューとその他のアクション)→ブランチ→ブランチの作成

makebranch
※この際、左下の現在のブランチが分岐元のブランチ(今回はmain)になっていることを必ず確認してください

  • 分岐先のブランチ名(今回はA)とメッセージを入力し、ブランチの発行を押すことでGitHub上にブランチが追加されます

makebranch2


プル

自分以外の開発者が更新した内容はGitHub上のリモートブランチに保存されているため、その更新内容を自分のローカルブランチへとダウンロードする必要があります。 その作業がプルです。

※開発作業を始めるときは、必ずこの作業を最初に行ってください

  • ソース管理→・・・(ビューとその他のアクション)→プル

pull


コミット

コードを書く、新しくフォルダーやファイルを生成する、不要なファイルを削除するなどブランチを更新した際にその内容を確定させる作業です。

※コミットする前に必ずコードのフォーマットを実行しておいてください

フォーマットのコマンド

npm run format
  • ソース管理→変更をステージ→メッセージを入力→コミット

commit
※ここではまだGitHub上のリモートブランチに変更は入っていません


プッシュ

コミットした内容をGitHub上のリモートブランチにアップロードする作業です。
プッシュをしてはじめて、他の共同開発者があなたの更新した内容を確認できるようになります。

  • 変更の同期、もしくはソース管理→・・・(ビューとその他のアクション)→プッシュ

push


プルリクエスト

A-aブランチでの作業が一区切りついた際やAブランチで機能の実装が完了した際に、共同開発者に最後のチェックを行ってもらう作業です。
プルリクエストで一定数の確認が取れ次第、上位のブランチにマージできます。

※GitHub上で操作を行います

  • "Pull requests" タブの "New pull request"

pullrequest

  • baseとcompareの関係が正しい(今回はbase:A ← compare A-a)ことを確認して"Create pull request"

pullrequest2

  • 各項目を入力して"Create pull request"

pullrequest3


マージ

プルリクエストでそのブランチに誤りがないと確認が取れた際に、上位のブランチに統合する作業です。
A-aブランチをAブランチにマージする場合と、Aブランチをmainブランチにマージする場合とでは少し仕様が異なります。

※GitHub上で操作を行います

  • ""Pull requests" タブで確認したいプルリクを選択

merge

  • 内容を確認し、問題ないようならmerge

merge2

A-aブランチからAブランチへマージする際は "Squash and merge" を、
Aブランチからmainブランチへ(Aからmainへ)マージする際は "Create a merge commit" を選択してください。

詳しい説明は省略しますが、理由が気になる人は以下の記事を読んでみてください
GitHubでのWeb上からのマージの仕方3種とその使いどころ

プルリクを承認してマージした際には、何らかのコメントを残してあげてください


ブランチの削除

※GitHub上で操作を行います

マージが完了し、必要なくなったブランチは適宜削除してください。

  • 表記が"Merged"になったプルリクを選択→"Delete branch"

delete

これでGitHub上のリモートブランチは削除できましたがローカル環境にブランチが残っているので、それも削除します。

※VS Codeで操作を行います

  • 左下の現在のブランチが削除したいブランチになっていないことを確認→
    ソース管理→・・・(ビューとその他のアクション)→ブランチの削除→削除したいブランチを選択

delete2


よく使うコマンド

必要パッケージのインストール

npm install

追加パッケージのインストール

npm install "パッケージ名"

コードを変更しながら試す(開発時用)

npm run dev

NodeCGの実行

npm start

フォーマット(コードの整形)

npm run format

テスト(コードの検証)

npm test

ビルド(本番用)

npm run build

詳細 scripts | package.json

npmのコマンド一覧 CLI Commands | npm Docs

学習用リンク

参考用リンク

学習用リンク良さげなのあれば教えてください