ChatGPTを活用してJavaScriptを作ってみた話

  • このエントリーをはてなブックマークに追加

様々に活躍するAI

ChatGPTなどのAI生成ツールの話をよく聞くようになりました。
AIの活用は様々な分野で活発になっていますね。
聞いた話によると、出勤のシフト管理を今までは苦労して作っていたけど、今はAIに依頼してササッと作ってしまうとか。
もちろん要望に応じて入れ替えもできて、これまでシフトを作成していた時間を、他の業務に割く事ができるようになって、全体的に作業効率が上がった。とか。

私どもが利用する画像素材集にもAIの技術が使われています。
例えば利用可能な素材の中にAIで生成された画像があったり、指示を与えて新しく画像を生成してくれたりします。
PhotoShopでもAIを活用して、人物の表情を変えたり、要素を生成したりと、様々な箇所でAIの活用に注力していることが伺えます。

文章の校正にも活用されています。
例えば“一”と“ー”。
このふたつは何が違うでしょうか。

ひと目ではわかりづらいですが、左が漢数字の一で、右が長音のーです。

この他にも
「エ(カタカナ)」と「工(こう)」
「ニ(カタカナ)」と「二(漢数字)」
「l(エル)」と「I(アイ)」などなど……
こんなの……わからないよ……というような人では判断がつきづらいものも、AIはしっかり判別してくれます。
誤字脱字や、不自然な表現についても指摘してもらえるので、気付きにくいおかしな表現を修正するのにも役立ちます。

HTMLやJavascriptなどの生成へ活用してみた

毎日HTMLやらCSS、Javascriptを書いているので、コーディングについても活用できるのでは?と思っていました。
そのまま使えなくても、少しでも短縮できたりしないかな?とか、
何か目新しい処理を思いつくヒントにならないかな?とか、
思うように動作しない時に、解決までのヒントになればいいな~とか、
多少なりともサポートしてもらえたら助かるのになぁという思いから活用してみました。

実際にやってみたら、きちんと動作させるまでに何度も検証して再度生成して…繰り返す事になりましたが、しっかりとした物を作り込むことができたので、とても助かりました。

ChatGPTに状況とやって欲しい処理を正しく伝える

実際にChatGPTを利用してJavascriptを生成してみました。
やってみて思ったのは、目的は何か、何を利用するのか、どういう挙動を求めているのか、という要件をしっかり考える事。
完成形をイメージする事。
自身でしっかり理解してから伝える事。
そしてそれらを文章化する力が重要だという事
です。

やって欲しいと思っていることが正しく伝わらないと、何を求めているのか理解できずに、物事が前に進みません。
これは人もAIも同じですね。
また、AIには身振り手振りで何とかして伝える!!という超絶パワープレイは通用しません。
なので、要点をまとめた文章を作成する技術がとても重要になります。
また、まちがえて覚えている用語にも注意が必要です。
意味を正しく理解していなかったために、思ったようにいかない…という事も起こり得るからです。

何か作って~とか、良い感じにして~とか、そういうフワフワした表現や、曖昧な指示……ですらないような物では、出てくる回答もそれなりになってしまいます。

自分が思った事を何でもやってくれる魔法のツールではないので、ある程度は骨格となる設計をしっかりと行い、より明確に指示する必要があります。


トライ&エラーを繰り返す

生成してもらって、実装してハイお終い。とは、いきません。
実装してみてから分かる事もあれば、もっと手を加えたいと思う所が見つかる場合もあります。
また、予想できていなかった様な事態に遭遇したりと、課題が徐々に見えてきます。
これはChatGPTを利用してもしなくても同じですね。

その際に、どの処理で問題が起きていそうか、どうしたら改善できそうか、といった仮設をたてて検証していきます。
こうした問題点を見定めるためには、問題点を見つけたり理解する知識が必要です。
ChatGPTを使ったとしても、そこは変わらないんだなと思いました。

こうしたトライ&エラーを繰り返して、より洗練させていく作業も必要になるので、しっかりした物を実装するにはある程度の時間が必要です。

実際に活用してみて思った事

沢山調べて検証する時間を短縮する事ができそう

こういう事をしたいんだよね。という要望に対して、アレとコレを組み合わせるとか、アレを活用したら出来そう……と思いつく事があります。
それが見事にハマればいいのですが、実際にやってみるとなんだか思ったのと違う……どうしたらいいかな???と悩む事もしばしばあります。

そんな時には、あれこれと調べては実装して検証してみる。という事が繰り返し必要になってくるわけですが、なかなか解決方法がみつからない!!!と時間を過ごす事になってしまうかもしれません。
そんな時にChatGPTへ相談する事で、解決までのヒントを手早く集める事ができます。

検証するまでに必要だった、“調べるという時間をAIに依頼する”事で、本当に必要な作業に時間を多く割り当てることができるようになりそうですね。

新しい発見がありそう

実際にChatGPTを活用してJavascriptを生成してもらったのですが、その時に“こんな処理があるのか!”と、私の中での新しい発見がいくつかありました。

ChatGPTが生成してくれたJavascriptには、どういう挙動をするのか等の説明がコメントアウトで記述されていました。
やり取りの中でも、何を利用してどういう処理をするのかを説明してくれているので、理解度が高まります。

どういう処理をする為に、どういう記述や仕組みを利用するのかといった技術的な説明もしてくれているので、勉強にも活用できそうだなと思いました。
わからない場合は、新しくチャットを作って相談したり、Web検索を活用して調べていく事で、より深く掘り下げて学べそうです。

頼り切りでもそれっぽい動作を作る事はできるけど……

ChatGPTが書き出すソースコードはだいぶしっかりしています。なので頼り切ってもそれっぽい挙動はしてくれると思います。
ですがそれを更新などの運用をしたり、長期に渡って保守をすると考えるとどうでしょう。
「何だかわからないけど、動いているッッッッ!!」って、怖くないですか?
どういう処理になっていて、変更したい時はどうしたらいいのか?など、ある程度は理解しておく必要がありますね。

考えるのは人間の仕事

ChatGPTは与えた内容を素早く処理して、形にしてくれます。
ですが、実際にどういう物を作りたいのか、どんな用途に利用したいのかを考えるのは、人間がやる仕事なんだなと思いました。
また実際に書いてもらったソースコードを検証したり、変更したい箇所はないかを考えるのも、閲覧した人間が考える事といえます。

実際に触れて、操作して、改善点を見つける感性をしっかりと養っていきたいものですね。


ChatGPTはツールのひとつ

illustratorを使って絵を描く。フォトショップを使って写真を加工する。カメラを使って撮影する。
これらと同じように、ChatGPTもツールのひとつにすぎません。

あくまでもツールですので、扱う人が何をしたいのか、どう活用したいのかが重要になってきます。
ChatGPTはそれを実現する為の手段のひとつです。
ただ在るだけでは機能しないので、機能させるための指示が必要になってきます。

世の中に便利な物は沢山ありますが、それをどう使うのか。どのように扱うのか。
そういった視点を忘れないようにしたいものですね。
  • このエントリーをはてなブックマークに追加

CONTACTお問い合わせ

ホームページ制作に関するご質問などございましたら、
お気軽にお問い合わせください。

※ブログ記事に関するご質問はお答えしかねます。

TEL:0258-31-5005FAX:0258-37-7301

ホームページ制作やSEOのお悩みはぜひ弊社へご相談ください