去年ヨーロッパのMagentoコミュニティイベントに大量に参加したところ、今年はMagentoフロントエンドにとってエキサイティングな年になるという予感が募ってきました。
そこでMagentoフロントエンドにこれから見たい変化と現状について自分なりにまとめてみました。
もくじ
1. Magentoの現状のフロントエンドのイケてない点
2. Magentoフロントエンドの銀河への道筋
3. Magento開発者の銀河への道筋
1. Magentoの現状のフロントエンドのイケてない点
2015年Magento2.0のリリース以来世界中のデベロッパーからフロントエンドの扱いづらさを叩かれ続けていたMagento。
主に批判されているのは以下のような点です。
・jQueryをメイン機能として採用していること。（大規模プロジェクトには向かないレガシー技術という声が多い）
・Knockout.JSを始めとする大量のJSライブラリを導入したことで可読性が非常に悪いこと。
・JSの問題は実はUIコンポーネント（XMLレイアウト, Blockクラス, PHTMLテンプレート、JSバインディングのMIX）という化け物みたいな複雑な問題の一角に過ぎないこと。
Magentoフロントエンドは開発、デバッグは難しいしパフォーマンスもなかなか出にくいという問題がありました。
2. Magentoフロントエンドの銀河への道筋
とはいえコミュニティドリブンが売りのMagentoなのでこういったフィードバックを取り入れてよりモダンで簡潔なフロントエンドにしていこうという動きが活発です。
大きな流れではPWAに移行していくことは固まっていている印象で、現在Magento公式の PWA Studio か、Vue StorefrontやScandiPWA などのテーマとフロントエンドをごっそり入れ替えるといった方法があります。
VueStorefrontはその名の通りVue、他の2つはReactをベースに使っています。
MagentoがPWAに移行していきたい理由としては
・API中心のアーキテクチャにすることで単方向データフローを実現し、開発、デバッグを容易にすること
・コードの可読性を上げること
・パフォーマンスを上げること
・モバイルファーストのアプリにしていきたいこと
などがあり、ポイントは開発体験、顧客体験の向上だと思います。
PWA Studio、Vue Storefront、Scandiの中でどのソリューションが優れているかということは今のところなさそうで、気に入ったものを使うのがいいというのが通説のようです（ヨーロッパのMagentoイベントでは大体PWA Studioを推していましたが）。
ちなみにVue StorefrontはShopifyなど他のECパッケージにも対応しています。
3. Magento開発者の銀河への道筋
すごく魅力的で、今すぐMagentoの標準フロントエンド捨てて全部PWAに変えよう！
となるかも知れないのですが、どうやら今すぐにとはいきそうにありません。。
Magentoのコミュニティイベントなどの発表を聞いていると、PWAはもう準備できてる！という内容が多く、PWA Studioなどを使って実際にローンチしているサイトも出てきているようですが、
PWA Studioは日本語で使うにはまだまだ厳しいこともあるようです。
PWA-Studio(Magento2)で遊んでみた。(2019/12) - Qiita
PWA Studioのマイルストーンを見る限りは機能面の開発は終わってエクステンションの手に入りやすさやパフォーマンスの問題を残すのみ…のように見えるのですが、MagentoのGraphQLエンドポイントがまだ完全に準備できてるわけではないのがやはり大きそうです。
大体90%くらいのカバレージということ。
決済方法を新たに開発しないといけないというのも問題ですね。
またMagento2.4からはカタログ、顧客、カートモジュールを手始めに新しいマイクロサービスアーキテクチャに切り替えがあり、それがGraphQLにも大きく影響を与えることになります。
似たような問題はVue StorefrontやScandiPWAでも出てくるであろうことは容易に想像できるので、やはりまだ怖くて踏み切れない感じですね。。
近いうちにGraphQL100%カバーされるのでしょうか。されてほしい。
PWA Studioが日本使用に耐えられるようになるまでの間に少しでもパフォーマンスを上げたフロントエンドを手に入れるために、しばらくの間はMageSuite.ioを使うという手もあります（詳細はまた次回にでも）。
とはいえいずれはPWA（めちゃくちゃ早い、低コスト、モバイルファースト、スマホにインストール可能、クロスブラウザ対応、オフラインモード）に切り替えなければECサイトオーナーとしても開発側としても淘汰されていってしまうので、なんとか時間をとって準備していきたいところです。
多言語対応への貢献は積極的にしていかねばなと思っています。あとEC x PWA勉強会とかやりませんか。
おまけ - リソースなど（この部分更新していきます）
Magento x PWAイベント
Reacticon
MagentoのフロントエンドのリーダーともいえるYireo主催のイベントで、MagentoのPWAがメインの3日間のイベントです。でもオランダ…
公式リソース
ScandiPWA Documentation
Introduction to Vue Storefront
PWA Studio Overview | Magento
動画リソース
Vue Storefront Starting Guide 2019 - YouTube
Progressive Web Application (PWA) Learning ... - Magento U