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

今回は「「ChatGPT」でJavaScriptブックマークレット作成–試行錯誤した適切なプロンプト記述」についてご紹介します。

関連ワード （「ChatGPT」利用のヒント、特集・解説等） についても参考にしながら、ぜひ本記事について議論していってくださいね。

本記事は、ZDNet Japan様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。

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

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

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

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

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

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

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

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

　それでは始めよう。

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

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

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

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

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

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