ChatGPT, Bing AI, BardはWeb制作者を助けてくれるAIとなるか？

ChatGPT, Bing AI, Bardは大規模言語モデルと呼ばれ、一般的には「チャットAI」や「会話AI」などと呼ばれます。
これらは様々な調べごとや、ちょっとした作業をするのにも適してるということは既にご存じだと思います。

Web制作者はもちろん、Web制作やプログラミングなどを勉強中の方も、ChatGPTなどの大規模言語モデルを使いこなすことで学習や仕事をスムーズに進めたり、あるいは手助けになりそうな予感がしたので、色々と試してみました。

これはAIをイメージしたAI生成画像です。この記事からメルマガ登録 すると、このような画像素材をプレゼントします。

今回試した大規模言語モデル

ChatGPT(3.5 turbo): 無料で利用できるChatGPTの基本モデルです。2021年9月までの情報をもとに学習しています。
GPT-4: ChatGPT Plusに加入し、月額20ドル支払うと利用できるモデルです。
Bing AI: GPT-4ベースで、Bing検索して回答する場合があります。無料で利用できますが、Edge、Skype等のアプリのインストールが必要です。
Bard: Googleが独自に開発している大規模言語モデルです。数時間前までに起きた出来事など、ほぼ最新のできごとにも回答できます。

この記事では、特に注意書きがない場合、最初にChatGPT(gpt-3.5-turbo)の回答を表記し、その下の「他の大規模言語モデルでは？」というコラムでそれ以外の大規模言語モデルの回答を示しています。

今回試したこと

• 正規表現
• jQueryとJavaScriptのコードを変換
• 他の方が書いたプログラムを解説してもらう
• WordPress開発
• 文章を考える
• 長い文章を要約する
• 翻訳でシチュエーションを指定する
• 面倒なお断りメールの返信を考えてもらう

正規表現

正規表現とは？

正規表現は、文字列を検索・置換するための特殊な記述法です。
例えば、「abc」という文字列を検索する場合、正規表現で表現すると「a.b.c」となります。この「.」は任意の1文字を表す記号です。

他にも、「*」は0回以上の繰り返し、「+」は1回以上の繰り返し、「[]」は括弧内のいずれかの文字にマッチする、といった表現が可能です。
正規表現は複雑なため、覚えるのが大変ですが、多くのテキストエディタやプログラミング言語などで利用されているため、覚えておくと非常に便利です。
例えば、複数のファイルから特定の文字列を検索する場合、正規表現を利用することで簡単に検索できます。

正規表現はプログラマーにとって欠かせない知識ですが、少し勉強することで、誰でも利用できる便利なツールとなります。

正規表現は慣れればとても便利なものですが、プログラミングの勉強を始めたばかりの方にとっては「正規表現でこういうことをしたい」と思っても、どのように書けばよいのかわからず、困ってしまうこともあると思います。

そのような時にGoogle検索で「やりたいことの内容　正規表現」などのキーワードで検索しても、やりたいことそのものができる正規表現が解説されたページが出てくることは稀です。

しかしChatGPTであれば、やりたいことそのものを教えてくれる場合があります。

例えば、正規表現に対応したテキストエディターで「同じ行の中にAとBの2つの文字を含む行を見つけたい」とします。
その場合はチャットCPTに以下のように質問します。

質問

正規表現で「同じ行にAとBの2つの文字列を含む行」にマッチする書き方を教えてください。

返答:
次の正規表現を使うことで、「同じ行にAとBの2つの文字列を含む行」にマッチすることができます。

^(?=.*A)(?=.*B).*

この正規表現では、(?=.*A)と(?=.*B)を使って、それぞれAとBの文字列が含まれることを先読みアサーションでチェックしています。そして、.*で行全体にマッチします。^は行の先頭を表すアンカーです。

では、正規表現が使えるテキストエディターで以下のように3行のテキストを用意します。

AとBを含む行
BとAを含む行
AとCを含む行

そして、検索欄に以下の文字列を入れます。

^(?=.*A)(?=.*B).*

［正規表現］にチェックを入れて検索します。

すると、1行目と2行目だけが検索結果に出てきました。
AとBの順序に関係なく、うまく動作しているようです。
（今回は CotEditor というテキストエディターを使用しましたが、ほかのテキストエディターでも同じように動作するはずです）

jQueryとJavaScriptのコードを変換

jQueryとは？

jQueryは、JavaScriptのライブラリの1つです。jQueryを使うことで、簡単にWebページを操作することができます。

例えば、HTML要素の表示・非表示の切り替え、要素の位置やサイズの変更、クリックなどのイベントの追加・削除などが簡単に行えます。
jQueryはHTML文書内のJavaScriptのコードを簡潔にし、クロスブラウザに対応できます。

HTMLやCSSを学んだ後に、Webページにちょっとした動きをつけるためにjQueryを学ばれた方も多いと思います。
しかし実際の案件では「今回はjQueryを使わず実装して欲しい」と指示されて、jQueryを使用しないJavaScriptの書き方は学んでいなかったため困った…という方もいらっしゃるのではないでしょうか。

あるいは、案件によっては「今までjQueryで書いていたコードをJavaScriptで書き直すことになった」ということもあるかもしれません。

そのような時、ChatGPTを使用してjQueryのコードをJavaScriptに変換できます。
（もちろん逆もできます）

質問

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

$("button").click(function() {
    $("h1").html("新しい見出し");
});

返答:
以下のコードは、上記のjQueryコードをJavaScriptで書き直したものです。

document.querySelector("button").addEventListener("click", function() {
    document.querySelector("h1").innerHTML = "新しい見出し";
});

もちろんやりたいことを日本語で入力して、JavaScriptのコードを書き出してもらうことも可能です。
ただしその場合、「○○するJavaScriptのコードを教えて」のようにシンプルに質問すると、意図せずjQuery用のコードが出力されたり、古いJavaScriptのコードが出力されることも多かったです。

Web制作の基礎から学べる「Webコーディングスクール」 の授業では、安定して新しいJavaScriptのコードを出力してもらうためのChatGPTへの質問方法についても解説します。

他の方が書いたプログラムを解説してもらう

たとえば、引き継いだ案件で他の方が書いたJavaScriptにコメントが書かれておらず、何をやっているのか分かりにくいということがあるかもしれません。

ここでは例として、先ほど出力されたJavaScriptについて質問してみます。
質問は、単に「以下のJavaScriptの内容を解説してください。」だけよりも、「プログラミング未経験でも理解できるように、わかりやすく解説してください。」も付けた方が解説が丁寧になります。

質問

以下のJavaScriptの内容を解説してください。プログラミング未経験でも理解できるように、わかりやすく解説してください。

document.querySelector("button").addEventListener("click", function() {
document.querySelector("h1").innerHTML = "新しい見出し";
});

Chat GPT(3.5 turbo)の回答

このJavaScriptコードは、ボタンがクリックされたときに、ページ内のh1要素のテキストを「新しい見出し」に変更するイベントリスナーを追加しています。

document.querySelector("button")は、ページ内の最初のbutton要素を取得しています。addEventListener()メソッドは、指定されたイベントが発生したときに実行される関数を追加します。この場合、ボタンがクリックされたときに実行される関数が指定されています。

関数の中で、document.querySelector("h1")は、ページ内の最初のh1要素を取得しています。そして、innerHTMLプロパティを使用して、h1要素のテキストを「新しい見出し」に変更しています。

つまり、このコードは、ボタンがクリックされたときに、ページ内のh1要素のテキストを「新しい見出し」に変更するという動作を実現しています。このように、JavaScriptを使用することで、Webページの動的な変更や操作が可能になります。

GPT-4の回答

このJavaScriptコードは、ウェブページ上のボタンがクリックされたときに、ページの見出し（<h1>タグで囲まれた部分）を「新しい見出し」というテキストに変更する機能を実装しています。以下に、各部分の説明をわかりやすく解説します。

document.querySelector("button")：ウェブページ上の最初のボタンを見つけます。
addEventListener("click", function() {...})：見つけたボタンに、クリックされたときに実行される機能（関数）を追加します。
ボタンがクリックされると、function() {...} 内のコードが実行されます。この関数内で、ウェブページ上の最初の見出し（<h1>タグで囲まれた部分）を見つけます。
見つけた見出しの内容を、「新しい見出し」というテキストに変更します。
つまり、このコードはボタンをクリックすると、ウェブページ上の見出しを「新しい見出し」というテキストに変更する機能を提供しています。

Bing AIの回答（バランスよく）

このJavaScriptのコードは、以下のような動作をします。

ボタンがクリックされたら、
h1要素の中身を「新しい見出し」に変更する
addEventListener()は、イベントリスナーを追加するためのメソッドです。第1引数にイベント名、第2引数にイベントが発生した時に実行される関数を指定します。querySelector()は、CSSセレクターにマッチする最初の要素を取得するメソッドです。innerHTMLは、HTML要素の中身を取得または設定するプロパティです。

このコードでは、button要素がクリックされた時にh1要素の中身が「新しい見出し」に変更されます。addEventListener()でclickイベントを登録しているため、button要素がクリックされた時に指定した関数が実行されます。関数内ではquerySelector()でh1要素を取得し、innerHTMLで中身を変更しています。

Bardの回答（3件中2件目）

このコードは、ボタンをクリックすると見出しのテキストを「新しい見出し」に変更します。

コードは2つの部分で構成されています。

1. ボタンをクリックしたときに実行されるイベントハンドラの登録
2. ボタンをクリックしたときに実行される関数

イベントハンドラは、ボタンの addEventListener() メソッドを使用して登録されます。このメソッドには、イベント名と関数の2つの引数が必要です。イベント名は click で、関数はボタンをクリックしたときに実行される関数です。

関数はボタンをクリックしたときに実行されます。関数は、ボタンの querySelector() メソッドを使用して見出し要素を検索することによって機能します。次に、 innerHTML プロパティを使用して見出しのテキストを「新しい見出し」に設定します。

このコードは、初心者でも理解しやすいように単純化されていますが、JavaScriptでイベントハンドラを登録し、関数を実行する方法の一般的な例です。

どの解説が分かりやすいかは、人によって異なりそうな気がしますね。
個人的にはBardの回答が分かりやすいと感じました。ただ、3件の回答のうち1件目と3件目はいまいちで、2件目が分かりやすかったです。

Bingは3種類のトーンのうち「バランスよく」が最もダメな回答のことが多いのですが、今回は「バランスよく」の回答が分かりやすいと感じたのでそちらを紹介しました。

WordPress

WordPressを使用したWebサイト制作やブログテーマ制作をしていて知らない言葉が出てきたり、「こういう時はどんなWordPress関数使うんだっけ？」と疑問に思った時に調べるの時にも大規模言語モデルは利用できると思います。

たとえば、WordPressテーマを制作しているときに グローバルナビゲーションなどからトップページにリンクするためのWordPress関数 を調べたいとします。

Googleで［WordPress トップページ…］と入力している途中に出てきたサジェストにあった［WordPress トップページのURL php］というキーワードで検索すると、esc_url() が付いていない書き方が強調スニペット（検索1位より上の特別枠）に出てきてしまうのですが、この書き方はセキュリティ的によろしくないです。

次に、ChatGPTに質問してみました。

質問

私はWordPressテーマをPHPで開発しています。
WordPressトップページにリンクするため、トップページのURLを取得したいのですが、そのためのテンプレートタグを教えてください。

WordPressでトップページのURLを取得するには、home_url()関数を使用することができます。この関数はWordPressがインストールされたURLを返します。

テーマファイル中で、以下のように使用することができます：
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">トップページ</a>

このコードでは、home_url()関数を使用して、WordPressインストールのホームURLを取得し、それを<a>タグのhref属性に設定しています。esc_url()関数を使用することで、出力されるURLが正しくエスケープされ、セキュリティ上の問題が回避されます。'/'は、トップページのURLを取得するための引数です。この引数は、WordPressインストールのホームURLに追加されます。

他にもトップページのURLを取得するための方法がありますが、home_url()関数は一般的に使われる方法の一つです。

ChatGPTでは、きちんと esc_url() が使用されています。
私もこちらの方法をお勧めします。

文章を考える

ChatGPTに、要約したい文章と「重要だと思われるところをリストアップしてください」と質問すると、要点がまとまったテキストが出力されます。
長文記事に目次を付けたい場合はもちろん、会議の内容を文字起こししてから概要をまとめたい場合などに利用できると思います。

実はこの記事も、ChatGPTを使用して一部を執筆しています。
最初は段落ごとの見出しだけを自分が考えてその段落の内容をChatGPTに出力してもらおうとしたのですが期待したほどの品質にならなかったため、「正規表現とは」「jQueryとは」の解説コラム部分のみChatGPTに執筆してもらい、出力された文章の中から不要な部分を自分で削除してこの記事に掲載しています。

なお出力の際は、深津さんの要約メソッドを一部改変し、プロの執筆者になりきって出力してもらいました。
以下は「jQueryとは」の解説コラム部分を執筆してもらうための質問文です。

質問

# 命令書:
あなたはプロの執筆者です。
以下の制約条件と入力文をもとに最高の文章を出力してください。

# 制約条件:
• 文字数は300文字程度。
• 小学生にもわかるように。
•重要なキーワードを取り残さない。
•文章を簡潔に。

# 入力文:
jQueryとは何かについて解説してください。

# 出力文:

長い文章を要約する場合

G7共同宣言の仮翻訳のPDFが公開されていたので、AIに関する部分を読んだのですが、分かりづらかったため以下のプロンプトで要約してもらいました。

質問

あなたは優秀な編集者です。以下の文章を、中学生でも理解できるようにまとめてください。

ここに長い文章をPDFから貼り付け

すると、以下の結果になりました。

ChatGPT(3.5 turbo): 文章が長すぎて回答を拒否
Bing AI: 「創造的に」、「厳密に」は要約できた、「バランス」は「中学生でも理解できる文章の書き方」をネット検索して、ペーストしたPDFの内容と関係なく「中学生でも分かりやすい文章を書くコツ」を回答してしまった
Bard: 回答を拒否（政治的なキーワードが入っているため？）

G7共同宣言のAIに関する部分を読んでいたのですが、分かりにくいのでBing AIに要約してもらいました。
プロンプト: “あなたは優秀な編集者です。以下の文章を、中学生でも理解できるようにまとめてください。”

1枚目: Bing 創造的に
2枚目: Bing 厳密に
元のPDF: https://t.co/jMsGik1bk4 #BingAI pic.twitter.com/FoaIaIjmMg

— なつき🐰Webデザイナー (@Stocker_jp) May 21, 2023

少し意外でしたが、長い文章の要約はBing AIの「創造的に」、「厳密に」が適しているようです。
これらはGPT-4ベースなので品質も高いはずですし、ChatGPT Plusを契約していなくても利用できます。

ChatGPT(3.5 turbo)でも質問を分割して入力する方法もあるのですが、それよりもBing AIを利用した方が手軽だと思います。

翻訳でシチュエーションを指定する

最近はGoogle翻訳の精度が向上したことやDeepLの登場により、英語の文章が理解できなくて困るというシチュエーションはかなり減りました。

しかし、日本語の文章を外国語に翻訳するというシチュエーションにおいては、Google翻訳やDeepLでも意図した通りの結果にならないことがあります。
その大きな原因は「シチュエーションを指定できないこと」だと私は考えています。

しかしChatGPTの場合、シチュエーションを指定できるため意図した結果になりやすいと感じます。

例: 海外の業者とのやりとり

私の場合、クラウドサーバー業者の英文メールでやりとりしていて、私が書いた日本語を英文に翻訳したいということがあります。
その場合、「○○という作業をしたところ、このようなエラーになりました」のような文章をDeepLで翻訳すると “You” からはじまる文章、つまり「あなたが○○という作業をしたところ…」という文章になってしまう場合があります。

しかし、ChatGPTなどでは「クラウドサーバー業者に送るメールを英語に翻訳してください」と先頭に書いておけば、「○○という作業をしたところ…」が “You” になってしまうということはありませんでした。

さらに、GPT-4であれば相手から送られてきたメールをペーストして「このメールの内容を日本語で解説してください」と質問すると分かりやすく内容を解説してくれたり、簡単な指示で綺麗な返信メールを書いてくれました。

その後もやりとりしているけど、改行されてなくて読みづらい英文メッセージはDeepLだと翻訳しても読みづらい（1枚目）。
でも、GPT-4だと箇条書きにしてくれるのでとても読みやすい（3枚目）。 pic.twitter.com/1X2IOsed1X

— なつき🐰Webデザイナー (@Stocker_jp) April 30, 2023

返信メールも、伝えたいこととエラーメッセージを雑にペーストするだけで書いてくれる。 pic.twitter.com/aubfNAdD8r

— なつき🐰Webデザイナー (@Stocker_jp) April 30, 2023

面倒なお断りメールの返信を考えてもらう

たとえば、個人事業主であれば「WordPress開発の依頼を相場の10分の1の価格かつ超短納期で依頼してきた、これまで付き合いのない人への返信メールを考える」といったことは時間の無駄に感じるかもしれません。

そういった場合、「○○をビジネスメールとして通用するように、丁寧な文章で書き直してください」とChatGPTにお願いすると、代わりにメールの内容を考えてくれます。

質問

「WordPress開発の依頼を相場の10分の1の価格かつ超短納期で依頼してきた人へのお断りメール」をビジネスメールとして通用するように、丁寧な文章で書き直してください

ChatGPT(3.5 turbo)

尊敬する○○様

この度は、弊社にWordPress開発のご依頼をいただき、誠にありがとうございます。お問い合わせいただきました内容につきまして、誠に恐縮ですが、弊社の価格設定と納期には一定の基準がございますことをご了承ください。

弊社では、お客様に最高品質のサービスを提供するため、専門知識を持ったスタッフが丁寧に対応させていただいております。そのため、価格設定につきましては、業界標準の価格を設定しております。また、納期につきましても、お客様に最高品質のサービスを提供するため、適切な期間を設定しております。

今回いただいたご依頼につきましては、弊社の価格設定と納期に合致しないことをご了承いただけますようお願い申し上げます。お客様により良いサービスを提供するためにも、ご理解いただけますようお願い申し上げます。

何かご不明な点がございましたら、お気軽にお問い合わせください。

敬具
○○株式会社

GPT-4

件名：WordPress開発プロジェクトに関するお問い合わせへの回答

[依頼者様の名前] 様

お世話になっております。[あなたの名前]と申します。
先日いただいたWordPress開発プロジェクトに関するお問い合わせについて、誠にありがとうございました。

拝見させていただいた内容について、慎重に検討させていただきましたが、誠に残念ながら今回のご依頼には対応が難しいと判断いたしました。

ご提示いただいた予算と納期に関しまして、弊社の品質基準を維持することが難しいと判断したためです。私どもは、お客様に満足いただける品質のサービスを提供することを最優先に考えておりますので、このような判断をさせていただくことになりました。

しかしながら、今後もお客様のご要望に柔軟に対応できるよう、サービスの改善に努めてまいりますので、何卒ご理解いただけますと幸いです。

今後ともどうぞよろしくお願い申し上げます。

敬具

[あなたの名前]
[あなたの会社名]
[連絡先情報]

Bing AI: 厳密に

拝啓

この度は、WordPress開発のご依頼をいただき、誠にありがとうございます。

しかしながら、ご提示いただいた価格と納期につきましては、私どもの業務範囲外となりますことをお詫び申し上げます。

私どもは、品質の高いサービスを提供するために、適正な価格と納期を設定しております。今後も、お客様に満足いただけるサービスを提供するために努力してまいります。

何卒、ご理解いただけますようお願い申し上げます。

敬具

Bard

承知しました。ビジネスメールの下書きをご紹介します。

[クライアント名]様

お世話になっております。[あなたの名前]です。

先日、WordPress開発のご依頼をいただき、ありがとうございます。しかし、誠に申し訳ございません。この度は、ご依頼をお断りさせていただきます。

理由は、ご提示いただいた予算が、私の相場よりもかなり低いからです。また、納期も非常に短く、私のスケジュールに合いません。

私は、クライアントに最高の品質の製品を提供することをお約束しています。そのためには、十分な時間とリソースが必要となります。残念ながら、今回のご依頼では、その条件を満たすことができません。

ご希望に添えられず、誠に申し訳ございません。またのご機会がありましたら、どうぞよろしくお願いいたします。

敬具
[あなたの名前]

BingやBardは表現が直接的で、丁寧なお断りメールとしてはふさわしくないと感じました。
こういったメールを丁寧に書いてもらいたい場合は、GPT-4を利用するのが良いかもしれません。

大規模言語モデルを使うコツ

苦手な分野を知る

よくあるパターンとして、ChatGPTなどの大規模言語モデルに「○○さんについて教えてください」と特定の人物のプロフィールを質問する方がいらっしゃいます。
すると多くの場合、大規模言語モデルは堂々と間違ったプロフィールを回答し、利用者はがっかりしてしまう…というものがあります。

あるいは、5桁の掛け算など一般的な計算ソフトであれば確実に正解できるものに正解できないという場合もあります。

なぜこのような事が起きるかは、Web制作の基礎から学べる「Webコーディングスクール」 でお話ししますが、とりあえず以下のことを覚えておいてください。

• 大規模言語モデルは人物のプロフィールなど、具体的な情報を回答するのは苦手
• 大規模言語モデルは作り話をすることがある
• 大規模言語モデルは計算は苦手

例を示す

たとえば、俗に「マンションポエム」とよばれる、マンションの広告に掲載されているキャッチコピーのようなものをChatGPTに考えて欲しいとします。
その場合、単に「マンションポエムを考えてください」という質問では上手くいかないことがあります。
そのようなときは、実際のマンションポエムを例として与えると上手くいく場合があります。

質問

いわゆる「マンションポエム」を考えてください。たとえば以下のようなものです:

「人生に、南麻布という贈り物」
「東京の暮らしが取り戻すべき、日常」
「いま東京時間を愉しむ、時代の最前線へ」

しかし前述のように質問しても、ChatGPTの返答は「マンションポエムとは何か」という内容でした。
そのような場合は、再度「あなたの考えたマンションポエムを返答してください。」のようにお願いします。
するとマンションポエムが返ってきました。

もしくは、あらかじめ質問の最後に、以下のように「あなたの考えたマンションポエムを返答してください。」と付け加えます。

さらに、回答の品質を上げるために「あなたは世界最高のコピーライターです」を最初に付け加えると良いでしょう。

質問

あなたは世界最高のコピーライターです。
いわゆる「マンションポエム」を考えてください。たとえば以下のようなものです:

「人生に、南麻布という贈り物」
「東京の暮らしが取り戻すべき、日常」
「いま東京時間を愉しむ、時代の最前線へ」

あなたの考えたマンションポエムを返答してください。