Shopifyの「コードを編集」画面を開いて、たくさんのファイルや見慣れない言葉に圧倒された経験はありませんか？実は、Shopifyのテーマを構成するコードは、主に4つの言語がそれぞれの役割を分担して動いています。この構造を理解すれば、簡単なカスタマイズや、どこを修正すれば良いのかの判断が格段に楽になります。この記事では、各コードの役割を初心者にも分かりやすく解説します。
コードの役割を家づくりで理解
Shopifyストアのコード構造は「家づくり」に例えると非常に分かりやすいです。HTML、CSS、JavaScriptという3つの言語が、それぞれ家の「骨組み」「内装」「設備」の役割を担っています。
HTML：家の骨組みと構造
HTML（HyperText Markup Language）は、ウェブページの骨組みを作る言語です。テキスト、画像、リンクといった要素を配置し、「これは見出し」「これは段落」といったページの基本構造を定義します。家で言えば、柱や壁、屋根といった、建物そのものの構造部分にあたります。
CSS：家のデザインと装飾
CSS（Cascading Style Sheets）は、HTMLで作られた骨組みにデザインを施す言語です。文字の色やサイズ、背景色、要素の配置などを指定し、ページの見た目を美しく整えます。家で言えば、壁紙の色を決めたり、家具を配置したり、照明でおしゃれに演出したりする内装・インテリアの役割です。
JavaScript：家の機能と動き
JavaScriptは、ページに動きや機能を追加する言語です。例えば、画像がスライドショーのように切り替わったり、ボタンをクリックするとメニューがポップアップで表示されたりする動的な機能はJavaScriptで作られています。家で言えば、自動で開くドアや、ボタン一つで点灯する照明といった便利な設備にあたります。
Shopify特有の言語Liquid
HTML、CSS、JavaScriptの3つに加えて、Shopifyには「Liquid」という独自の言語が存在します。これがShopifyのコード構造を理解する上で最も重要なキーパーソンです。
Liquidとは？サーバーの通訳
Liquidは、Shopifyのサーバーに保存されている商品情報や顧客データなどを、HTMLとしてブラウザに表示させるための翻訳ツールのようなものです。Shopifyのデータベースと私たちの見るウェブページの間を取り持つ、重要な役割を担っています。
Liquidの具体的な役割
例えば、商品ページに商品名を表示させたい時、HTMLに直接「Tシャツ」と書き込むわけではありません。代わりに{{ product.title }}というLiquidコードを記述します。すると、Shopifyが「このページはTシャツのページだから、{{ product.title }}を『Tシャツ』という文字に置き換えて表示しよう」と自動で処理してくれます。
Liquidファイルの探し方
Shopifyのテーマコードでは、.liquidという拡張子がついたファイルがLiquidファイルです。templatesやsectionsフォルダの中に多く見られます。これらのファイルの中に、HTMLやCSS、JavaScriptがLiquidコードと共に記述されています。
各コードが連携する仕組み
では、これら4つの言語はどのように連携して一つのページを表示しているのでしょうか。ここでも家づくりの例えで見ていきましょう。
LiquidがHTMLを生成する
まず、サーバー側でLiquidが動きます。「商品名を表示せよ」というLiquidの指示（{{ product.title }}）を、HTMLの「ここに見出しを置け」（<h1>）という構造の中に書き出します。これにより、動的な情報を含んだページの設計図（HTML）が完成します。
HTMLがCSSを読み込む
次に、生成されたHTMLファイルが「このページの見た目は、このCSSファイルを見てください」とブラウザに指示を出します。その指示に従い、ブラウザはCSSファイルに書かれたデザイン情報（文字は黒色、サイズは24pxなど）を読み込み、HTMLの骨組みに装飾を施します。
HTMLがJSを読み込む
同様に、HTMLファイルは「このページの動きは、このJavaScriptファイルを見てください」とも指示します。ブラウザはJavaScriptファイルを読み込み、「画像をクリックしたら拡大表示する」といった機能や動きをページに追加します。こうして、4者が連携したページが完成します。
まとめ
Shopifyのコードは、LiquidがShopifyのデータを取得し、それをページの骨組みであるHTMLに変換し、そのHTMLがデザイン担当のCSSと機能担当のJavaScriptを読み込むことで成り立っています。「色を変えたいな」と思ったらCSSファイルを、「この文章を変えたい」と思ったらLiquidファイル内のHTMLを探す、というように、各言語の役割を理解するだけで、コード編集のハードルはぐっと下がります。この基本構造を念頭に、少しずつコードの世界に慣れていきましょう。
コメント