「ChatGPT」でJavaScriptブックマークレット作成–試行錯誤した適切なプロンプト記述

　この数カ月間で多くの時間を費やして、「ChatGPT」をコードの作成に活用する方法を模索してきた。今回の記事で説明するのが、そのChatGPTを使ったコード作成の手順だ。

筆者の日常業務の一部に、何とかしたいと思っていた煩わしい作業がある。米ZDNETの記事中に「Also」（関連記事）のリンクを追加する作業に、非常に手間がかかる。参考までに、「Also」のリンクとは米ZDNETの記事中にある以下のようなものだ。

Also: Okay, so ChatGPT just debugged my code. For real.

この作業に必要な一連の手順（後述）を省略したいと思っていた。ほとんどの記事で何度も繰り返してきた作業だが、面倒なだけでなく、手首への負担も大きい。

しかし、実際のコードを1行も書かずに「JavaScript」ブックマークレットを作成して、この悩みを解消することは可能だろうか。プログラマーではない人が、このような小さなプロジェクトを成し遂げることはできるだろうか。

答えは「イエス」だ。しかし、思いのほか手軽でも直観的でもないかもしれない。

この機能を作成するために実行した各手順を、ひと続きの日記風に記録した。筆者はこのようなプロジェクトに取り組むとき、少し作業を進めて、自分の考えや所見を記録した後、一度プロジェクトから離れて、考えを脳に浸透させながら、締め切りがある他の仕事に取り組むことがよくある。その後、プロジェクトを再開し、少し進めて、また少し書く。

この記録を読めば、ChatGPTのプロンプトによるプログラミングのプロセスを感じ取ることができるだろう。記事の最後で、このプロセスを通して発見した洞察を紹介する。

それでは始めよう。

記録001‐金曜日、午後2時10分

ChatGPTにコードを書いてもらうことにした。1日に何度も、毎回繰り返している作業があり、手順を省いてくれるボタンが必要だ。この問題は別の記事を書きながら考えていこうと思う。

記録002‐金曜日、午後2時45分

実際にやってみると、思っていたほど簡単ではなかった。ChatGPTに「手順を省略するボタンを作ってほしい」と指示するだけではだめだ。何をさせたいのか実際に説明できなければならない。それ自体が1つのスキルだ。

幸い、コーディングは何十年もやってきたので、仕様書の作成方法は分かっているし、自分の要望を説明する方法も心得ている。考える時間が来た。後でまた続きをする。

記録003‐金曜日、午後4時2分

まずは、自分が何を望んでいるのかを説明する必要がある。説明したら、次の段階に進んで、このプロセスを自動化するコードをChatGPTに書かせることができる。欲しいのは、「Also」リンクの作成に必要なクリック数を減らすものだ。

リンクは次のような要素で構成されている。

• 「Also: 」という文字列。コロンの後にスペースがあることに注意。
• 記事名。ハイパーリンクにする。
• 全体を太字にする。

簡単そうに思えるが、1つリンクを作成するたびに、以下の手順を踏んでいる。

1. 「Also」（関連記事）として紹介したい記事を見つける。記事は毎回異なるため、このステップは自動化しない。
2. その記事のページに移動する。これも自動化しない。だが、この後のステップはすべて自動化したい。
3. 記事のタイトルをコピーする。
4. 米ZDNETのCMSに移動して、「Also」を挿入する行をクリックする。
5. 「Also: 」という文字列を入力する。
6. 「Also: 」の後ろをクリックし、編集メニューから「Paste and Match Style」（ペーストしてスタイルを合わせる）を選択する。「Ctrl＋V」キーボードショートカットは使用できない。巨大な見出しフォントが適用されてしまうからだ。また、「Paste and Match Style」のキーボードショートカットは、同時に押す必要のあるキーが多すぎて毎回確実には実行できないため、使用できない。
7. 次に、記事に戻ってURLをコピーする。
8. 再びCMSに切り替える。
9. 先ほど貼り付けた見出しを選択する。
10. 「Ctrl＋K」ショートカット入力し、リンク挿入のダイアログを開く。
11. URLを貼り付けて、「OK」をクリックする。
12. 行全体を選択する
13. テキストを太字にする。

これは基本的に11個のステップであり、何度もマウスをクリックし、数回クリック＆ドラッグして、大量のキーを押す必要がある。これを1回のクリックと1回の貼り付けに減らしたい。

記録004‐金曜日、午後4時57分

前回の記録で間違いなく自分のプロセスを説明し、問題もいくつか説明した。しかし、新しいツールにさせたいことを具体的に書いたわけではない。ChatGPTにコードを記述させるには、何をしてほしいかを教えなければならない。もっと考える時間が必要だ。

記録005‐金曜日、午後7時12分

「Google Chrome」の拡張機能を作るのではなく、JavaScriptブックマークレットを作成することに決めた。これならブックマークバーに簡単に追加できるし、余計なインストールの手間もそれほどかからない。ブックマークバーを右クリックして、「Add page」（ページを追加）を選択し、タイトルを入力する（1）だけだ。JavaScript自体はURLフィールドに貼り付ける（2）。

この新しいブックマークレットでやりたいことの原案がこちらだ（編集部注：以下のプロンプトは、原文にある英語のプロンプトを和訳して記載しています）。

JavaScriptブックマークレットを作成したい。これを押すと、現在のページの現在のURLが取得される。ページのタイトルも取得する。また、文字列「Also: 」の後に、リンクのタイトルと取得したURLを含むリッチテキストリンクを追加し、そのリッチテキストをクリップボードにコピーする。このリッチテキストブロック全体を太字にする必要がある。

正常に機能するものをChatGPTが作ってくれたら、ボタンをクリックして、CMSに移動し、目的の場所を見つけて貼り付けるだけで済むようになるだろう。大幅に速くなる。

とはいえ、まだ何も成し遂げていない。

記録006‐土曜日、午前8時30分

私は勇敢だ。上記のプロンプトをそのままChatGPTに入力して、正常に機能するコードが返ってくるか確かめることにした。試してみる価値はあるだろう。

記録007‐土曜日、午前8時41分

やってみたが、全くうまくいかなかった。過去にクリップボードにあったものが保持されただけだ。しかし、ChatGPTの回答の中に、気になる情報があった。

これも重要なことだが、現代のブラウザー（Chromeや「Firefox」など）では、Clipboard APIの使用が推奨されているため、document.execCommand(‘copy')が廃止としてマークされている。しかし、私の知識の限界である2021年の時点では、Clipboard APIはリッチテキストをクリップボードに直接コピーする機能をサポートしていない。

つまり、ChatGPTが知っているコードは廃止された可能性があるということだ。「ChatGPT Plus」のプラグインと「WebSearchG」プラグインを使用できるか試してみよう。

それもうまくいかなかった。コードが返ってくるのではなく、「Stack Overflow」のようなサイトにリダイレクトされ、クリップボードデータの管理方法に関する記事を読むように促された。

それでは意味がない。やろうとしているのは、自分の代わりにChatGPTにプログラミングをさせることだ。ChatGPT Plusのアドオン「Code Interpreter」を試して、うまくいくか見てみよう。

記録008‐土曜日、午前9時8分

それもうまくいかなかった。ChatGPTは以下のように応答した。

残念ながら、2021年9月を最後に途切れる私の知識の範囲では、JavaScriptを使用してリッチテキストをクリップボードに直接コピーする、広くサポートされた方法はない。

またしても失敗だ。もっとコーヒーがいる。

記録009‐土曜日、午前10時27分

これについてしばらく考えてみた（そしてコーヒーを飲んでエネルギーを補給した）。おそらく、「広くサポートされた」という表現に対処する必要があるのだろう。最初の行を「JavaScriptブックマークレットを作成したい」から「ChromeでJavaScriptブックマークレットを作成したい」に変えてみる。

これでどうなるか確認してみよう。

記録010‐土曜日、午前10時33分

まただめだった。テキスト形式のHTMLが返ってきた。これではCMSに直接貼り付けられない。リッチテキストがクリップボードに返されるようにする必要がある。

記録011‐土曜日、午前11時20分

もしかすると、Code Interpreterは有効になっているが、ChatGPT Plusが使用しなかったのではないだろうか。プラグインを使用させるには、ChatGPTに明示的に使用を指示しなければならない場合がある。これを最初の行にしてみよう。

現在のブラウザーAPI呼び出しにCode Interpreterを使用してほしい。JavaScriptブックマークレットを作成したい。

よし、うまくいった。結果を見てほしい。次のような文字列がブックマークレットをシングルクリックして作成された。

Also: I used ChatGPT to write the same routine in 12 top programming languages. Here's how it did | ZDNET

記録012‐土曜日午後1時04分

これほどうまく機能するというのは、とてつもなく素晴らしい。

とはいえ、文字列の末尾の「 | ZDNET」は気に入らない。ChatGPTを説得して、削除させることができるか試してみよう。

記録013‐土曜日午後2時27分

おいしいランチだった。ここ米国の太平洋岸北西部で獲れた新鮮な天然メバルだ。地元産なので、かなり安い。レモンと「Old Bay Seasoning」を少々。脳に良い食べ物だ。では作業に戻ろう。

今、興味深い決断を迫られている。取り得る選択肢は3つだ。

1つ目は、元のプロンプトを修正して、必要な新機能を追加する。全く新しいセッションを開始する必要がある場合は、これが最良の選択肢だ。

この方法の注意点は、同じ質問をしてもChatGPTが常に同じ結果を返すとは限らないことだ。したがって、長いプロンプトを入力したとしても、正常に機能するものが返ってくる場合もあれば、部分的に機能するものが返ってくる場合もあるし、全く違う方向に進んで、ウィリアム・シェイクスピアの作品名を会話形式のクリンゴン語で教えてくれるかもしれない。

2つ目は、前に生成したコードを修正して新しい機能を追加してもらうプロンプトを作成する方法だ。前のセッションがまだアクティブなら、うまくいくだろう。

3つ目の方法は、過去に生成されたコードをChatGPTに入力して、変更するように頼むというものだ。このアプローチは気に入っているが、少し手間がかかる。

ひとまず、2つ目の方法を試してみよう。タイトルの末尾の「 | ZDNET」という文字列を削除するように説得できるか確かめてみる。試したプロンプトがこちらだ。

過去に生成したコードを変更して、タイトルの末尾に「 | ZDNET」という文字列がある場合は削除してほしい。大文字と小文字を区別しない機能にすること。

このプロンプトでスクリプトが壊れてしまった。前回うまくいかなかったときと同様に、クリップボードに入っていたものを保持するだけだった。

プロンプト全体を変更する1つ目の方法を試してみよう。メインプロンプトの最後に短いプロンプトを追加して、新しいセッションを開始し、うまくいくか確かめる。

最初の試みは失敗に終わった。だが、「Chrome向けのJavaScriptブックマークレット」を作成してほしいと伝えたところ、うまくいった。

見てほしい。AIが記述したブックマークレットによって、以下の2つのような「Also」リンクが作成された。

Also: How to use ChatGPT to write code

そして

Also: I'm using ChatGPT to help me fix code faster, but at what cost?

最終的なコード

機能面に関していえば、これでコードは完成だ。ChatGPTから最終的に以下のコードブロックが提供された。