Adobe Commerce / Magento Open Sourceのフロントエンドの課題をどうするか〜その1

あっという間に2024年の第1四半期が終わろうとしている状況で、4月には1年ぶりの新バージョンである「2.4.7」がリリースされる予定となっています。
さて、このシリーズでは2015年11月のMagento 2.0（ここではあえて当時の名称のままにしておきます）の正式リリース以降、ずっと大きな変更がないまま過ぎているフロントエンドの課題について取り上げたいと思います。

約10年間変化がないフロントエンド

Magento2系、つまりは今のAdobe Commerce / Magento Open Sourceがリリースされたのは2015年の11月のことです。
すでに9年が経過している状況ですが、技術面で大きな変更というのはいままで1回も行われていません。
GraphQL対応や複数拠点在庫対応、Page Builderなどの機能追加・拡張はありましたが、フロントエンドは局所的な仕様変更やライブラリのバージョンアップがある程度にとどまっています。

フロントエンド周りでよくいただくご相談

抜本的な進歩がないMagento2系のフロントエンド仕様に対して、ブラウザやフロントエンド実装手法は日々進化し続けています。
その中でよく頂く相談としては、

  • Core Web Vitalsのスコアをあげたい
  • WebPに対応したい
  • ヘッドレス構成で運用したい

といったものがあげられます。
これらの内容について、次回以降深堀りをしていきたいと思います。

技術要素のおさらい

さて、フロントエンドの深堀りをしていく前に、Magento2系のフロントエンドを構成する技術要素についておさらいしておきましょう。
大きなものとしては次のようなものがあります。

  • HTML 5 / CSS 3
  • jQuery
  • RequireJS
  • knockoutJS
  • UI Component
  • LESS / Grunt

よく知られているものと、そうでないものがあると思います。
この構成は2015年から変わっていません。
2024年現在であまり見かけないものとしては、

  • RequireJS
  • knockoutJS
  • UI Component

あたりでしょうか。
UI ComponentはMagentoフレームワーク独自の実装ですが、RequireJSとknockoutJSに強く依存しています。
この2つのライブラリは2019年以降新しいバージョンがないまま経過しています。
（RequireJSは2018年8月。knockoutJSは2019年11月が最終リリース）

進化の早いJavaScript界隈にあって、4年以上新バージョンのリリースがないのはかなりよろしくない状況であると言ってよいでしょう。

抜本的な見直しを阻む要素

では、フロントエンド関係の抜本的な見直しがされないのはなぜなのでしょうか。
理由はいくつか考えられます。例えば下記のようなものです。

  • 作り込みすぎたUI Component
  • 過去バージョンとの互換性問題
  • PWAStudioの存在
  • AEM（Adobe Experience Manager）の存在

これらについて個別に解説していきましょう。

作り込みすぎたUI Component

UI Componentは、現在のMagento2系に含まれる形でリリースされました。
2015年当時としては良かったのかもしれませんが、多岐にわたるコンポーネントが作り込まれた結果として「リプレースが難しい」という状況に陥っています。

一部のテーマやソリューションではUI Componentを利用せず、完全に置き換えているものもあるくらいです。
前述の通り、依存しているknockoutJSやRequireJSが更新を停止している点も問題視されるところです。

過去バージョンとの互換性問題

比較的現在のAdobe Commerce / Magento Open Sourceは旧バージョンとの互換性を重視する傾向にあります。
以下のような仕様変更が行われたことはありますが、比較的「廃止予定（Deprecated）」とマークされた機能については延命させているように感じます。

  • メールテンプレートのレガシーモード廃止（2.4.4で廃止）
  • XML Update機能の廃止（2.3.4では意思）
  • 商品検索をElasticsearch / OpenSearchのみに変更（2.4.0で変更）

Github上の不具合修正の際も、「改修後の処理が他の機能やサードパーティ製エクステンションなどに影響しないように配慮せよ」と要求がつくことがあるくらいです。
ただ、後方互換性を重視しすぎるがために大掛かりな変更に踏み切れていないようにも思えるため、ここは判断の難しいところではないだろうかと思いはします。

PWAStudioの存在

2.3系のリリースと前後する形で登場した「PWAStudio」。現在も開発が続けられている、公式プロジェクトの1つです。
PWA（Progressive Web Application）が話題だった頃に、GraphQLのサポートと合わせてリリースされたAdobe Commerce / Magento Open SourceのヘッドレスECリファレンス実装の形といえます。

ただ、PWAStudioは導入するために下記のものが必要になるという点で、かなりのコスト増を利用者側に求めていました。

  • Adobe Commerce / Magento Open Source用とは別のフロントエンド用インフラ
  • ReactJSなどの知識と経験
  • PWAStudio用のテーマ「Venia」への理解

多言語化などの課題が当初はあったほか、導入には色々とカスタマイズ・調整が必要ということもあって中々ハードルの高い代物であったように思います。
なんにしてもPWAStudioが登場したことによって、標準テーマに対する改良がおざなりになった感があり、それが今でも続いているように思われます。

AEM（Adobe Experience Manager）の存在

そして極めつけはAEMという存在です。
大規模なプロジェクトでは、AEMで構築したサイトに対してAdobe Commerceから商品情報などを提供する構成を取ることがあります。この場合、Adobe Commerce側はヘッドレス運用となるのでフロントエンドのUI機能さほど求められません。どちらかといえばREST APIやGraphQLの対応領域やパフォーマンスのほうが重視されます。

この構図は「PWAStudioがAEMに置き換わっただけ」、とも言えますが、既にAEMで構築済みのサイトを持っている事業者にとってはある種当然の判断かもしれません。

どちらにしてもAdobe Commerce / Magento Open Sourceとしての標準のフロントエンド実装はあまり重要視されていない状況に変わりはありません。
これらの流れが次に挙げる「標準テーマの行方」という話題につながってくるわけです。

標準テーマの行方

実際問題として、これらの技術要素に立脚しているAdobe Commerce / Magento Open Sourceに付属する「Luma」テーマについては、将来的に廃止される噂がでています。
以下は2022年2月に公開された、Mage-OS（Magento Open Sourceのフォークプロジェクト）公式サイトの記事の抜粋です。

There was a lot of talking
（中略）
Even though there is little publicly visible output coming from these efforts, we believe it has been extremely valuable just to get an alignment on what the community needs from Adobe, and what Adobe is willing to provide.
（中略）
- Luma will be deprecated, but not on short term
（中略）
It is much clearer now what Adobe’s strategy is regarding Open Source, and that is a big win.

Mage-OS update January 2022

「今すぐに」でないけれど、将来的にはという会話がされています。
温度感はあれど、どこかのタイミングで動きがあるのかもしれません。

次回予告

次回は冒頭に挙げた以下の3つのよくあるご相談から、WebPに関する話題を取り上げたいと思います。

  • Core Web Vitalsのスコアをあげたい
  • WebPに対応したい
  • ヘッドレス構成で運用したい