株式会社ズコーデザイン

最近寒くなってきましたね！

どうも、普段サイトのコーディングを主に担当していますウェンディです。

 

この間ファミレスに行ったとき、カワイイ猫ちゃんロボットが注文した食べ物を運んできてくれて感動しました！

自動運転ができる車や、音声アシスタント、オンラインショッピングのおすすめ機能など、日常で人工知能に触れる機会がここ数年で各段に増えました。

本当にすごい世の中です...

 

そんな私も最近はWeb制作の業務でChatGPTを活用しており、効率的に作業を進める手助けをしてもらっています！

chatGPTとは、皆様恐らくご存知の通りチャットを介して人工知能と対話ができるAIテキスト生成システムです。

日常で使用する場合は、一般的な質問への回答/文章生成/言語翻訳が可能なのでどのような人でも日常で役立てることができます。

 

ちなみにこちらの記事は、chatGPTを活用しながら作成しています！

文章自体は私自身で書いたものになりますが、具体的にはchatGPTでできることや、自然な文章の導入方法の提案など、部分部分で助けてもらいました。

おかげさまでスムーズに記事を作成することができました！

では次に、Web制作の場ではどのように活用しているのか...具体例を用いて紹介します！

 

1.ブラウザでの予期しない挙動の原因解明

以前スマホ用にクリックすると開閉するドロップダウンメニューを設置した際に、chatGPTを活用しました。

ドロップダウンメニュー内のリンクをクリック後、ページ遷移する直前にドロップダウンメニューが閉じてしまう問題が発生しておりました。

社内でも可能ならメニューが開いた状態で遷移できればということで、ソースコードを添付した上で現状と理想とする挙動を伝えたところ、無事解決しました。

※その際の返答がこの記事のサムネイルに使用しているキャプチャになります！

 

 

2.ソースコードの言語の変換

近頃社内ではjQueryを廃止し、軽量化の目的でJavaScriptにすべて置き換えがされました。

jQueryを使用していた頃の、過去に制作したサイトから記述を引っ張ってくる際にもchatGPTは役立ちます。

「jQueryで書かれているソースをJavaScriptに変換してほしい」とソースコード付きで送信すると、変換してくれるので本当に助かっています！

例えばjQueryの、要素の表示/非表示をフェードで切り替える「fadeToggle」メソッドは、JavaScriptでは使用できません。

それを踏まえて要素に対して「is-active」などのクラスを付与し、フェードの部分はCSSで実現するように機転を利かして変換してくれるところがchatGPTのすごいところです。

 

 

こういったことは正直なところ、検索で調べながら1つ1つ問題を紐解いていけば解決は可能です。

1つ目の「ブラウザでの予期しない挙動の原因解明」についても「JavaScript クリックイベント 特定のクラスを除外」などのキーワードで調べることで解決したはずです。

 

しかし、今目の前で発生している問題と同様の事象＆解決方法を、検索結果から探し出して解決するのはやはり時間がかかります。

そこが「エンジニアは検索力が何よりも大切」と言われている所以かと思います。

 

また、chatGPTは完全無欠なツールというわけではなく、伝え方によっては求めている答えと全く異なる回答をする場合もあります。

そういった場合は再度文章で伝え直す必要があったり、答えも必ずしも完璧なわけではないので一部のみ抜粋して残りは自分で調整したりなどの工夫が必要です。

今後は「検索力」のみならず「AI活用力」も求められていく時代ですね...！

 

AI技術の進化は「AIに仕事を奪われる」のではなく、「AIを人が活用することで業務の効率化を図る」といった共存スタイルが、今後さらに当たり前になっていくと予想しています。