Drupal9.3以降におけるjQuery.onceの扱いと置き換わったonceの利用方法について

ここ最近のDrupalアップデートの動向をみると過去より継続して依存しているjQueryから少しずつ脱却しているようにみえます。
その一環としてjQueryプラグインとして提供されているjQuery.onceが非推奨となり、今後は独立したonceとして提供されるようになりました。
今回は非推奨となったjQuery.onceからの脱却方法と置き換わったonceの利用方法を明記します。

jQuery.once とは

DrupalにおけるJavaScriptのコーディングは以下のようになっていますが、イベントに対し once を付与しない場合、ajax等何かしらページの要素が変わるタイミングで常にイベントがアタッチされる為、クリックイベントが複数回実行されたり等予期しない問題を起こす場合があります。
その為、 once を付与しページ読み込み時に1度だけイベントをアタッチするプラグインが提供されています。

(function ($, Drupal) {
  Drupal.behaviors.example = {
    attach: function (context, settings) {
      // クリックイベント(ajax等何かしらページ要素が置き換わる度にアタッチ).
      $('.example', context).on('click', function() {});

      // クリックイベント(ページ読み込み時にイベントアタッチ).
      $('.example', context).once('clickEvent').on('click', function() {});
    }
  };
})(jQuery, Drupal);

jQuery.once からの脱却方法

Drupal9.3.0以降、 jQuery.once が非推奨となり警告が表示される為、まずは警告が出なくなるよう対応を行う必要があります。
方法はライブラリ定義ファイル xxx.libraries.yml (xxxは任意のシステム内部名称) の書き換えのみでOKでJavaScript自体を編集する必要はありません。

編集内容は単純で core/jquery.once を core/once と core/jquery.once.bc に置き換えるだけです。

以下に編集方法の例を記載します。

Drupal9.2.x 以前の記載方法

global-styling:
  version: 1.0.0
  js:
    js/xxx.js: {}
  dependencies:
    - core/drupal
    - core/jquery
    - core/jquery.once

Drupal9.3.x 以降の記載方法

global-styling:
  version: 1.0.0
  js:
    js/xxx.js: {}
  dependencies:
    - core/drupal
    - core/jquery
    - core/once
    - core/jquery.once.bc

once の利用方法

新しく用意された once の実装方法について、例を以下に記載します。
例えば $('.example', context).once('clickEvent').on('click', function() {}); というクリックイベントを書き換えた場合、以下となります。

once('clickEvent', document.querySelectorAll('.example')).forEach(function (target) {
  $(target).on('click', function() {});
});

バニラJSを利用しセレクタを検索する為、以前よりコードは長くなっていますが、once イベント自体はjQuery依存から脱却出来ていることが分かると思います。

今回は jQuery.once に関する変更点をお伝えしましたが、DrupalのバージョンアップについてjQueryより少しずつ脱却しており今後もこのような変更があればお伝えしていきたいと思います。
また、今回記載したものは一例となりますので詳細な情報を知りたい場合、関連リンクのマニュアルを参照してください。