ChatGPTを使用して「Web制作者の疑問に答えるWebアプリ」を作りました

ChatGPTを使用するとWeb制作で困ったときやプログラミングの勉強をしていて知らないことが出てきた時に素早く調べることができる…はずでした。

なぜ「できます」ではなく「できるはずでした」と記載しているのかと言うと、高品質な回答を得るためには質問文に毎回さまざまな定型文を記載しなければならない、回答が表示されるまでに時間がかかるなど、意外と面倒なことが多いからです。

ChatGPTで高品質な回答を得るために

たとえばWeb制作全般に関して質問するときは「あなたは世界最高のWeb制作者です。」と質問文の先頭につけると良いです。
あるいは、質問する方がプログラミングを学びたての初心者の方であれば「プログラミング初心者でも理解できるようにわかりやすく解説してください」と質問文の最後につけると良いです。

さらに重要なのが「英語で調べて日本語で回答してください」と最後に付け加えることです。
これはChatGPTの登場以前から言われていることですが、Web制作に関する文献は日本語よりも英語の方が圧倒的に多いです。

なので「英語の文献や公式ドキュメントを見るために英語を学んだ方が良い」と言われますが、ChatGPTで調べる場合は「英語で調べて日本語で回答してください」と付け加えるだけで「日本語で質問 → 英語の文献を調べる → 日本語で回答してくれる」ので、英語で検索したり英語のドキュメントを見るのが苦手な方でも情報を得やすくなります。

しかし、ChatGPTに質問するたびにこれらの文章を質問の前後に追加するのはなかなか手間がかかります。
また、無料版のChatGPT公式Webアプリは以下のような制限もあります。

• 長文をまとめて出力できず、長文や長いソースコードを出力させたい場合、何度も「続きをお願いします」と言わなければならない
• 返答が一気に表示されず、少しずつ表示されるため表示完了まで待たなければいけない
• たくさんの利用者がいてサーバーが混雑している時など、頻繁に利用できなくなる

そこでこれらの問題を解決するために、ChatGPTのAPIを使用したWebアプリを作りました。

あらかじめ質問文の先頭に「あなたは世界最高のWeb制作者です」とつけるだけではなく、必要に応じて「英語で調べて日本語で回答してください」「プログラミング初心者でもわかりやすいように丁寧に回答してください」などの言葉をチェックボックスにチェックを入れるだけで追加できます。

このWebアプリは質問を送信して数秒で返答が来ます。（回答にソースコードが含まれる場合、長文の場合、混雑している時間帯は10秒以上かかることもあります）
公式Webアプリよりもエラーが少なく、安定して利用できるはずです。

メルマガ登録でどなたも利用できます。

このWebアプリは私のスクールの卒業生の方だけではなく、メールマガジンに登録いただければどなたでも無料で利用できます。（AIへの質問は、1日20回以内でお願い致します）

メールマガジンは、スクールや動画講座のお知らせが月1回程度配信予定です。
そのほか、無料の動画講座や画像素材などの特典も不定期で配信予定です。

メール登録は以下からどうぞ。自動返信メールにWebアプリのURLを記載しております。

メールアドレス

※「Web制作者の疑問に答えるWebアプリ」を使用したい方は、必ず↑のフォームからメルマガにご登録ください。ほかのフォームからメルマガ登録した場合、WebアプリのURLが書かれた自動返信メールは送られません。

※自動返信メールが届かない場合、迷惑メールフォルダーなどをご確認ください。
※必ずPCのメールアドレスをご登録ください。ドコモやauなど携帯のメールアドレスでは自動返信メールが届かない場合があります。
※Microsoftのメールサービス（hotmail.com, outlook.comなど）は自動返信メールが届かない場合があります。別のメールアドレスをご利用ください。

利用に関するお願い

• 1日の利用回数は20回まででお願いします。同一人物と思われる方から大量に利用があった場合、利用を制限させていただく場合があります。
• 質問はWeb制作、プログラミング、デザイン、コーディング等に関連するもののみでお願いします。それ以外の質問をしたい場合は、ChatGPT公式等をご利用ください。
• ChatGPTの回答は間違っている場合があります。おかしいなと思ったら別の方法でも調べてみましょう。
• おかしいと気づけるように、書籍や スクール 等で基礎知識を身につけておきましょう。
• ChatGPTには2021年9月までの知識しかありません。それ以降のことは正しく回答することができません。
• 質問した内容とその回答は、このサーバーやOpenAIのサーバーに一定期間保存される場合があります。企業秘密やプライバシー情報は送信しないでください。
• 会話の継続には対応していません。たとえば「先ほどの返答について…」と質問しても、AIは内容を理解できません。

利用例

たとえば、以下のような質問文を送信してみてください。

• Reactとは何ですか？
• Python 3でテキストファイルに追記で保存するには
• 同じ行に「A」と「B」と「C」のすべての文字が存在する行にマッチする正規表現は？順序は問わずにマッチするようにしてください。

このような質問の場合、［英語で調べて日本語で回答］と［初心者向けに回答］の両方のチェックボックスにチェックを入れてから送信する事をお勧めします。

日本語特有の処理について質問する場合は、［英語で調べて日本語で回答］のチェックを外してから送信してください。

jQuery用に書いたコードを素のJavaScriptのコードに変換したり、その逆に素のJavaScriptのコードをjQuery用に変換したりということもできます。
［英語］と［初心者］にチェックを入れ、以下のように質問してみてください。質問の途中で改行や、半角スペースによるインデントを入れることもできます。

以下のjQueryのコードをJavaScriptとして書き直してください。

$("button").click(function(){
  $("nav").addClass("is-active");
});

そのほか、実用的な利用例に関する記事を近日公開予定です。