TL;DR
ブランチ名をAIでワンクリックで生成できるChrome拡張「GitLab Branch Name Generator
」作りました
https://chrome.google.com/webstore/detail/lbfkhiichdmakpghanpjjbicohannpcf?authuser=0&hl=ja
ブランチ名悩みませんか?
Issue から、MRとブランチ名作るとき、ブランチ名どうしようか悩みませんか?
- これって英語でなんて言うっけ
- この表現って合ってるのかな
- スペルミス無いかな
などなど
私は悩むんですが皆さんどうなんでしょう
そもそもブランチ名の命名規約はあるのか
調べてみると、ちゃんとした命名規約は無かったが、ケバブケースにしたほうが良さそう。
AI使えばいいじゃない
IssueのTitleをAIに渡して、良い感じのブランチ名作ってもらえばいいじゃないか
でもChatGPTにいちいちコピペして、ブランチ名に使える文字をケバブケースで作ってとか書くのも面倒
Chrome拡張にしちゃおう
GitLabからMR/ブランチを作るときはブラウザから操作するので、Chrome拡張にしちゃえば使うのが楽そう
IssueのTitleと直接紐づかないブランチもあるかもしれないので、手入力で文字列を入れてそこからブランチ名も作れると更に良さそう
CSUIでGitLabにUIを追加
MutationObserver を使ってDOMの監視を行い、対象のDOMが表示されたらCSUIで追加したUIを表示するようにした。
場合によってfeature/だったり、release/だったり分けたいと思うので、そこを選べるSelectを置いた。
この辺はオプション画面で設定できるようにした。
Issueのタイトルから自動生成するボタンと、入力したテキストから生成するボタンを設置。
ボタンをクリックすると、
良い感じの候補をつくってくれました。
AIで10個まで提案してもらうようにしました。
AIからのレスポンスは一定の形式で受け取りたいので、OpenAI APIの response_format: { "type": "json_object" } を使用してJSON形式で、指定したフォーマットで受け取れるようにしました。
Claude v3とかには無いので、JSON形式で受け取りたいときは OpenAI API重宝してます。
リストから選ぶと、ブランチ名の使用可否がチェックされます。
この辺は、inputに値をセットした後に、
const inputElement = document.querySelector('#new-branch-name') as HTMLInputElement;
if (inputElement) {
inputElement.value = branchName;
const event = new Event('keyup', { bubbles: true });
inputElement.dispatchEvent(event);
}
として keyup イベントを発火させています。
オプション画面
OpenAI API のAPI KeyやModel、プロンプトの設定に加え、feature/だったり、release/といったブランチ名のプレフィックスを定義できるようにした。
この辺は会社やチームによって文化があると思うので、並び等も設定したいかなと思い、並び替えのUIも考えたが改行区切りで書いてもらえればいいかという考えに至って簡略化。
つくってみて & 使ってみて
仕事中のふとした悩みから生まれた拡張ですが、多機能ではない拡張ですが、なかなかいいものが作れたと思います。
3~4時間で作れましたが、ChatGPT&Copilotによる恩恵がかなりデカい。すっかり依存してます・・・。
使ってみるとワンクリックで生成できるのがとにかく楽!
ブランチ名を作る数分だけかもしれないけど、個人的には結構楽になった!
使ってみてください