Magento 1からMagento 2へ
Magento 2は2015年に正式にリリースされました。Magento 1と比べると、変更点もたくさんあります。一番耳にするのはサイトのスピード向上やUIも使いやすくなるということでしょう。
Magentoの開発者の視点から見ると、これらは全部FPC機能、VarnishへのサポートなどのMagento 1にないもののおかげだと思います。
その中でjavascript部分の変更もとても重要です。
今回私のプロジェクトでもフロントエンドのjavascriptを扱うことになったので、Magento 2におけるjavascriptについて実験していきましょう。
Magento 1のjavascript
Magento 1のjavascriptをいうと、prototype.jsが必ず言及されますね。
Magento 1は2007年に始まったプロジェクトで、jQueryもまだ普及する前でしたので、Magentoの開発者は当時安定していたprototype.jsを選定したらしいです。
私も様々なシーンでprototype.jsにお世話になりました。
しかし、時が流れjQueryは普及し始めました。
Magento 1でもjQueryを利用したいなと考えた開発者は当時たくさんいたと思います。
ただjQueryを導入しようとした開発者は必ず一度ぶち当たったことがあると思いますが、prototype.jsはjQueryと共存が難しいのです。
この問題に一応解決法もあります。var jQuery=$.noConflict()と＄を全部jQueryに置き換える作業が必要です。一時的に解決しますが、継続開発やアップデートには不向きです。
Magento 1のjavascriptの導入には、layoutのxmlの編集によって実現されます。
つまり、外部の.jsファイルをphtmlファイルで動的に導入はできません。シーンに応じたjsの選択の有無のコントロールが難しいのです。
様々な事例も調べてみましたが、phtmlファイルにinline scriptを書く開発者もたくさんいます。
モダンプログラミングの観念から、inline scriptを書くと、プロジェクトが大きくなればなるほど、コードの管理、アップグレード、チームワークもやりづらくなります。
ほかにも２つ体感する問題が存在します。
- phtmlファイルの中のjavascriptがレンダリングをブロックしたら、ウェブページが表示できなくなります。
- サーバの設定やエクステンションなどによって、inline scriptはまったく起動しない場合もあります。これはブラウザがサイトのCSPルールに従って、inline scriptの実行を拒否したからです。
Magento 2スタイルのJavascript
Magento 2はprototype.jsの代わりに、RequireJS、jQuery、UnderscoreJS及びKnockoutJSの4つのライブラリを導入しています。
そこで一番重要なのはRequireJSによるjavascriptのモジュール化です。
今後どんなjavascriptを書いても、RequireJSは必ず利用します。
モジュール化することで、機能の管理がしやすくなって、チームワークの効率向上にも繋がります。
Magento 1において、phtmlファイルにjavascriptを書くのは不向きで、phtmlファイル中で必要なjsライブラリを必要な時のみ導入するのはそもそもできません。
Magento 2では、phtmlファイルでRequireJSによる動的にコントロールが可能になりました。これも開発者にとって喜ばしいことでしょう。
さらに、もっと便利なところもあります。data-mage-initのattributeを使って、特定のelement要素にjsを紐付けて、初期処理できます。
今回はMagento 1のjavascriptの不利な点と完全に改新されたMagento 2用のjavascriptについて紹介しました。
実は初期処理の方法はもう一つあります。
<script type=”text/x-magento-init”>で、コードの可読性も向上します。
次回はコードも含めて、実際に動ける「サイトを見たお客様に送料無料クーポンを配布」の例を披露します。RequireJSや<script type=”text/x-magento-init”/>のこともカバーします。
では、また後日のPart 2で会いましょう。
弊社ではMagentoを利用した多機能ECサイトの構築・越境EC／中国越境ECの開発をして企業様をサポートしています。 ご興味ある方は是非問い合わせください。
