Zenn
😫

ChatGPTに日々のめんどくさいプログラミングをやってもらおう: ChatGPTとの対話編

2023/02/16に公開
対話
プロンプト
ChatGPT
tech

日々の細々としたプログラミングがめんどくさい

業務上で急に必要になる細かいプログラミングは極めて面倒くさく、日々のモチベーションを著しく削ぐ。
「あれやりたい！」と思っても細かい所で何かしらのプログラミングが必要になり、その瞬間にやる気が無くなる。

そんな時はChatGPTくんに任せちゃおう！

ChatGPTとの対話

でもChatGPTくんにどうやってお願いすれば良いかわからない。
そんな時はとりあえず思ったことをそのままChatGPTくんに投げてみよう。

やりたいこと

まずやりたいことを文章化する。

あ〜、Excelの何十個もあるシート名をテキストの一覧にしてほしいなー。

プロンプト
Excelシートのシート名をテキストの一覧にしたい

そうすると、ChatGPTくんは良い具合に解釈しておすすめの解決策を教えてくれる。

返却
1. Excelシートを開き、シート名の一覧を作成したいブックを選択します。
2. 「Alt + F11」を押して、VBAエディタを開きます。
3. 「Insert」メニューから「Module」を選択して、新しいモジュールを追加します。
4. 以下のコードをモジュールに貼り付けます。

Sub GetSheetNames()
Dim i As Integer
For i = 1 To Sheets.Count
MsgBox Sheets(i).Name
Next i
End Sub

1. 「F5」を押して、コードを実行します。
2. シート名の一覧がポップアップウィンドウに表示されます。
3. 「Ctrl + C」を押して、一覧をコピーして、テキストファイルに貼り付けることができます。

でもなあ、VBAマクロとか興味無いんだよなあ。

もっとやりたいこと

ではもう少し踏み込んで、「やりたいこと」を「何を利用してやりたいか」までを追加で指定する。
私はフロントエンドがメインなので。

あ〜、HTML/JSでExcelの何十個もあるシート名をテキストの一覧に変換してtxtファイルで取得したいなー。

プロンプト
HTML/JSで実行してtxtファイルで取得したい。

すると、指定した条件に従ってコードを生成してくれる。

返却
HTML/JSで実行してtxtファイルにシート名の一覧を取得するには、以下の手順を行います。

1. HTMLファイルを作成します。
2. ボタンを作成し、クリックされた時にシート名の一覧を取得するための関数を呼び出すようにします。
3. JavaScriptで以下のような関数を作成します。

function getSheetNames() {
  var workbook = XLSX.readFile("ファイル名.xlsx");
  var sheetNames = workbook.SheetNames;
  var text = "";

  for (var i = 0; i < sheetNames.length; i++) {
    text += sheetNames[i] + "\n";
  }

  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', 'sheetNames.txt');
  element.style.display = 'none';
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

4. XLSXライブラリを使用するために、以下のCDNをHTMLファイルのヘッダーに追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.8/xlsx.full.min.js"></script>

5. ボタンがクリックされたときにgetSheetNames()関数を呼び出すようにします。

<button onclick="getSheetNames()">シート名の一覧を取得</button>

6. 実行すると、txtファイルがダウンロードされ、シート名の一覧が記録されます。

なるほどー、でもこれ、これ以外のコードはどう書くのかな？

わがままを聞いてもらう

いやー考えればわかるんだけど、考えればわかるんだけどね、考えれば分かるんだけど。

あ〜、HTMLとJSのコードを書き出してくれないかなー。

プロンプト
HTMLに書いた場合の全体が欲しい。
返却
以下にHTMLに書いた場合の全体のコード例を示します。この例では、"ファイル名.xlsx"という名前のExcelファイルからシート名の一覧を取得し、"シート名一覧を取得"というボタンがクリックされた時に、txtファイルに出力されます。

<!DOCTYPE html>
<html>
  <head>
    <title>Excelシート名の一覧を取得する</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.8/xlsx.full.min.js"></script>
    <script>
      function getSheetNames() {
        var workbook = XLSX.readFile("ファイル名.xlsx");
        var sheetNames = workbook.SheetNames;
        var text = "";

        for (var i = 0; i < sheetNames.length; i++) {
          text += sheetNames[i] + "\n";
        }

        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
        element.setAttribute('download', 'sheetNames.txt');
        element.style.display = 'none';
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
      }
    </script>
  </head>
  <body>
    <button onclick="getSheetNames()">シート名の一覧を取得</button>
  </body>
</html>

このコードをHTMLファイルに保存し、"ファイル名.xlsx"を適切な名前に変更して実行することで、シート名の一覧が取得できます。

おっ、ほんまか？やるやん！

エラーを問い詰める

https://jsfiddle.net/Yakinik/ouLwam6t/

ボタンを押しても何も起きない…。
動かへんやんけ！どないなっとるねん！

問い詰め: ファイルの指定

コンソールを見ると ファイル名.xlsx という謎のファイルを取得しようとしてコケている。

あ〜、Excelファイルはファイル名を指定させて欲しいなー。

プロンプト
Excelファイルは指定したファイルにしたい。
返却
Excelファイルを取得するファイルパスを指定するには、次の行を変更します。

var workbook = XLSX.readFile("ファイル名.xlsx");

この行の"ファイル名.xlsx"をExcelファイルのファイルパスに置き換えます。

たとえば、Excelファイルが"ExcelFiles"フォルダにある場合、次のように書くことができます。

var workbook = XLSX.readFile("ExcelFiles/ファイル名.xlsx");

または、絶対パスを使用することもできます。

var workbook = XLSX.readFile("C:/Users/ユーザー名/Documents/ExcelFiles/ファイル名.xlsx");

これらの例では、Excelファイルのパスとファイル名を適切に変更してください。

いや、ちがうちがう、そうじゃなくて。

問い詰め: 何を利用してファイルを指定するか

あ〜、ファイルを指定するときはフォームでファイルを選択させてほしいなー。

プロンプト
フォームでファイルを選択したい。
返却
フォームでファイルを選択し、そのファイルを使用してシート名の一覧を取得するには、以下の手順を行います。

HTMLファイルを作成します。次のようなフォームを追加します。

<form>
  <input type="file" id="fileInput">
  <button type="button" onclick="getSheetNames()">シート名の一覧を取得</button>
</form>

このフォームには、ファイルを選択するための<input type="file">タグが含まれています。

JavaScriptで以下のような関数を作成します。この関数は、フォームから選択されたファイルを取得して、シート名の一覧を取得します。

function getSheetNames() {
  var file = document.getElementById("fileInput").files[0];
  var reader = new FileReader();
  reader.onload = function (e) {
    var workbook = XLSX.read(e.target.result, { type: "binary" });
    var sheetNames = workbook.SheetNames;
    var text = "";

    for (var i = 0; i < sheetNames.length; i++) {
      text += sheetNames[i] + "\n";
    }

    var element = document.createElement('a');
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
    element.setAttribute('download', 'sheetNames.txt');
    element.style.display = 'none';
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  };
  reader.readAsBinaryString(file);
}

XLSXライブラリを使用するために、以下のCDNをHTMLファイルのヘッダーに追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.8/xlsx.full.min.js"></script>

実行すると、フォームから選択したExcelファイルからシート名の一覧が取得され、txtファイルに出力されます。
以上の手順を実行することで、フォームからファイルを選択して、そのファイルを使用してシート名の一覧を取得できます。

あ〜、どこに挿入すれば良いか考えるのもめんどくさいからコード全体がほしいなー。

プロンプト
コード全体を教えてほしい。
返却
以下に、HTMLファイル全体のコード例を示します。

<!DOCTYPE html>
<html>
  <head>
    <title>Excelファイルからシート名の一覧を取得する</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.8/xlsx.full.min.js"></script>
    <script>
      function getSheetNames() {
        var file = document.getElementById("fileInput").files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
          var workbook = XLSX.read(e.target.result, { type: "binary" });
          var sheetNames = workbook.SheetNames;
          var text = "";

          for (var i = 0; i < sheetNames.length; i++) {
            text += sheetNames[i] + "\n";
          }

          var element = document.createElement('a');
          element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
          element.setAttribute('download', 'sheetNames.txt');
          element.style.display = 'none';
          document.body.appendChild(element);
          element.click();
          document.body.removeChild(element);
        };
        reader.readAsBinaryString(file);
      }
    </script>
  </head>
  <body>
    <form>
      <input type="file" id="fileInput">
      <button type="button" onclick="getSheetNames()">シート名の一覧を取得</button>
    </form>
  </body>
</html>

このコードをHTMLファイルに保存し、ブラウザで開くと、フォームが表示されます。フォームからExcelファイルを選択し、「シート名の一覧を取得」ボタンをクリックすると、シート名の一覧がtxtファイルに出力されます。

よし、どれどれ。

完成

https://jsfiddle.net/Yakinik/kcwLzu75/

おお、やるじゃん！

でも、この何往復も発生するやりとり、めんどくさい！！！

何故こんなに複数のやりとりが発生したのか

ChatGPTくんは回答が複数パターンある場合、他の回答があることを伏せて人気のありそうな回答を選び。
選択肢が沢山あると自由に行動を選択して勝手に回答する。

今回は選択肢が無限にある状態で徐々に選択肢を絞らせていったので、完全な回答までにこれだけのやりとりが発生した。
(にんげんといっしょだね)

真・ChatGPTとの対話

ではどうすればより簡単に目当てのコードが引っ張り出せるかというと、初手から要件をきっちり伝えておくことでChatGPTくんの選択肢を制限でき、やりとりの回数を減らせる。

今回の要件をまとめると

  • Excelファイルのシート名の一覧がほしい
  • HTML/JSで実行したい
  • HTMLにJSを書いた場合の全体のコードがほしい
  • txtファイルで取得したい
  • formタグでファイルを選択したい

となる。

なので、これをそのままChatGPTくんに投げる。

プロンプト
以下の条件でExcelファイルからシート名一覧を作成したい。

- Excelファイルのシート名の一覧がほしい
- HTML/JSで実行したい
- HTMLにJSを書いた場合の全体のコードがほしい
- txtファイルで取得したい
- formタグでファイルを選択したい
返却
以下のHTML/JSコードを使用することで、指定されたExcelファイルからシート名一覧を取得し、txtファイルに出力することができます。また、formタグを使用してファイルを選択することができます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Excelシート名一覧</title>
</head>
<body>
  <form>
    <label for="excelFile">Excelファイルを選択してください:</label>
    <input type="file" id="excelFile" name="excelFile" accept=".xlsx,.xls">
    <button type="button" onclick="getSheetNames()">シート名一覧を取得</button>
  </form>
  

  <textarea id="sheetNames" rows="10" cols="50"></textarea>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.3/xlsx.full.min.js"></script>
  <script>
    function getSheetNames() {
      var input = document.getElementById('excelFile');
      var file = input.files[0];
      var reader = new FileReader();
      reader.onload = function(e) {
        var data = e.target.result;
        var workbook = XLSX.read(data, { type: 'binary' });
        var sheetNames = workbook.SheetNames;
        var sheetNamesText = sheetNames.join('\n');
        document.getElementById('sheetNames').value = sheetNamesText;
        saveToFile(sheetNamesText);
      };
      reader.readAsBinaryString(file);
    }

    function saveToFile(sheetNamesText) {
      var blob = new Blob([sheetNamesText], { type: 'text/plain' });
      var url = URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.href = url;
      a.download = 'sheetNames.txt';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    }
  </script>
</body>
</html>
このコードでは、xlsxライブラリを使用して、Excelファイルを読み込んでシート名を取得しています。取得したシート名は、テキストエリアに表示され、saveToFile関数を使用してtxtファイルに保存されます。ファイル名は、'sheetNames.txt'に設定されます。

https://jsfiddle.net/Yakinik/3fasrwdn/

先ほどと機能が微妙に違うが、要件は満たしている。
やりとりの回数を減らせたため、作業に対するモチベーションも改善する。(してほしい)

うっかりChatGPT兵衛

とはいえこれだけ指定しても一度で成功しない事もままある。
どうやら指示が多すぎると指示を取りこぼすことがあるようだ。
(にんげんといっしょだね)

HTMLファイルにJSを書くよう指定しているのにファイルを分けてしまったり。
ライブラリの読み込みを忘れたり。

想定したようなコードを引き出せなかった場合は、再度プロンプトを投げ直したり、要件を満たしていない部分を指摘する必要がある。

プロンプト
HTMLファイルにJSを書いてほしいという条件を満たしていない。
返却
申し訳ありません。以下は、HTMLファイルに直接JavaScriptを記述したものになります。

<!DOCTYPE html>
<html>
...

いや…なんか…ごめんて…。

まとめ

  • ChatGPTは制限を与えず質問をすると勝手にいろいろ解釈して自由に回答する。
  • 回答精度を上げるには要件をまとめてプロンプトに落とす必要がある。
  • 要件を増やしすぎると取りこぼすため、再生成や追加の指摘が必要になる場合がある。

ChatGPTくんに渡すプロンプトはなるべく要件を整理して誤解が無いようにしておくと、やりとりの回数が減ってお互いに気分が楽になる。

続き

GitHubで編集を提案

Discussion