ChatGPT を使って jQuery なしで JavaScript コードを書き直す

jQuery を JavaScript に書き直すための ChatGPT 用プロンプト

ChatGPT を使って jQuery のコードを純粋な JavaScript に書き直したい場合は、chat.openai.com にアクセスし、次の明確で簡潔なプロンプトを入力してください:

次の jQuery コードを、同じ機能を保ちながら vanilla JavaScript に書き直してください。最新の JavaScript 標準(ES6+)との互換性を確保してください。また、該当する場合は Drupal.behaviors の利用も含めてください。[ここに jQuery コードを貼り付け]

プレースホルダーの [ここに jQuery コードを貼り付け] を、変換したい実際の jQuery コードに置き換えてください。

jQuery から JavaScript へのコード変換の例です:

(function ($, Drupal) {
  Drupal.behaviors.myBehavior = {
    attach: function (context, settings) {
      // ページ読み込みごとに要素ごとに一度だけ実行する
      $('.my-class', context).once('myBehavior').each(function () {
        $(this).click(function () {
          alert('Element clicked: ' + $(this).text());
        });
      });

      // クラスを動的に追加する例
      $('.toggle-button', context).once('toggleBehavior').click(function () {
        $('.toggle-target').toggleClass('active');
      });
    }
  };
})(jQuery, Drupal);

jQuery なしで書き直した JavaScript コード:

(function (Drupal) {
  Drupal.behaviors.myBehavior = {
    attach: function (context, settings) {
      context.querySelectorAll('.my-class').forEach(function(element) {
        if (!element.dataset.myBehaviorAttached) {
          element.dataset.myBehaviorAttached = true;
          element.addEventListener('click', function () {
            alert('Element clicked: ' + element.textContent);
          });
        }
      });

      context.querySelectorAll('.toggle-button').forEach(function(button) {
        if (!button.dataset.toggleBehaviorAttached) {
          button.dataset.toggleBehaviorAttached = true;
          button.addEventListener('click', function () {
            document.querySelectorAll('.toggle-target').forEach(function(target) {
              target.classList.toggle('active');
            });
          });
        }
      });
    }
  };
})(Drupal);