Shopifyのカスタマイズに役立つ基本的なJavaScript配列メソッド11選の役割をざっくりつかんでいけるようにまとめました。
Shopifyでストアの運営やカスタマイズを進めていくと、JavaScriptが想像以上に多く使われていることに気づきます。
最初はLiquidやテーマエディタだけでもある程度の見た目は整えられますが、細かな動きや機能を加えたいときに必要になるのがJavaScriptです。
少し大げさに聞こえるかもしれませんが、Shopifyで上級レベルの開発者を目指すなら、JavaScriptの経験と実力が大きな鍵になると感じています。私自身も学びながら実感しているところです。
そこで今回は、JavaScript初級レベルの方に向けて、Shopifyストア開発でよく使われる「基本中の基本」の構文や関数を紹介していきます。すぐに実践で使える内容というよりは、次のステップに進むための“土台”となる要素を厳選しました。
題して「Shopify × JavaScript入門編」。第1回目のテーマは「配列メソッド」です。私もまだまだ勉強中の身ですが、できるだけシンプルに、わかりやすくお伝えできればと思います。
そもそもなぜJavaScriptが多用されるの？
Shopifyには、独自のプログラミング言語のLiquidがありますが、なぜJavaScriptが多用されるのでしょうか。
その理由は、Liquidだけでは完結できない場面が多いためです。
以下の記事に、理由と具体的な活用シーンをまとめましたので、ぜひチェックしてみてください。
ShopifyではLiquidがあるのになぜJavaScriptが多用されるの？
配列メソッドとは
JavaScriptに限らず、さまざまなプログラミング言語で使われる「配列（Array）」とは、複数のデータをまとめて管理できる“箱”のようなものです。
たとえば、商品タグ、バリエーション、ユーザーが選択した商品オプションや値段など、複数の値をひとまとめに扱いたい場面で役立ちます。
この配列に対して「どのように処理をしたいのか」を命令する手段として使われるのが、「メソッド（method）」です。メソッドとは、配列などのデータに対して特定の操作（追加、削除、検索、並べ替えなど）を行うための命令のことを指します。つまり、「どう処理したいか」という“方法を指定する命令”だと考えるとイメージしやすいでしょう。
たとえば、「2005年新着！夏の水着一覧」という配列があるとします。このリストを最安値順に並び替えたいとき、「.sort()」というメソッドを使えば、わざわざ1つずつ比較しなくても、命令ひとつで並び替えができます。これが配列メソッドの力です。
Shopifyによく登場するJs「配列メソッド」
ここまで「配列」や「メソッド」のざっくりとした意味について紹介してきましたが、ここからは実際に、Shopifyのカスタマイズでよく登場する「配列メソッド」をいくつか紹介していきます。
実際のShopifyテーマ（Dawnなど）に使われているJavaScriptコードは、構造も記述もかなり複雑です。JSに慣れていない人にとっては「え、何してるのこれ？」となることも多いでしょう。
そこで今回は、できるだけシンプルなコードを例に使いながら、基本的な配列メソッドの役割をざっくりつかんでいけるようにまとめました。
イメージとしては、英語の長文読解をする前に覚えておくべき「頻出英単語」のようなもの。
文法や全文解釈はまだ無理でも「この単語だけでも知っておけば、少しは読みやすくなるよ！」「実際のコードは複雑だけど、シンプルに言うとこんなイメージだよ」というレベル感でお届けします。
頻出メゾッド
| メソッド名 | 用途（どんなときに使う？） |
|---|---|
forEach() |
配列の中身を1つずつ処理したいとき |
map() |
配列の中身を変換して新しい配列を作りたいとき |
filter() |
条件に合う要素だけを取り出したいとき |
find() |
条件に合う最初の1つだけを取り出したいとき |
includes() |
配列に特定の値が含まれているかチェックしたいとき |
push() |
配列の最後に要素を追加したいとき |
pop() |
配列の最後の要素を取り除きたいとき |
sort() |
配列を並び替えたいとき |
reverse() |
配列の順番を逆にしたいとき |
slice() |
配列の一部を抜き出して新しい配列を作りたいとき |
join() |
配列の要素を1つの文字列にまとめたいとき |
では、以下にてサンプルコードを交えながら、各メソッドを紹介してまいります。(*サンプルコードはShopifyで実際使われるコードと異なります。仕組みと使い方を理解するためのコードです。 ブラウザのデベロッパーツールで挙動を確認してみてください)
.foreach()
Shopifyでは、カートページで「合計額を表示したし」といった場面で 「.forEach()」が使われます。
// カートに入っている商品のリスト（例）
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);.map()
Shopifyでは、税込み金額を計算・表示するといった場面で「map()」が使われます。
// 例：Shopifyの商品リスト（税抜き価格）
const products = [
{ id: 1, name: "Tシャツ", price: 2500, taxRate: 0.10 }, // 税率10%
{ id: 2, name: "ジーンズ", price: 7000, taxRate: 0.10 },
{ id: 3, name: "マグカップ", price: 1200, taxRate: 0.08 } // 税率8%（軽減税率など）
];
// map()を使って、各商品の税込み価格を計算し、新しい商品リストを作る
const productsWithTax = products.map(product => {
// 各商品の税込み価格を計算
const taxAmount = product.price * product.taxRate;
const priceIncludingTax = product.price + taxAmount;
// 新しいオブジェクトとして返す（元のオブジェクトに新しいプロパティを追加）
return {
...product, // 元の商品のプロパティをすべてコピー
priceIncludingTax: Math.round(priceIncludingTax) // 小数点以下を四捨五入
};
});
// 結果を確認
console.log("元の商品リスト:", products);
console.log("税込み価格を含む新しい商品リスト:", productsWithTax);.filter()
Shopifyでは、「在庫切れの商品は表示しない」といった場面で「.filter()」が活用されます。
// 元の商品リスト（在庫情報を含む）
const allProducts = [
{ id: 1, name: "Tシャツ", price: 2500, inStock: true },
{ id: 2, name: "ジーンズ", price: 7000, inStock: false }, // 在庫切れ
{ id: 3, name: "キャップ", price: 1500, inStock: true },
{ id: 4, name: "スニーカー", price: 9000, inStock: false } // 在庫切れ
];
// filter()を使って、在庫がある商品だけを選び出した新しいリストを作る
const availableProducts = allProducts.filter(product => {
// ここで一つ一つの商品（product）のinStockがtrueかどうかをチェックしている
product.inStock;
});
// 結果を見てみよう！
console.log("元の全商品リスト:", allProducts);
// 結果: 元の全商品リスト: [ {Tシャツ}, {ジーンズ}, {キャップ}, {スニーカー} ]
console.log("在庫がある商品リスト:", availableProducts);
// 結果: 在庫がある商品リスト: [ {Tシャツ}, {キャップ} ].find()
Shopifyでは、特定の商品IDを持つ商品だけをピンポイントで見つけたいときに「.find()」が役立ちます。絞り込み検索などで使われます。
// カート内の商品リスト（例）
const cartItems = [
{ id: 11111, name: "Tシャツ", price: 2500, quantity: 2 },
{ id: 22222, name: "ジーンズ", price: 7000, quantity: 1 },
{ id: 12345, name: "限定スニーカー", price: 15000, quantity: 1 }, // これを探したい！
{ id: 33333, name: "キャップ", price: 1500, quantity: 1 }
];
// find()を使って、IDが12345の商品を探す
const specificProduct = cartItems.find(item => {
// ここで一つ一つの商品（item）のIDが12345かどうかをチェックしている
item.id === 12345;
});
// 結果を見てみよう！
console.log("探した商品:", specificProduct);
// 結果: 探した商品: { id: 12345, name: "限定スニーカー", price: 15000, quantity: 1 }
// もし見つからなかった場合（例: ID: 99999を探す）
const nonExistentProduct = cartItems.find(item => item.id === 99999);
console.log("見つからない場合:", nonExistentProduct);
// 結果: 見つからない場合: undefined.includes()
Shopifyでは、特定のタグを持っているかを判定する時に「.includes()」が使われます。
// ある商品のタグのリスト（配列）
const productTags = [
"新着",
"コットン",
"セール品", // これがあるかチェックしたい！
"Tシャツ"
];
// includes()を使って、「セール品」のタグが含まれているかチェックする
const isSaleItem = productTags.includes("セール品");
// 結果を見てみよう！
console.log("この商品はセール品ですか？", isSaleItem);
// 結果: この商品はセール品ですか？ true
// 別のタグでチェック
const isLimitedEdition = productTags.includes("限定品");
console.log("この商品は限定品ですか？", isLimitedEdition);
// 結果: この商品は限定品ですか？ false.push()
Shopifyでは、お客様が「カートに追加」ボタンを押したときに、選んだ商品をカートのリストに加えるような場面で「.push()」が役立ちます。
// 現在のカート内の商品リスト（配列）
let currentCartItems = [
{ id: 101, name: "Tシャツ", quantity: 1 },
{ id: 102, name: "ジーンズ", quantity: 1 }
];
console.log("追加前:", currentCartItems);
// 結果: 追加前: [{ id: 101, name: "Tシャツ", quantity: 1 }, { id: 102, name: "ジーンズ", quantity: 1 }]
// 新しくカートに追加したい商品
const newItem = { id: 103, name: "キャップ", quantity: 1 };
// push()を使って、新しい商品をカートリストの最後に追加する
currentCartItems.push(newItem);
console.log("追加後:", currentCartItems);
// 結果: 追加後: [{ id: 101, name: "Tシャツ", quantity: 1 }, { id: 102, name: "ジーンズ", quantity: 1 }, { id: 103, name: "キャップ", quantity: 1 }]
// 複数追加することも可能
currentCartItems.push(
{ id: 104, name: "ソックス", quantity: 2 },
{ id: 105, name: "スウェット", quantity: 1 }
);
console.log("複数追加後:", currentCartItems);
// 結果: 複数追加後: [
// { id: 101, name: "Tシャツ", quantity: 1 },
// { id: 102, name: "ジーンズ", quantity: 1 },
// { id: 103, name: "キャップ", quantity: 1 },
// { id: 104, name: "ソックス", quantity: 2 },
// { id: 105, name: "スウェット", quantity: 1 }
// ].pop()
Shopifyでは、カートのリストから一番最後の要素を削除する場面で「.pop()」が使われます。
// 現在のカート内の商品リスト（配列）
let currentCartItems = [
{ id: 101, name: "Tシャツ", quantity: 1 },
{ id: 102, name: "ジーンズ", quantity: 1 },
{ id: 103, name: "キャップ", quantity: 1 } // これが一番最後
];
console.log("削除前:", currentCartItems);
// 結果: 削除前: [{ id: 101, name: "Tシャツ", quantity: 1 }, { id: 102, name: "ジーンズ", quantity: 1 }, { id: 103, name: "キャップ", quantity: 1 }]
// pop()を使って、一番最後の要素を取り除く
const removedItem = currentCartItems.pop();
console.log("削除された商品:", removedItem);
// 結果: 削除された商品: { id: 103, name: "キャップ", quantity: 1 }
console.log("削除後:", currentCartItems);
// 結果: 削除後: [{ id: 101, name: "Tシャツ", quantity: 1 }, { id: 102, name: "ジーンズ", quantity: 1 }]
// 配列が空になるまでpop()を続けることもできます
currentCartItems.pop();
currentCartItems.pop();
console.log("全て削除後:", currentCartItems);
// 結果: 全て削除後: [].sort()
Shopifyでは、お客様が商品一覧を「価格の安い順」で見たがっているときに「.sort()」が使われます。
// 元の商品リスト（価格はバラバラ）
const products = [
{ id: 1, name: "キャップ", price: 1500 },
{ id: 2, name: "Tシャツ", price: 2500 },
{ id: 3, name: "ジーンズ", price: 7000 },
{ id: 4, name: "ソックス", price: 800 } // 一番安い
];
console.log("並べ替え前:", products);
/*
結果例:
並べ替え前: [
{ id: 1, name: "キャップ", price: 1500 },
{ id: 2, name: "Tシャツ", price: 2500 },
{ id: 3, name: "ジーンズ", price: 7000 },
{ id: 4, name: "ソックス", price: 800 }
]
*/
// sort()を使って、商品を価格の安い順に並べ替える
// 注意: sort()は元の配列を直接変更します！
products.sort((a, b) => {
// ここで並べ替えのルールを決める
// a: 比較する最初の要素
// b: 比較する次の要素
// 「aのprice」から「bのprice」を引いた結果を返す
// 結果がマイナスならaが先に、プラスならbが先に、0ならそのまま
return a.price - b.price;
});
console.log("価格の安い順に並べ替え後:", products);
/*
結果例:
価格の安い順に並べ替え後: [
{ id: 4, name: "ソックス", price: 800 },
{ id: 1, name: "キャップ", price: 1500 },
{ id: 2, name: "Tシャツ", price: 2500 },
{ id: 3, name: "ジーンズ", price: 7000 }
]
*/.reverse()
Shopifyでは、絞り込み検索などで、デフォルトでは「新着順」に並んでいるデータを、お客様が「古い順」に表示し直したい場合に「.reverse()」が役立ちます。
// 元の商品リスト（新着順を想定）
const productsByNewest = [
{ id: 103, name: "最新Tシャツ", date: "2024-06-15" },
{ id: 102, name: "定番ジーンズ", date: "2024-05-20" },
{ id: 101, name: "初期キャップ", date: "2024-04-10" }
];
console.log("新着順:", productsByNewest);
/*
結果例:
新着順: [
{ id: 103, name: "最新Tシャツ", date: "2024-06-15" },
{ id: 102, name: "定番ジーンズ", date: "2024-05-20" },
{ id: 101, name: "初期キャップ", date: "2024-04-10" }
]
*/
// reverse()を使って、順番を古い順にひっくり返す
// 注意: reverse()は元の配列を直接変更します！
productsByNewest.reverse();
console.log("古い順にひっくり返した後:", productsByNewest);
/*
結果例:
古い順にひっくり返した後: [
{ id: 101, name: "初期キャップ", date: "2024-04-10" },
{ id: 102, name: "定番ジーンズ", date: "2024-05-20" },
{ id: 103, name: "最新Tシャツ", date: "2024-06-15" }
]
*/.slice()
Shopifyでは、トップページなどで、「新着商品」や「人気商品」の中から厳選した3点だけをグリッド表示したいときに活用されます。
// --- ダミーの商品データ ---
// 実際にはShopifyから取得した商品データを使用しますが、ここではシンプルに配列として用意します。
const allProducts = [
{ id: 'prod101', title: 'Tシャツ', price: 2500, type: 'トップス' },
{ id: 'prod102', title: 'ジーンズ', price: 7000, type: 'ボトムス' },
{ id: 'prod103', title: 'キャップ', price: 1500, type: 'アクセサリー' },
{ id: 'prod104', title: 'パーカー', price: 6000, type: 'トップス' },
{ id: 'prod105', title: 'スニーカー', price: 9000, type: 'シューズ' },
{ id: 'prod106', title: 'ソックス', price: 800, type: 'アクセサリー' },
];
console.log("--- 元の全商品リスト ---");
console.log(allProducts);
// --- 例1: 配列の最初の3つの要素を切り取る ---
// slice(0, 3) は、インデックス0（最初の要素）からインデックス3の手前までを切り取ります。
const firstThreeProducts = allProducts.slice(0, 3);
console.log("\n--- 最初の3つの商品（slice(0, 3)） ---");
console.log(firstThreeProducts);
// 結果: [ {Tシャツ}, {ジーンズ}, {キャップ} ]
// --- 例2: 配列の真ん中あたりから2つの要素を切り取る ---
// slice(2, 4) は、インデックス2（3番目の要素）からインデックス4の手前までを切り取ります。
const middleTwoProducts = allProducts.slice(2, 4);
console.log("\n--- 真ん中あたりの2つの商品（slice(2, 4)） ---");
console.log(middleTwoProducts);
// 結果: [ {キャップ}, {パーカー} ].join()
Shopifyでは、商品の複数のタグを、お客様に見やすいように「, 」（カンマとスペース）で区切って一つの文字列として表示したいときに「.join()」が使われます。「.join()」は、配列メソッドですが、その役割は配列を操作して新しい配列を作ることではありません。
// ある商品のタグのリスト（配列）
const productTags = [
"新着",
"コットン",
"セール品",
"Tシャツ",
"人気"
];
console.log("--- 元のタグリスト ---");
console.log(productTags);
// 結果: [ "新着", "コットン", "セール品", "Tシャツ", "人気" ]
// join()を使って、タグをカンマとスペースでつなげて一つの文字列にする
const formattedTags = productTags.join(', ');
console.log("\n--- カンマで区切ったタグ文字列 ---");
console.log(formattedTags);
// 結果: 新着, コットン, セール品, Tシャツ, 人気
// --- 別の区切り文字で試す例 ---
const tagsWithHash = productTags.join(' #');
console.log("\n--- シャープでつないだタグ文字列 ---");
console.log(tagsWithHash);
// 結果: 新着 #コットン #セール品 #Tシャツ #人気
// --- 区切り文字なし（結合）で試す例 ---
const concatenatedTags = productTags.join('');
console.log("\n--- 区切り文字なしでつないだタグ文字列 ---");
console.log(concatenatedTags);
// 結果: 新着コットンセール品Tシャツ人気
// --- 元の配列が変更されていないことを確認 ---
console.log("\n--- join()実行後も元の配列は変更されていない ---");
console.log(productTags);
// 結果: [ "新着", "コットン", "セール品", "Tシャツ", "人気" ] （最初のタグリストと全く同じ）以上、Shopifyのカスタマイズに役立つ基本的なJavaScript配列メソッド11選を紹介しました。ぜひお役に立てればと思います！
