Shopifyのスキーマ設定で見かける「t:sections.main-product〜」という文字列は、Liquidの変数ではなく、翻訳ファイルから表示用テキストを取得するための“翻訳キー”です。一見すると複雑ですが、構造を理解すればスキーマ設定がぐっと身近に感じられます。
Shopifyのテンプレートファイルを構成する要素は多岐にわたりますが、大きく分ければ「HTML＋Liquid」と「スキーマJSON」が二本柱と言えるでしょう。
もちろん、CSSやJavaScriptもテーマの完成度を高めるうえで欠かせませんが、表示のロジックと管理画面の設定UIという観点では、この2つの構造が基盤です。
Liquidの扱い方や応用については多く語られる一方で、スキーマJSONの理解は後回しにされがちです。そこで今回は、スキーマ設定によく登場する 「”t:”」で始まる翻訳キーや変数パスに注目し、Shopifyテーマ開発における小さな理解のカケラを共有したいと思います。
スキーマ設定とは？
Shopifyのテーマ開発では、テンプレートファイルの中に「スキーマ設定」と呼ばれる記述エリアが存在します。これは、**テーマエディタでのカスタマイズ（ノーコード編集）を可能にするための「設計図」のようなもので、構成はJSONに似た形式で書かれています。
ただし、スキーマ設定は厳密にはJSONではなく、“Liquidファイル内の文字列”として扱われる構造です。そのため、通常のJSONよりも自由度がありますが、厳格な構文チェックなどは働かないという特徴もあります。
スキーマ設定が使われる主な場面は2つあります。
◎ ページテンプレート（.json）：主にどのセクションをどの順番で並べるか、といったページ構成を記述
◎ セクションテンプレート（.liquid）：各セクションにおけるテーマエディタでの入力項目や設定項目を定義
今回取り上げる「t:から始まる文字列」は、主に後者のセクションテンプレート内のスキーマ設定で頻繁に登場するものであり、テーマのラベルや説明文に密接に関わる要素です。
翻訳キー「t:」とは
Shopifyのセクションテンプレートにおけるスキーマ設定では、「”t:”」で始まる文字列が頻繁に登場します。これは「翻訳キー（translation key）」と呼ばれ、テーマエディタ上で表示される文言を多言語対応にするための指定です。
この翻訳キーは、セクションやブロックの「label」値に多く使われます。スキーマでは通常、各要素は 「type（項目の種類）」、「id（内部での参照名）」、「options（選択肢のリスト）」といった構成で定義されますが、「options」 の中にも 「value（保存される値）」と 「label（表示される名前）」という組み合わせが含まれています。
この 「label」 に 「”t:…”」と指定されている場合、Shopifyは「locales/ja.schema.json」などの翻訳ファイルから対応する文言を取得し、テーマエディタに表示します。つまり「”t:”」は、表示テキストを外部ファイルから呼び出すための「翻訳パス」とも言えるのです。
例えば、テーマエディタのスキーマ設定に以下のような記述があったとします。
"label": "t:sections.main-product.blocks.collapsible_tab.settings.icon.options__43.label"一見すると複雑な文字列ですが、これはShopifyが翻訳ファイルを参照するための“パス”**です。ここでの “t:” は 翻訳キーの開始を示す接頭辞であり、それ以降の部分（sections.main-product.blocks…）が翻訳ファイル内の階層構造を示しています。
たとえば、ストアの言語設定が日本語になっている場合は、locales/ja.schema.json というファイルが参照されます。このファイルの中には次のような定義があるはずです。
{
"sections": {
"main-product": {
"blocks": {
"collapsible_tab": {
"settings": {
"icon": {
"options__43": {
"label": "クマさんのお顔"
}
//中略Shopifyは「”t:”」以下のパスをたどって “label” の値（ここでは「クマさんのお顔」）を取得し、テーマエディタ上で表示します。
変数パスと似て非なる‥
ここまで見てきたように「”t:sections.main-product.blocks…”」という形式は、一見するとShopifyのLiquidにおける変数パスのようにも見えます。たとえば「{{ product.title }}」や「{{ article.author.name }}」のような表記と構造が似ているからです。
しかし実際には「”t:”」で始まる文字列は Liquidの変数ではなく、あくまで「翻訳キー」であり、テーマエディタ上で使われる ローカライズ表示用の参照パスに過ぎません。
Liquidの変数パスは、その場で動的にデータを取得し表示するためのものですが、”t:” のパスは、localesフォルダ内のJSONファイルから静的な文字列を探し出すだけです。
つまり、見た目は似ていても、目的も動作もまったく異なるという点に注意が必要です。
以上、Shopifyのスキーマ設定に登場する「”t:”」から始まる翻訳キーの仕組みと構造について解説してきました。
正直これは、豆知識のような内容にすぎないかもしれません。ですが、こうした長くて複雑なパスに毎回向き合うたび、「何これ？」と感じていた方も多いのではないでしょうか。
活用できるほどの深い技術知識ではないかもしれませんが、それでもスキーマ設定を 「なんとなく取っつきにくいもの」から「ちょっと親しみが持てるもの」へ変える手がかりになればうれしいです。
