UPDATE：2023.6.20
- CATEGORY
ChatGPTを使ってjQueryのコードをJavaScriptへ変換してみた
ごきげんよう。すでに暑さにまいっているたぁです。
今回は話題のChatGPTを使ってjQueryのコードをJavaScriptへ変換してみましたので、簡単にご紹介したいと思います。
WordPressでは標準でjQueryが搭載されている
弊社では主にWordPressを使用していますので、jQueryのライブラリ（jQueryを使えるようにするための部品）はほぼ読み込まれます。ですので、スクロール判定など負荷の高いものを除いては簡単に記述できるjQueryはとても便利です。
今後はJavaScriptに置き換わる
とはいえ、この先は脱jQueryが加速しJavaScriptオンリーになるかもしれません。そうなると今までのjQueryはどうするの？ってことで、ものは試しで話題のChatGPTを使ってjQueryのコードをJavaScriptへ変換してみることに。
ChatGPTへの入力手順
変換方法はいたって簡単で、まず「以下のjQueryをJavascriptに変換して下さい。」
と入力し、エンターキーを押します。
その後、変換したいjQueryのコードを入力してエンターキーを押して少しするとあっという間にJavaScriptのコードが出力されました。
今回試したjQueryのコード
今回試したコードはクラスが「menu_btn」に付与されているものをクリックしたときに、クラス「is_active」をつけたり外したりするものです。$('.menu_btn').on('click', function() {
$(this).toggleClass('is_active');
});
出力されたコードが以下になります。
var menuBtns = document.querySelectorAll('.menu_btn');
menuBtns.forEach(function(menuBtn) {
menuBtn.addEventListener('click', function() {
this.classList.toggle('is_active');
});
});
実際に動作するか試したところ問題なく動作しました！
まさに一瞬！！
まとめ
本当に便利な世の中になりました。試しにスライダーなどのライブラリを使用したものや複雑なものを入力しましたが、そちらはうまく変換されなかったのでこの辺りはまだまだこれからなのかな。
とはいえ、こういう便利なツールはうまく活用してさらに良いものを制作していけたらと思います。
