【ChatGPT】リファクタリング用のプロンプトをカンタンに生成するWEBツール

2023年8月20日

どうもです、タドスケです。

最近、僕のいる会社でも業務で ChatGPT を使えるようになり、自分の仕事にどう取り入れるかを検証しています。

そんな中で、「自分の書いたコードのリファクタリング案を提案してもらうのがよさそう」だと思い始めました。

しかしその際にネックの一つになるのが、「プロンプトを入力するのがめんどくさい問題」です。

毎回同じ内容ならクリップボードツールなどからコピペすればよいですが、その時々に応じて微妙に違う内容のプロンプトを作りたいときがあります。

そこで、
プロンプトの変更したい部分だけを UI で指定すると、その内容を反映したプロンプトを作ってくれるツール
を作ってみました。

シンプルな JavaScript しか使っていないので、ブラウザさえあればどこでも動きます。
会社独自の ChatGPT を使っている場合、プラグイン機能が使えなかったり、個人の API 利用が禁止されていたりするので、そういったケースでも使えるように作りました。

ツール

コードは省略せず、全文を示すこと
コードには読みやすいように、コメントをつけること
単一責任の原則にしたがうこと

使いかた

リファクタリング時に考慮してほしいポイントをチェックボックスで指定します。
「生成」ボタンを押します
プロンプトが生成され、（可能な環境なら）クリップボードにもコピーされます
ChatGPT に貼り付けて実行します
「はい、わかりました！」というような返答が返ってくるので、以降のプロンプトでコードだけを貼り付けます
最初に指定した条件で、リファクタリングを行ってくれます
同じスレッド内で使い続けるとおかしくなることがある（ChatGPT の仕様）ので、そのときは新しいスレッドでやり直してください

コード

コードは以下です。
※記事に埋め込むため、html 内に JavaScript をベタ書きしています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>リファクタリングプロンプト生成</title>
</head>
<body>
    <!-- 条件を追加したい時はここを増やしてください -->
    <label><input type="checkbox" class="option">コードは省略せず、全文を示すこと</label><br>
    <label><input type="checkbox" class="option">コードには読みやすいように、コメントをつけること</label><br>
    <label><input type="checkbox" class="option">単一責任の原則にしたがうこと</label><br>
    <br>

    <button onclick="generatePrompt()">生成</button>
    <br>

    <textarea id="promptOutput" rows="20" cols="80"></textarea>
    <script>
    // チェックボックス項目からテキストを生成する
    function getSelectedOptions() {
        var checkboxes = document.querySelectorAll('.option');
        var options = [];

        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].checked) {
                options.push('・' + checkboxes[i].parentNode.textContent.trim());
            }
        }

        return options;
    }

    // プロンプトの生成
    function generatePrompt() {
        var options = getSelectedOptions();

        var prompt = "あなたはプロの Python エンジニアです。\n"
                   + "これから私が書いたコードをリファクタリングするのを手伝ってください。\n\n"
                   + "リファクタリングの際には、以下の点に留意してください。\n\n"
                   + options.join('\n') + "\n\n"
                   + "コードはこの後渡しますので、理解できたら「はい」とだけ返答してください。";

        document.getElementById('promptOutput').value = prompt;
        navigator.clipboard.writeText(prompt);
    }
    </script>
</body>
</html>