Chat GPTを使うとjQueryからvanilla JSへの変換がチョー簡単になる

脱jQueryという流れで世の中進んでいます。使用するテーマによってはjQueryを読み込まないものも増えてきました。

そんな中、javascriptでコードを追加してカスタマイズをするときに、そのコードがjQueryのコードの場合、そのためだけにjQueryのライブラリを読み込まなければなりません。

それは避けたいですよね。

そうなると、jQueryからvanilla JSへコードを変換したくなるのですが、jQueryとvanilla JSのコードは一対一の対応がとれるわけではないので、簡単に置き換えるというわけにもいきません。

jQueryからvanilla JSへ書き換えるのはそれなりのスキルが必要なので初心者には難しいでしょう。

しかし、ご安心ください。

今なら、Chat GPTを使うことができます。

Chat GPTはコードを書くのがとても得意です。

jQueryのコードを貼り付けて、vanilla JSに書き換えて、と入力すると、直ぐに変換した結果を返してくれます。

Chat GPTでjQueryからvanilla JSに書き換える

例えば以下のようなコードがあったとします。

$(function() {

  var $list, $newItemForm;
  $list = $('ul');
  $newItemForm = $('#newItemForm');

  $newItemForm.on('submit', function(e) {
    e.preventDefault();
    var text = $('input:text').val();
    $list.append('<li>' + text + '</li>');
    $('input:text').val('');
  });

  $list.on('click', 'li', function() {
    var $this = $(this);
    $this.remove();
  });

});

Chat GPTにjQueryからvanilla JSに書き換えてもらいました。

document.addEventListener('DOMContentLoaded', function() {
  var list, newItemForm;
  list = document.querySelector('ul');
  newItemForm = document.getElementById('newItemForm');

  newItemForm.addEventListener('submit', function(e) {
    e.preventDefault();
    var text = document.querySelector('input[type="text"]').value;
    var listItem = document.createElement('li');
    listItem.textContent = text;
    list.appendChild(listItem);
    document.querySelector('input[type="text"]').value = '';
  });

  list.addEventListener('click', function(e) {
    if (e.target.tagName === 'LI') {
      e.target.parentNode.removeChild(e.target);
    }
  });
});

このコードでは、DOMContentLoadedイベントを使用して、ページが完全に読み込まれた後にスクリプトが実行されるようにしています。また、querySelector()メソッドを使用して、DOM要素を取得し、addEventListener()メソッドを使用して、イベントリスナーを登録しています。createElement()メソッドを使用して、新しい<li>要素を作成し、appendChild()メソッドを使用して、リストの最後に追加しています。また、textContentプロパティを使用して、新しい要素のテキストを設定しています。

list要素に対してクリックイベントを登録し、event.targetプロパティを使用して、クリックされた要素のタグ名をチェックし、parentNodeプロパティを使用して、クリックされた要素をリストから削除しています。

Chat GPTでjQueryをvanilla JSに置き換えることでサイトを高速化

運用期間が長いサイトの場合、どこかしらにjQueryを使用している箇所が残っていたりします。

そういうjQueryのスクリプトはどこからコピペしてきたやつでしょう。

そういうスクリプトをvanilla JSに置き換えていくことで、サイトを脱jQueryにすればサイトが高速化されると思います。

まとめ

Chat GPTはコードを書かせると本当に有能だし便利です。

コードは動作確認できますからChat GPTが吐き出したコードが使えるかどうかはすぐに確認ができます。

ネットで検索して見つけたコードがjQueryしかなく、面倒だからvanilla JSに誰か書き換えてくれないかな？と思ったことがなんどもありますが、これからはChat GPTがそれをやってくれます。