Shopifyでストアの運営やカスタマイズを進めていくと、JavaScriptが想像以上に多く使われていることに気づきます。
最初はLiquidやテーマエディタだけでもある程度の見た目は整えられますが、細かな動きや機能を加えたいときに必要になるのがJavaScriptです。
少し大げさに聞こえるかもしれませんが、Shopifyで上級レベルの開発者を目指すなら、JavaScriptの経験と実力が大きな鍵になると感じています。私自身も学びながら実感しているところです。
そこで今回は、JavaScript初級レベルの方に向けて、Shopifyストア開発でよく使われる「基本中の基本」の構文や関数を紹介していきます。すぐに実践で使える内容というよりは、次のステップに進むための“土台”となる要素を厳選しました。
題して「Shopify × JavaScript入門編」。第1回目のテーマは「配列メソッド」です。私もまだまだ勉強中の身ですが、できるだけシンプルに、わかりやすくお伝えできればと思います。
そもそもなぜJavaScriptが多用されるの？
Shopifyには、独自のプログラミング言語のLiquidがありますが、なぜJavaScriptが多用されるのでしょうか。
その理由は、Liquidだけでは完結できない場面が多いためです。
以下の記事に、理由と具体的な活用シーンをまとめましたので、ぜひチェックしてみてください。
ShopifyではLiquidがあるのになぜJavaScriptが多用されるの？
配列メソッドとは
JavaScriptに限らず、さまざまなプログラミング言語で使われる「配列（Array）」とは、複数のデータをまとめて管理できる“箱”のようなものです。
たとえば、商品タグ、バリエーション、ユーザーが選んだオプションなど、複数の値をひとまとめに扱いたい場面で役立ちます。
この配列に対して「どのように処理をしたいのか」を命令する手段として使われるのが、「メソッド（method）」です。メソッドとは、配列などのデータに対して特定の操作（追加、削除、検索、並べ替えなど）を行うための命令のことを指します。つまり、「どう処理したいか」という“方法を指定する命令”だと考えるとイメージしやすいでしょう。
たとえば、「横浜観光地名簿」という配列があるとします。この名簿を五十音順に並び替えたいとき、「sort」というメソッドを使えば、わざわざ1つずつ比較しなくても、命令ひとつで並び替えができます。これが配列メソッドの力です。
Shopifyによく登場するJs「配列メソッド」
ここまで「配列」や「メソッド」のざっくりとした意味について紹介してきましたが、ここからは実際に、Shopifyのカスタマイズでよく登場する「配列メソッド」をいくつか紹介していきます。
実際のShopifyテーマ（Dawnなど）に使われているJavaScriptコードは、構造も記述もかなり複雑です。JSに慣れていない人にとっては「え、何してるのこれ？」となることも多いでしょう。
そこで今回は、できるだけシンプルなコードを例に使いながら、基本的な配列メソッドの役割をざっくりつかんでいけるようにまとめました。
イメージとしては、英語の長文読解をする前に覚えておくべき「頻出英単語」のようなもの。
文法や全文解釈はまだ無理でも「この単語だけでも知っておけば、だいぶ読みやすくなるよ！」「実際のコードは複雑だけど、シンプルに言うとこんなイメージだよ」というレベル感でお届けします。
頻出メゾッド
| メソッド名 | 用途（どんなときに使う？） |
|---|---|
forEach() |
配列の中身を1つずつ処理したいとき |
map() |
配列の中身を変換して新しい配列を作りたいとき |
filter() |
条件に合う要素だけを取り出したいとき |
find() |
条件に合う最初の1つだけを取り出したいとき |
includes() |
配列に特定の値が含まれているかチェックしたいとき |
push() |
配列の最後に要素を追加したいとき |
pop() |
配列の最後の要素を取り除きたいとき |
sort() |
配列を並び替えたいとき |
reverse() |
配列の順番を逆にしたいとき |
slice() |
配列の一部を抜き出して新しい配列を作りたいとき |
join() |
配列の要素を1つの文字列にまとめたいとき |
では、以下にて
.foreach()
Shopifyでは、カートページで「合計額を表示したし」といった場面で 「.forEach()」が使われます。(*サンプルコードはShopifyで実際使われるコードと異なります。仕組みと使い方を理解するためのコードです。)
// カートに入っている商品のリスト（例）
const cartItems = [
{ name: "Tシャツ", price: 2500, quantity: 2 },
{ name: "ジーンズ", price: 7000, quantity: 1 },
{ name: "キャップ", price: 1500, quantity: 1 }
];
let totalAmount = 0;
cartItems.forEach(item => {
totalAmount += item.price * item.quantity;
});
console.log("合計金額:", totalAmount);
Shopify小技のフリーマーケット
Shopifyを運営する中で、「こんなことできないのか？」という疑問は尽きません。特に初心者にとっては、難しく感じるけれども、実はすぐに活用できる小技がたくさんあります。
当サイトでは、実際に試してみて有効だったShopifyの小技を、誰でも簡単に再利用できるよう提供しています。
少し高度なLiquidのテクニックやアプリを使わずに実装できる機能、そしてカスタマイズのヒントになるアイデアなど、さまざまな情報をご用意しています。
現在、出品者は私1人ですが、 これからさらに充実させていく予定です！もしもShopifyでの設定やカスタマイズで悩んでいる方がいれば、お気軽にお問い合わせください。
