ChatGPTを活用してみたら思ったより和解できた話。

こんすが、夏加よすがです。

最近、このサイトを久々に掘り返してきて外観を改造しまくって改善して、サイト自体をいじくり回すのに早くも飽きてきたのでツールを作ろう！となりました。

もう既にご存じの人も多いかと思いますが、「Vtuber雑談お題ガチャ」「メトロノームメーカー」「ルーレットシステム」これらが出来上がったページです。

これらのプログラム、プログラミング素人のわたしが完全にいちから組み上げたわけではなく、ChatGPTくんとあれこれ協議した結果できています。

これからWEBツールだったり簡単なシステムを組もうと思ってるプログラミング初心者さん向けに、どんな風に作ったかを備忘録しておきます。

と言っても、基本的なHTMLやCSSの知識程度は必要です、ファイルの位置関係とかプログラムの{}は閉じないといけないとか、全角スペースを使わないとか……。

よすがさんもその程度の知識はある、という前提で読み進めて下さい。

使用したもの

今回はWordpress上で動作するものを作りたかったので「ChatGPT」とテキストエディタ、あとはFTPツール(ファイルをHPのあるサーバーにアップロードするもの)、あとローカル環境で立ち上げたテスト環境用のWordpressです。

テキストエディタは「Sublime Text」を使っています、Atomが開発終了した今はその代用として愛用しています。

どんなものを作りたいか考える

ChatGPTくんにコードを組んでもらうにせよ、まずはどんな用途のためのどんなツールを作りたいかの構想を立てないといけません。

なので、まず最初にChatGPTくんに投げる文面を考えましょう。

今回は「Vtuber雑談お題ガチャ」を作る際にChatGPTくんに投げるために考えた項目を軽く載せます。

• 以下の要件を満たすアプリを開発するためのタスクを考えてほしいこと。
• ブラウザ上（WordPress上）で動作するJavaScriptを使用したアプリ。
• Javascriptのコードは「/js/xxx.js」に、CSSのコードは「/css/xxx.css」に格納する。
• 「お題ガチャを回す」ボタンを押すと、予め設定した項目リストから一つを選んで画面に表示する。
• 同じ項目が直近10個以内に選ばれないようにする。
• 項目リストは別ファイルとして管理したいので適切なファイル形式を考えてほしいこと。
• 各項目にはカテゴリー設定をできるようにする。
• WordPressの管理画面に「雑談お題ガチャ」の項目を追加し、項目リストを「項目」「カテゴリー」を明記して一覧として管理・編集できるようにする。

などなど……こんだけの作業を一度に投げて大丈夫かな？と思いながらテキストをAIにもわかりやすい文言にして投下。

以下、ChatGPTくんから返ってきた文章の一部です。

この要件を満たすためのサブタスクを以下のように分解できます。

1. 項目リストとカテゴリーの管理

• 1.1 項目リストを保存するファイル形式を決定する（例：JSONファイルを想定）。
• 1.2 項目リスト（項目名とカテゴリー名）のJSONファイルを作成し、/data/talk_theme.json などに格納する。

2. JavaScriptの開発 (/js/talktheme.js)

• 2.1 talktheme.js ファイルを作成する。
• 2.2 JSONファイルから項目リストを読み込むための非同期関数を作成する。
• 2.3 「お題ガチャを回す」ボタンがクリックされたときにランダムに項目を選択する関数を作成する。
  • 2.3.1 選択済みの項目リストを管理し、直近10個以内に選ばれた項目が再選択されないようにロジックを構築する。
• 2.4 選択された項目とそのカテゴリーをHTML上に表示する関数を作成する。

3. CSSの開発 (/css/talktheme.css)

• 3.1 talktheme.css ファイルを作成し、画面デザインを定義する。
• 3.2 お題表示領域やボタンのスタイルを設定する。

4. WordPress管理画面の拡張

• 4.1 function.php 内に「雑談お題ガチャ」のカスタムメニューを追加し、項目リストの編集画面を作成する。
  • 4.1.1 WordPressの管理画面にカスタムページを追加し、JSONファイルの項目リストを読み込み表示する。
  • 4.1.2 項目とカテゴリーを編集・保存できるようにする（ファイルへの書き込み機能を実装）。
• 4.2 項目リストが更新された場合、JavaScriptで利用するJSONデータも更新されるように調整する。

おお、素人でもめっちゃわかりやすーい。

ガチャ素材の項目リストはjsonで保存するのがいいとまで提案してくれました。

具体例を出してもらう

具体例を出してもらうもといコードを書いてもらうため、ChatGPTくんに以下のように返事を投げます。

「1. 項目リストとカテゴリーの管理について具体例を教えて下さい」

すぐにChatGPTくんがせっせとお返事を書いてくれます。

項目リストとカテゴリーの管理の具体例として、以下のようなJSONファイルの形式を考えます。これは「お題」と「カテゴリー」の情報をJSON構造で定義したもので、JavaScriptから簡単に読み込んで利用できます。

JSONファイルの例 (talk_theme.json)

※JSONファイルのコードは省略

各フィールドの意味

• id: 各項目に一意のIDを付けて識別しやすくする（IDが不要な場合は省略可能）。
• theme: 表示されるお題のテキスト（ユーザーが実際に見る内容）。
• category: お題が属するカテゴリー（「趣味」「旅行」「自己紹介」など）。カテゴリごとにフィルタリングや、分類して表示することができます。

JSONファイルの管理と編集

このJSONファイルはWordPress管理画面で編集可能にする予定です。管理画面で新しいお題を追加したり、既存のお題の編集・削除ができるようにすることで、ファイルを直接編集する手間を省く設計にします。

JSONファイルの読み込み例（JavaScript）

JavaScriptを用いて、このJSONファイルを非同期で読み込む方法です。次のようなコードで、fetch を使ってJSONファイルを取得できます。

※JavaScriptファイルのコードは省略

JSON管理の利点

• 外部ファイル管理: お題とカテゴリーが外部ファイルで管理されるため、アプリのロジックやUIコードに変更が必要ないまま、内容を簡単に更新できます。
• 拡張性: 新しいお題やカテゴリーを追加しても、ファイル内の構造を維持するだけで追加が可能です。

ご丁寧に解説まで書いてくれる……！

ちなみにプログラミング素人でもここで解説してくれてる内容は一通り目を通しておいた方がいいです。

たまーに余計なことしてたり、意図せぬ挙動になってたりするためです。

また、ファイル名などを任意の名前にしたい時は、例えば「talk_theme.jsonの名前はtalktheme.jsonにして下さい」と送ると該当のファイル名の記述を全て書き直して再度提示してくれたりもします、超便利。

ファイルの中身がある程度問題なさそうだと判断出来たら、2番以降の手順も順番に具体例を出してもらっていきます。

プログラムの試運転

最後の手順まで具体例を出してもらえたら、ここまでの具体例として挙げてくれたコードをファイルにして保存し、ローカル環境のWordpress上で動作確認を行います。

この時、スクリプトがファイルを呼び出す時のパスだったりファイル名だったりがきちんと合っているか程度の目は通します。

わたしはツール系のCSSはcssフォルダに、JavaScriptはjsフォルダに入れるようにしているので、その当たりは手動で手直しするかChatGPTくんに指示して入れ替えてもらったりなどします。

わざわざChatGPTくんに手直しさせる理由についてですが、ChatGPTくんはその会話中は大体直前までの会話内容をしっかり引き継いで応答・コードの改変をしてくれるので、ChatGPTくんに手直しさせることによってChatGPTくんが認識しているコード内容を更新するためでもあります。

まあ、自分で手直しした場合はその場合で、「以下のコードの〇〇を書き加えて下さい　function xxx～」といったように要望とコードを一緒に送れば対応してくれるので、どっちでも大丈夫そうでした。

ローカルWordpress上で動作確認してみて、上手く動作しない部分があればデバッグツール等を使用してエラー内容を読み取り、「〇〇が××のように動作していません、xxxxというエラーが出ています」と一つずつ修正点を送れば逐一修正したコードを返してくれます。

これをひたすら繰り返して、思う動作になるまでテストしていきます。

途中で仕様変更も可能

思う動作になったら、もしくは途中で思う動作にならないことが続くなどして難しく思ったら、仕様変更も可能です。

やっぱりここはスライダー設定ではなくプルダウンリストで指定したい、追加で〇〇を表示する機能を追加したい、などなど機能を追加したくなったら丁寧な説明文章にして要望を出します。

ただし、仕様変更をしているうちにChatGPTくんが勝手に要素のIDやタグを変更し始める時があるので注意です。

書き直されたコードをすぐ上書きコピペしてしまう前に、要素のIDやクラスが変わってないかなどを確認します。

また、ChatGPTくんはJavaScriptのファイル内容のコード全部を提示してきたかと思えば、途中からコードの一部分だけ提示し始めることもあるので、うっかり全選択からコピペをして必要なコードが消えてしまうような事故が無いように留意します。

JavaScriptファイルの中に複数の関数(function)等がある場合に、2つ目だけを書き換えれば事が済む場合などにChatGPTくんは1つ目と3つ目を省略してコードを渡してくることがあるためです。

また、これもたまにあることですが、長文のコードになった場合に一部コードのまとまりに関して省略してくることもあります(この時は「// 編集または追加の処理（省略した部分は前述のコードと同じ）」など省略したことを書いてくれたりもします)。

コードの書き直しをコピペする時は必ず、ペースト前のコードと少しでも見比べてどこが変わっているのかくらいは確認しましょう。

仕様変更をキャンセルしたくなったら

要望を一つ出して返ってきた答えが気に入らない時は「やっぱり今のはやめます」と言えば取り下げてくれます。

要望を何度も重ねた後にやっぱり元の仕様に戻そうという時は、「〇〇の動作についてやめます」と伝えてみるか、チャットを遡って元の仕様のコードをコピペして「やっぱりこっちのコードで進めます」とでも伝えれば元の仕様の状態から再度会話をスタートできます。

いろいろ仕様を多く盛りすぎたり、仕様変更を重ねすぎてコードがわけわからなくなったら一部仕様を取り下げたり、「これまでのコードを全て整理して提示して下さい」と言えば全てのコードを羅列してくれたりします。

プログラムが一通り思うものになったら

ローカル環境下で動作確認がしっかりできたら、FTPソフトを使ってレンタルサーバー上のWordpress等に各ファイルをアップロードします。

この時、ローカル環境下とはフォルダ構造が異なったりする場合はファイルのパスをしっかり手直ししておきます。

オンライン上でも同様の動作が確認できたらよし、動作が思うようにならない場合はデバッグツールでエラー内容を見つけてまたChatGPTくんに投げては直します。

ここ数日で、ChatGPTくんの扱い方がだいぶ分かってきたので、備忘録としてまとめました。

個人的にめちゃくちゃ助かるのは、コードを書く度にどういう意図でこれを指定してるかを解説してくれること。

一般的な簡単なプログラム紹介ブログだと、コードと挙動だけ書いて「これで動くよ！」で終わりなことも多く、自分なりの組み換えだったり改造だったりが出来ず(なんせJavaScriptとPHPは専門外なため)応用もできない……という有様だったため、この記述によって何を指定して何を想定しているかを自分のためだけに説明してくれるのは大変ありがたいです。

慣れてくると段々今扱っている関数が何をするためのものなのか分かるようにもなってきて、ChatGPTくんに「提示してくれたここの記述、一つ抜けてないか確認してもらますか？」とこちらから穴を見つけて提案出来たりして、正直めちゃくちゃ楽しいです。

ChatGPTくんとの対話に夢中になりすぎて友達に心配されてるレベルです。

以前、「夏加よすがはどんなVtuberですか」と質問した時は抽象的でありきたりな返答が返ってきたのであまりアテにはならんかぁ、と思っていたのですが、こういう論理的で定義や用法がしっかりと存在するものに対しては強いんでしょうね。

ということで、個人的な趣味の範囲でならめちゃくちゃ有能なので、手元でこういうちょっとした動作をさせたいんだけど……というような場合に活用していきたいです。

ここまで読んでくれたら「いいね」やSNS共有してね！