2021年後半から2年程度の Drupal でのフロントエンド開発展望

Drupal Advent Calendar 2021 の8日目の記事です。

はじめに

今年の後半から今後2年程度で Drupal のフロントエンド開発に影響がありそうな内容を個人的な意見やコメントを交えて列挙してみました。Drupal プロジェクトでのフロントエンド開発の際に参考になればと思います。

2021 後半で年内までに実現した、または予想されること

Node 16 の安定版がリリースされた (2021/10/26)

• Node.js に付属する npm が 7 にバージョンアップ。npm のロックファイルのバージョンが上がる
  • yarn 1.x のロックファイルがサポートされるため、yarn.lock のみをレポジトリに置けば良いと思う

Drupal 9.3 がリリース (2021/12 予定)

• CKEditor 5が含まれるようになる
  • Drupal 10 では CKEditor 5 のみになると思われるので、このタイミングから検証を始めたほうが良いと思う
  • CKEditor 4 からのバージョンアップが必要なため関連するモジュールもチェックが必要
• Opera mini 用のスタイルシートのサポート廃止
  • ベンダープリフィクス付きの一部のスタイルの削除

2022 年前半までに予想されること

Drupal 10 のリリース (2022/06 予定)

• IE のサポートが廃止
  • Cookie に Samesite 属性を設定できるようになる
  • 使用可能になる CSS プロパティや JavaScript API が増える（Can I use 参照）
    • TC39 の Finished Proposals にある機能の大半がトランスパイルなしに使用可能になる
    • TC39 で採択された機能以外では、Fetch API、XPathによる DOM の選択、Intersection Observer API など
    • Views で作成するような動的なページでもグリッドレイアウトが利用しやすくなるはず
      • IE のグリッドレイアウトでは固定レイアウトしか想定されていないため
  • Drupal 9.3 で Opera mini のサポートも廃止されているため、添付される JavaScript と CSS のサイズが削減される見込み
• CKEditor のバージョンが 5 のみになる予定
  • Drupal 10 になったときのモジュール名次第では、Drupal 9.3 以降での検証後にも作業が発生する可能性がある
• Drupal コアでの jQuery による記述が非推奨に
  • ESLint の設定は追加済み
  • IE のサポート廃止とあわせれば、JavaScript のバンドルサイズがさらに小さくなる見込みなので、ページ表示のパフォーマンスには好影響になる可能性が高い
  • jQuery UI プラグインは Drupal コアからは完全に取り除かれる予定
  • DOM の選択やイベントの発火は素の JavaScript で書いていくことを推奨
  • jQuery.once の代替は Drupal コアにある once.js で対応

ES2022 がリリース (2022/06 予定)

• TC39 の Finished Proposals の、Expected Publication Year が 2022 になっている項目がリリースされる見込み
  • Top-level await は、現時点において Drupal 10 のサポートブラウザすべてで使用可能なので、非同期処理がかなり書きやすいと思う
    • コーディング規約ではどう取り扱われるかは現状不明なので、慎重を期すならば貢献モジュール・テーマでは様子を見た方が良いかもしれない
• TC39 の提案にある Stage 3 からリリースされるものが出るかもしれない

2023 年前半までに予想されること

Dart Sass で @import の記法が廃止 (2022/10 予定)

• 2022/10 に廃止予定
  • Dart Sass の最新版を使うつもりなら、@use、@forward の組み合わせで @import の置き換えが必要（参考）
  • @import よりもインパクトは少ないかもしれないが、calc() 関数外の除算の記法も将来修正されるので同時に直した方が良いと思う

ES2023 がリリース (2023/06 予定)

• TC39 の提案からリリースされるものが出るかもしれない

Node.js のライブラリは ES Modules の記法に移行が進む？

• 2021/04 に Node 10 がサポートされなくなったので、現行のサポートバージョンでは ES
  Modules で記述可能になった
  • よって、Node.js で使用するライブラリは ES Modules に移行が進む可能性がある
• 一方ブラウザで使用するライブラリは現時点ではなんとも言えない
  • ライブラリ単体で ES Modules に対応したとしても、Rollup や Webpack などのバンドラーでソースコードをまとめないと動かせないことが多いため、ブラウザで使用するライブラリは対応が進みづらいと思う
  • 現状でも、 ブラウザでも扱えるように UMD (Universal Module Definition) 形式がライブラリに同梱されることが多い
  • Drupal での ES Modules を使った画面開発への対応（コーディング規約の策定など）は不明

Drupal では yarn 2.x 以降の機能をサポートする？

• Drupal の開発者は yarn 2.x から導入された機能のサポートに前向き
  • yarn 2.x 以降に増えた機能が ESLint や TypeScript と相性が悪いという情報もあるので、現行の最新である yarn 3.x 以降を使用するのならば、徹底的な検証を行う、または導入を見送っていったん様子を見た方が良いと思われる。

終わりに

Drupal のフロントエンド開発において、2021 年後半から 2023 年前半までの期間で一番大きい変更はやはり Drupal 10 のリリースだと思います。IE のサポート終了、コアのコードで jQuery が非推奨になるなど JavaScript 周りの変更が大きくなりそうです。（ただし、jQuery に関しては、色の入力にアクセシビリティの問題が存在したり、Drupal の core/misc/form.js で定義されている getSummary() 関数が jQuery の機能に依存していたりで完全には取り除かれないかもしれません）
こうなってくると、Drupal のフロントエンド開発も素の JavaScript を学習する必要性が高くなってくると思います。もし今まで、JavaScript の開発をほぼ jQuery のみで行ってきたのならばこの機会に JavaScript の文法や jQuery を使用しない記法を学習してみるのが良いでしょう。

• JavaScript Primer
  • ECMAScript 2015 以降の JavaScript の文法に関して書かれた電子書籍（日本語）
• You might not need jQuery
  • jQuery の関数を jQuery を使わずに実現するコード例が載っているサイト（英語）