Magentoは2015年に正式にリリースされました。Magento 1と比べると、変更点もたくさんあります。一番耳にするのはサイトのスピード向上やUIも使いやすくなるということでしょう。
Magentoの開発者の視点から見ると、これらは全部FPC機能、VarnishへのサポートなどのMagento 1にないもののおかげだと思います。
その中でjavascript部分の変更もとても重要です。
今回私のプロジェクトでもフロントエンドのjavascriptを扱うことになったので、Magentoにおける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を書くと、プロジェクトが大きくなればなるほど、コードの管理、アップグレード、チームワークもやりづらくなります。
ほかにも２つ体感する問題が存在します。
Magentoはprototype.jsの代わりに、RequireJS、jQuery、UnderscoreJS及びKnockoutJSの4つのライブラリを導入しています。
そこで一番重要なのはRequireJSによるjavascriptのモジュール化です。
今後どんなjavascriptを書いても、RequireJSは必ず利用します。
モジュール化することで、機能の管理がしやすくなって、チームワークの効率向上にも繋がります。
Magento 1において、phtmlファイルにjavascriptを書くのは不向きで、phtmlファイル中で必要なjsライブラリを必要な時のみ導入するのはそもそもできません。
Magentoでは、phtmlファイルでRequireJSによる動的にコントロールが可能になりました。これも開発者にとって喜ばしいことでしょう。
さらに、もっと便利なところもあります。data-mage-initのattributeを使って、特定のelement要素にjsを紐付けて、初期処理できます。
今回はMagento 1のjavascriptの不利な点と完全に改新されたMagento用のjavascriptについて紹介しました。
実は初期処理の方法はもう一つあります。
<script type=”text/x-magento-init”>で、コードの可読性も向上します。
次回はコードも含めて、実際に動ける「サイトを見たお客様に送料無料クーポンを配布」の例を披露します。RequireJSや<script type=”text/x-magento-init”/>のこともカバーします。
では、また後日のPart 2で会いましょう。
Magento のフロントエンド開発や既存サイトの改修を相談したい場合は、Magento構築・リニューアル支援のページもご確認ください。
Magento 1はprototype.jsに依存しており、jQueryとの共存が難しく、phtmlファイルへのインラインスクリプト記述が常態化して大規模プロジェクトでの管理・アップグレードが困難でした。MagentoではRequireJS・jQuery・KnockoutJSを採用し、JavaScriptのモジュール化と動的ロードを実現しています。
機能ごとにJavaScriptをモジュール化できるため、コード管理とチーム開発の効率が向上します。またphtmlファイルからRequireJSで必要な時だけ必要なモジュールを動的に読み込めるため、ページごとに最適化されたJS配信が可能です。
主に2つあります。HTMLのdata-mage-init属性を使って特定のDOM要素にJSを紐付ける方法と、
View Comments