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

2023年3月10日2023年4月1日

a laptop computer sitting on top of a wooden table

1
URLをコピーしました！

脱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プロパティを使用して、クリックされた要素をリストから削除しています。