ChatGPTでコーディング効率化！Google検索とどう使い分ける？

Web制作の現場では、日々「ググりながらコードを書く」のが当たり前ですが、最近では「ChatGPTに聞いたら一瞬で解決した」なんて声もよく聞きます。
筆者も、ChatGPTを活用する場面が少しずつ増えてきました。

しかし、「Googleでの検索」と「AIの活用」はそれぞれ、得意・不得意やメリット・デメリットもあります。

この記事では、実際に筆者が体験した場面を例に、「Google検索」と「ChatGPTの対話型サポート」がどう違うのかを比較しながら、効率的な使い分けのヒントをお届けします。

Google vs ChatGPT 活用場面を比較

ちなみにこの表はChatGPTにまとめてもらいました。（笑）

実例集

筆者が実際に、クライアントワーク中に発生したトラブルや、実装したい仕様に対するアプローチを例に実例を挙げてみます。

◎ jQueryで不具合発生

jQueryで、ブラウザの高さを $(window).height() で取得して処理をしているのですが、サーバ環境が変わるとブラウザの高さが本来500程度で取得されるべきところ10000以上の数字になってしまい、正しい処理が続きません。原因として何が考えられますか？

Google検索で「jQuery window height 数値がおかしい」で検索して、思った通りの結果が出なかったため上記のような形でChatGPTに尋ねてみました。

考えられる原因の候補や、「console.logでこの値を調べてみて」のようなそのままコピペできるデバッグコードも生成してくれました。

console.log(‘window height:’, $(window).height());
（略）
これらのデバッグを試してみたら、全部の数値が10000以上になりました。document、body、htmlはコンテンツ量に応じて10000くらいになってもおかしくないけど、windowはそんなはずないですよね？

console.log(‘window.innerHeight:’, window.innerHeight);
console.log(‘window.outerHeight:’, window.outerHeight);
を試してみたらwindow.innerHeightは400くらい、outerHeightは1000くらいでした。

このように、デバッグ結果を共有しながら解決案を出してもらえるのはChatGPTの強みだと思います。

◎これは仕様？バグ？

WordPressのプラグインを使用していて何かしら不具合を起こした時、リファレンスやFAQが全文英語で書かれていると「この不具合はプログラムの記述ミスによるエラー？それともプラグイン側のバグ？それとも仕様？」という切り分けがしづらい場面が多々ありました。

WordPressに「Mammoth .docx converter」というプラグインを入れてみました。.docxをアップロードしたら記事になるというプラグインなのですが、ドキュメント内に挿入されている画像が反映されません。これは仕様？バグ？

このように尋ねたところ、「このプラグインはこういう動作を目的としていて、元からその内容には対応していません」という明確な回答を得られました。

エラーやバグが発生したらまずは原因の切り分けから、がセオリーですが、切り分けに本来かかる時間を大幅にカットできたのでこれは非常に助かりました。
また、「.docxのファイルを記事としてWordpressへインポートした際、内包している画像を記事内へ反映する方法」としていくつか代替案も出してくれています。

○特殊なアニメーションを実装したい

URL
このサイトにあるような、マウスポインタの軌道に合わせたドットのアニメーションはどうやって再現できますか？

マークアップの依頼をお受けする際、「こういう仕様にしたいんですが可能ですか？」という質問と共に送られたベンチマークのURLやサイトを参考にする機会は多いです。
ソースを解読する方法ももちろんありますが、CSSやJavascriptファイルを１つ１つ読み取って再現するのは非常に効率が悪いですし、何より丸パクリは印象がよくありません。

そのため、「こういう動作をしたらこうなるようにしたい」と口語的に指示して土台となるソースを書いてもらうのは効率的です。
仕様やプロンプトの内容にもよるとは思いますが、基本、JSやjQueryのライブラリは使用せずJavascriptでの再現とその解説をしてくれます。

一発で理想通りの挙動になることは少ないですが、「もう少し動きを速くしたい」「フェードをもっとふんわりさせたい」といった指示をもとに微調整できるのも強みです。
個人的に驚いたのは、ちゃんとコメントで /* この数値で速度調整可能 */といったような記載もしてくれたことです。

△ reCAPTCHAを導入したい

（ファイル添付）
このページのフォームにGoogleのReCAPTCHAを導入したいです。 サイトキーとシークレットキーは用意してもらっています。

こちらはWordpressやWordpressのプラグインを使用せずPHPのみで作成したメールフォームに自分で１からGoogle ReCAPTCHAを導入する時に、実際に使用しているファイルをアップロードしつつ相談したプロンプトです。

ただ、こちらの例はあまりうまく作動しませんでした。

というのも、実際に使用しているPHPをアップロードしてreCAPTCHAのソースを組み込んで、と指示したのですが、返ってきたファイルが全く別物になっていたんですよね…
元あるソース＋必要な追記、ではなく、必要最低限のサンプルフォームを１から作りReCAPTCHAを組み込んだソースが返ってきました。

一応、返ってきたソースを参考にしつつ、最終的にはGoogleの公式ドキュメントや検索にヒットした記事を参照しながら手直ししました。

ファイルをアップロードして「これに追記して」という指示は、今のところうまくいかないこともあるようです。
また、情報漏洩などの観点から見ても、機密情報が掲載されたファイルのアップロードは控えた方が安全です。

効果的な質問のコツとプロンプト例

• 実際のソースコードを貼ると、より原因が特定しやすい
  → テキストだけで「動かない」と言っても状況が伝わりづらいため。

例）
【ソースをコピペ】※機密情報を貼らないように注意！
○○をクリックしたら△△を表示するためにこのようなソースを書いたが、△△が表示されない。どこがおかしいかわかりますか？

• 期待している動作や、うまくいかない状態を具体的に書く
  → 例：「クリックしても何も起こらない」「表示が崩れる」など。

例）
【URLをコピペ】
このページで○○のボタンを押すと△△のページへ遷移する想定なのですが、違うページへ遷移してしまいます。どうしてですか？

• 「どんな環境か」もできるだけ伝える
  → ブラウザ名、使用しているフレームワーク、WordPressのテーマ名など。

例）
○○のフレームワークを使用しスライダーを設置したのですが、MacのSafariで閲覧した時のみ画像のサイズが異なって表示されます。Safari以外のPCモダンブラウザ、SPブラウザでは問題ありません。どうすればいいですか？

• 参考にしたいベンチマークやサイトがあるならURLを貼ると良い
  → デザインや挙動を真似したい場合は、実例があると伝わりやすい。

例）
【URLをコピペ】
このサイトのナビゲーションにマウスオーバーした時の○○な挙動に、△△という動きを付け加えて再現したいです。どうしたらできますか？

• エラーコードがある場合はそのまま貼る（コピペ）
  → 正確なメッセージがあるだけで、原因の特定精度が上がる。

例）
Uncaught TypeError: Cannot read properties of null (…) というコンソールエラーはどのような原因が考えられますか？
※エラーメッセージは一度検索してみた方が速い時もある

• 「これはバグ？仕様？記述ミス？」は原因切り分けに非常に効果的
  →仕様だからといって切り捨てず、代替案まで出してくれる。

例）
Wordpressのプラグイン「○○」に△△の設定をしたら、想定外の××が発生しました。これは仕様ですか？バグですか？

すごいけど、過信はしちゃだめ

エラーでちょっと行き詰まった時や、どういう単語で検索すべきか迷った時にはとても力強い味方となってくれます。
ですが、最終的には手動で調整したり、真偽や情報ソースを確認する必要はあります。

あくまで検索の手間を軽減するサポートツール、という認識で活用するのがよさそうです。