本記事では、Shopify開発でなぜJavaScriptが多用されるのかをやさしく解説し、苦手意識を持つ方でも一歩踏み出せるようサポートします。
Shopifyは、誰でも気軽にノーコードでオンラインストアを立ち上げることができる便利なECプラットフォームです。
基本的なカスタマイズであれば、コーディングの知識がなくても十分に対応できますが、もう一歩踏み込んだ「自分だけのストア」に仕上げたい場合、LiquidというShopify独自のプログラミング言語の習得が必要になってきます。
ところが実際に開発を進めていくと、Liquidだけでは完結できない場面が多く、JavaScriptという“もうひとつの壁”に直面することになります。「Liquidを覚えれば十分かと思ったのに･･」と感じる方も少なくないのではないでしょうか。
本記事では、そんな疑問――「ShopifyにはLiquidがあるのに、なぜJavaScriptが多用されるのか？」について、できるだけわかりやすく紹介していきたいと思います。
結論、Liquidは表示前、JavaScriptは表示後に働くから
なぜLiquidではなく、JavaScriptが多用されるのか。その理由を一言で言えば、「Liquidは表示前、JavaScriptは表示後に働くから」です。
Liquidは、Shopifyのサーバー側でHTMLを生成するためのテンプレート言語です。ページが表示される前に、商品情報やコレクション情報などのデータを元にHTMLを組み立ててくれるのが役割です。つまり、ページが一度表示されてしまえば、Liquidの仕事はそこで終了します。
一方で、JavaScriptはページが表示された後、ユーザーのブラウザ上で動き続けます。そのため、ユーザーが「サイズで絞り込みたい」「並び順を変えたい」といった操作をした際には、JavaScriptがその動きを受け取り、リアルタイムで画面の表示を変えることができるのです。
この「表示後に動けるかどうか」の違いこそが、ShopifyでJavaScriptが多用される大きな理由です。
例えば、こんなシーンでJSが重宝される
Shopifyのストアで、ユーザー体験を高めるためには「その場で変化するUI」が重要になります。そして、そうした“動きのある”仕組みは、JavaScriptが得意とする領域です。
たとえば、次のようなシーンでJavaScriptは重宝されています。
絞り込み検索や並び替え機能
再読み込みなしで「新着順」「価格の安い順」「人気順」などに商品一覧の並び替えができる仕組みは、JavaScriptの力によって実現しています。
カート内の動的な表示
商品をカートに入れたときに、「カートに追加しました！」と一瞬だけ表示されるメッセージや、カートアイコンの横に「（1）」のようにリアルタイムで数字が増える演出も、JavaScriptで制御されています。
在庫状況のリアルタイム表示
「残りわずか」などの表示を、ユーザーの操作に応じて動的に切り替える処理にもJavaScriptが使われます。特に、バリエーション（色・サイズなど）を選択した後に在庫表示が変わるような動きは、Liquidだけでは対応が難しい場面です。
このように、ユーザーの操作に応じて画面を“今この瞬間”に変化させる必要がある場面では、JavaScriptの存在が欠かせません。
JavaScriptの“壁”を一緒に越えていこう
このブログでは、Shopifyを学習する中で「JavaScriptが苦手」「構文がよくわからない」と感じている方に向けて、少しでもハードルを下げる記事をお届けしていきます。
主に、「Shopifyのこの部分では、こういうJavaScriptが使われているよ」という具体的なシーンをベースに、構文や関数の使い方をやさしく紹介していく予定です。
もちろん、これを読むだけで全てを理解し、自由自在にカスタマイズできるようになるわけではありません。ただ、「あ、こんなときにこの書き方するんだな」と、少しでも慣れ親しんでおくことで、JavaScriptという“モンスター”がぐっと身近な存在になるはずです。
かく言う私自身も、現在もJavaScriptに対して強い苦手意の持つ主。だからこそ、同じ目線で、できるだけシンプルに、そして実際のShopify開発に役立つ視点で解説していきたいと思っています。
「JavaScriptを学ぶ」というよりは、「Shopifyをもっと自由にカスタマイズするための稽古」として、ぜひ一緒に取り組んでいきましょう！
