商品分類エクスプローラー

Product Taxonomy Explorerは、Shopifyの商品分類（カテゴリー、属性、属性値、返品理由）を扱う、静的でフレームワーク不要のブラウザーツールです。Shopifyコミュニティ向けに、一日中開いたままにしておけるツールとして作成しました。商品を分類し、ハンドルを確認し、IDをコピーし、カテゴリーリンクをチームメンバーと共有できます。

アカウントは不要です。ライトモードとダークモードに対応しています。Shopifyの現在の安定版商品分類リリースに含まれる31ロケールすべてに対応しています。

これを作った理由

Shopifyが公開している商品分類エクスプローラーは本当に便利です。しかし、本当に重いツールでもあります。

latestリリース（2026-05）を確認したところ、1つのカテゴリーURLで約59.9 MBのHTMLがダウンロードされました。ページは巨大なカテゴリー、属性、マッピング、返品理由のパネルをDOMに事前レンダリングし、属性に関連データを保存し、キャッシュされたノードリスト全体で表示を切り替えます。検索は外部のブラウザー側ツールを通じて実行されます。ページはメインスレッドに処理を返すことさえあります。これは、ブラウザーがページ自体の大きさに苦労している兆候です。

商品分類データを頻繁に扱うなら、次のように感じたことがあるでしょう。

1. 制限のあるネットワークや負荷の高いマシンでの初回読み込みが遅い
2. タブを開いた後の検索や列ナビゲーションの遅延
3. メモリへの負荷や、まれに発生するタブのクラッシュ
4. 読み込み状態が分かりにくい。まだ取得中なのか、停止しているのか？
5. 「スノーボードのカテゴリーIDは何か？」という単純な質問に対して、ページが過剰に大きい

上流のJSON自体も大きく、英語版のtaxonomy.jsonは約94.8 MB、categories.jsonは80.0 MBあります。デフォルトのエクスプローラーはこの問題を縮小せず、ツリーの大部分をあらかじめHTMLにレンダリングします。

私たちは、ストレステストではなくツールとして感じられる検索ツールを作りたかったのです。

作成したもの

ShopifyのUIをさらに洗練させて複製することが目的ではありませんでした。商品分類を扱う作業を落ち着いたものにすることが目的でした。

1. コンパクトでアプリ対応のデータ — ビルド時にフラットなレコード、安定したID、重複排除された関連性、UIの読み込み方法に合わせたコンテンツハッシュ付きJSONシャードへ正規化
2. 表示されているものだけをレンダリング — 現在のパスのカテゴリー列、1つの詳細パネル、制限された検索結果、展開した後にのみ表示される属性行
3. 詳細を必要に応じて読み込み — 属性メタデータと値リストは、必要になったときに小さなチャンクで取得
4. 重複したインデックスなしで検索 — ブラウザーは、すでにメモリにあるカテゴリー、コンパクトな属性概要、返品理由から、約23,600件の検索可能な行を生成
5. 静的配信 — Cloudflare Workers Static Assets上でHTML、CSS、JavaScript、生成データを配信。キャッシュ可能なファイルはWorkerの実行を経由しません
6. 完全なロケール対応 — 固定されたリリースに含まれるShopify生成の31ロケールすべてに対応し、有効にした各言語でUI文言を完全に提供

カテゴリー検索、属性の確認、返品理由、ローカライズされたラベル、共有可能なURL、コピー操作はそのまま利用できます。デフォルトの体験を遅くしていた負荷はありません。

高速に感じられる理由

最大の効果を生むのは抑制です。

	Shopifyが公開しているエクスプローラー	Product Taxonomy Explorer
初回アクセス	完全な商品分類の非表示DOMを含む約60 MBのHTML	シェル + 約81〜92 KB gzipのルートスコープカテゴリー​データ（アクティブなロケール）
レンダリング	すべてを事前レンダリングして表示を切り替え	表示中の列、詳細、開いた行だけを構築
検索	独立した検索インデックス基盤	読み込み済みのロケールデータからブラウザー内で生成
属性値	初期ページの容量に含める	属性ごとに遅延読み込み（チャンクあたり最大約52〜66 KB gzip）
障害時の動作	1つの重いリストでページ全体が遅くなる可能性	大きな値リストの影響は、開いた後の1行に限定

デプロイサイズとセッションサイズは同じではありません。完全なリリースアーティファクトにはすべてのロケールが含まれます（ディスク上で約450 MB、本番環境ではコンテンツアドレス付きファイルが約2,993個）。ただしブラウザーがリクエストするのは、アクティブなロケールのルート、選択した分類ルート用のコアシャード、共有詳細シャード、そして操作に応じて必要になるチャンクだけです。

検証済みビルド**v1.4.2**（ソース参照v2026-05）で測定：

1. ルートスコープのカテゴリー​データ： ロケール全体で81〜92 KB gzip
2. 初回の商品分類レンダリング（localhost）： Fast 4Gで約232 ms / Slow 4Gで約824 ms
3. 選択した詳細の準備完了： Fast 4Gで約803 ms / Slow 4Gで約2,835 ms
4. 本番Lighthouse（2026-07-22）： アクセシビリティ100、ベストプラクティス100、SEO 100。Slow 4GのLCPは約2.2秒（CPUを4倍にスロットリング）、CLSは0.00

ブートストラップ後のウォームナビゲーションは実質的に瞬時です。コピーの確認はトーストではなくフッターに表示されます。フッターとDebugパネルのタイミング表示により、データを読み込み中なのか、何かが停止しているのかが明確に分かります。

実際のワークフロー向けに構築

必要なものを見つける

1. カテゴリー名、カテゴリーID、属性ハンドル、返品理由で検索 — フォーカスするには/またはCmd/Ctrl+K
2. 階層が重要な場合は、予測しやすい列ナビゲーションで閲覧
3. カテゴリーの選択とロケールを保持するURLを共有

確信を持って確認

1. 1つのパネルに、パンくず、短いカテゴリーID、完全なShopify商品分類GID、割り当てられた属性、返品理由を表示
2. ID、ハンドル、パンくず用のコピー​ボタン — フッターで確認
3. 折りたたみ可能な属性行。長い値リストは最初にプレビューし、別のネットワーク往復なしですべて表示できます

言語とテーマ

1. 有効にしたすべてのShopifyロケール用の言語セレクター — 商品分類ラベルはShopifyのデータから、UIの周辺要素は当社のカタログから取得（31ロケールでキーを厳密に一致）
2. ブラウザーに保存されるライトモードとダークモード
3. 両方のテーマについて自動リリースゲートでWCAG A/AAチェックを実施し、検索ではキーボードフォーカスも網羅

数字で見る

カテゴリー	14,606
属性	8,553
属性値	74,813
返品理由	470
ロケール	31
生成された検索行	23,629
共有詳細の重複排除による削減量	129.29 MB

検索では意図的に、デフォルトのインデックスから属性値の全文を除外しています。すべての値をインデックス化すると、検索対象は23,629行から98,442行に増え、メモリとランキングのコストも増加します。これは、値レベルの検索にオプトインする価値が生まれるまでの、意図的なトレードオフです。

保守性を維持する方法

意図的に退屈なアーキテクチャ：

1. 測定された障害モードによって必要性が証明されない限り、フロントエンドフレームワークなし
2. 決定論的なデータパイプライン — Shopifyのリリースタグを不変のコミットに固定し、ソースハッシュを検証し、マニフェストを最後にしてコンパクトなペイロードを公開し、リリース前にすべてのブラウザーアセットを検証
3. リリースごとに検証済みアーティファクトを1つ — プレビュー、本番、ロールバックを通じて完全なSHA-256識別情報を維持
4. 本番環境への自動デプロイ — 完全なゲートを通過した後、mainへのランタイムプッシュで実行。ドキュメントのみの変更ではデプロイしません
5. ブラウザースモークテスト57件とアクセシビリティテスト5件 — ディープリンク、全ロケール、遅延ペイロード、コピーのワークフロー、320pxまでのレイアウトをテスト

ここでのパフォーマンスとは、巨大なページをフレームワークで包んだり、リクエストごとにアプリロジックを実行したりすることではありません。用途に合わせて整形したデータに対して、後でより少ない処理を行うことです。

独立したプロジェクト

Company XYZが構築しました。上流のエクスプローラーと同じ条件でShopifyのオープンなproduct-taxonomyデータを使用している以外、Shopifyとは提携していません。

私たちは毎週、カテゴリーを分類し、属性を確認し、IDを社内ツールにコピーしています。これは、私たちが手元に置きたかったエクスプローラーです。

ストアフロントのパフォーマンスとアクセシビリティを重視するなら、同じ優先事項で構築したShopifyテーマ、**Align**もおすすめです。

試してみる

商品タクソノミーエクスプローラーを開く

ディープリンクの例：Snowboards（sg-4-17-2-17）

商品分類のソースデータ：GitHubのShopify/product-taxonomy。

---

Shopifyのエクスプローラーは倉庫全体を届けます。建物全体が読み込まれるまで待ち、その後、訪れていないフロアを非表示にします。

Product Taxonomy Explorerは倉庫を整理し、実際に使っている棚を手前に表示します。14,000以上のカテゴリーと31言語にわたってレスポンシブに動作します。