ChatGPT Plus に 1ヶ月だけ課金したので（？）Node.js・JavaScript のプログラムを少し書いてもらった

Last updated at 2023-03-02Posted at 2023-03-01

はじめに

ChatGPT Plus に課金して、Node.js・JavaScript のプログラム関連で使ってみた話です。課金して応答速度が変わったりするかな、とか、そのあたりが気になったのもありつつ。

課金後は、以下のツイートにあるように PLUS という表示が画面上に。

以前書いた記事

ちなみに、ChatGPT に関する話は、Qiita で以下のような内容のものを書いたことがあります（1つ目の記事は、リリースされた翌日に書いてたり）。

今回、試したかったこと

以下、試した内容について書いていきます。

なお今回は、やりとりを複数回行うものを思いつきで試していきました。冒頭に書いていた話もありつつ、まだ、自分が複数回のやりとりをする使い方をあまり行っておらず、それを試してみたくてやってみたという話になります。

試した内容 1つ目： Fetch API関連

1つ目は、ブラウザの Fetch API に関するものです。

以下は、MDN に掲載されているブラウザの Fetch API を使った実装例の 1つです。
●フェッチ API の使用 - Web API | MDN
　https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

依頼文1

この Fetch API を使った処理に関して、以下の指定をした依頼を出してみました。

async/await を使った実装
アクセスする URL は、JSONPlaceholder（Free Fake REST API）のもの

以下に、具体的な入力文と得られた結果を掲載します。

■ 入力した文章：
ブラウザのfetchを使って、https://jsonplaceholder.typicode.com/todos/1 からJSONを取得するプログラムを書いてください。async/awaitを使って

ChatGPT から得られた結果

async function fetchJson() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.error(error);
  }
}

fetchJson();

得られた結果を、Chrome の開発者コンソールで実行してみたところ、問題なく JSON の取得ができました。

プログラムを実行して得られた結果

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

依頼文2

1つ目の依頼に追加で、変更依頼を出してみました。

ChatGPT から得られた結果

(async function() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.error(error);
  }
})();

これも問題なく動作します。

依頼文3

さらにもう 1つだけ注文を出してみます。内容は「https://jsonplaceholder.typicode.com/todos/1 からのレスポンスの全てを、分割代入を使って、constで宣言した変数に格納して」というものです。

ChatGPT から得られた結果

(async function() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const {
      userId,
      id,
      title,
      completed
    } = await response.json();
    console.log(userId, id, title, completed);
  } catch (error) {
    console.error(error);
  }
})();

「https://jsonplaceholder.typicode.com/todos/1 からのレスポンス」で何が返ってくるかという情報は書いていませんでしたが、「userId, id, title, completed」の 4つに関して分割代入を行うプログラムを返してきました。
学習済みの情報の中に、この部分に関する情報が含まれていて、それを使った感じでしょうか？

試した内容 2つ目：開発者コンソールで実行できるプログラム

依頼文の　1つ目と 2つ目

次に、開発者コンソールで axios を使った処理を行う、という内容で依頼を出してみました。そして、最初の依頼に対して、そのまま実行できない内容が返ってきたので、具体的な修正依頼でなく「エラーが出る状況を単に伝えるだけ」というのもやってみました。

具体的に出した依頼内容と、そのやりとりのキャプチャを掲載します（※ 返答の、説明文は省略しています）。

エラーが出た状況を伝えると、「すみません、ブラウザの開発者コンソールではES6のimport文を使うことができません。代わりに、以下のように<script>タグを使ってaxiosを読み込む必要があります。」という返答に続けて、修正版の内容が返ってきました。

依頼文の　3つ目・4つ目とそれ以降

その後、以下の依頼内容を試してみました。

urlは https://jsonplaceholder.typicode.com/todos/1 にして、即時関数にして
axiosの読み込みも含めて
（p5.js のプログラムの中で使える形に変更する指示、複数回のやりとり）

そこで得られた結果の、3つ目・4つ目を掲載します（5つ目以降は省略）。

3つ目の返答で即時関数が使われていた部分は、4つ目ではライブラリの読み込み完了後に続く処理として書かれた形になったりしました。

お試し 3つ目： Node.js で HTTPリクエストを受けとる処理

次は、こんな内容で試してみました。ここでは、依頼文と得られた結果のプログラム部分の情報のみ羅列する感じにします。

依頼文
1. Node.jsでPOSTリクエストを受け取り、リクエストのパスを文字列として取得するプログラムを書いてください
2. リクエストはGETに変更してください
3. パラメータをログ出力する処理を加えてください。パラメータがない場合は、パラメータなし、とログに出力するようにしてください。
4. expressを使った形に変更してください