Shopifyテーマ開発初心者がつまずく10の落とし穴とその対処法

抜け出し方

• 「もし中身があったら表示して」とおまじない: `if`文で存在確認するクセをつけましょう。これだけでエラーが激減します。

{% if product.title %} ... {% endif %}

• 「なかったらコレ表示しといて」と保険をかける: `default`フィルターを使えば、もしデータが空っぽでも代わりの文字を表示できます。

{{ product.title | default: "商品名なし" }}

抜け出し方

• Shopifyのお作法で読み込む: CSSやJSファイルを読み込むときは、必ず`asset_url`を付けましょう。

{{ 'style.css' | asset_url | stylesheet_tag }}

• コードに「縄張り」を作る: 他のアプリのコードとケンカしないように、自分の書いたJavaScriptは即時実行関数などで囲って独立させましょう。

抜け出し方

• お手本テーマDawn分解してみる: Shopifyが用意してくれている「Dawn」をテーマは、最高の見本です。コードを覗いて真似してみましょう。
• 超シンプルなパーツから自作してみる: まずは「見出しと文章だけ」みたいな簡単なセクションを作ってみるのが、理解への一番の近道です。

抜け出し方

• 写真のサイズを自動で変えてくれる魔法を使う: Liquidの`img_url`フィルターを使えば、Shopifyが自動でちょうどいいサイズの画像を用意してくれます。

<img src="{{ image | img_url: '450x450' }}">

• 画像の遅延読み込み（Lazy Loading）: `loading="lazy"`という一文を`<img>`タグに入れるだけでOK。ページの表示が速くなります。

抜け出し方

• 管理画面から変えられるようにする: URLは`routes`オブジェクトから、繰り返し使うテキストは設定ファイルから呼び出しましょう。コードを触らずに管理画面から簡単に修正できます。

抜け出し方

• Shopify公式の連携機能を使う: ボタン操作で開発テーマと本番テーマを安全に管理できます。
• 基本のコマンドだけ覚える: まずは`git commit`（セーブ）と`git push`（アップロード）だけ覚えればOK！

抜け出し方

• 「試着用」のテーマを用意する: 新しいアプリを試すときは、必ず今のテーマをコピー（複製）してから！問題が起きても、すぐに元に戻せます。
• ブラウザの「探偵ツール」で犯人探し: デベロッパーツールを使えば、どのCSSやJavaScriptが悪さをしているのかヒントが見つかります。

抜け出し方

• 中身を全部見せてくれる魔法の呪文: `json`フィルターを使うと、データの中身を全部ぶちまけてくれます。「どんなデータが使えるんだっけ？」と確認したい時に最強です。
• Shopify先生の自動チェック機能: `shopify theme check`コマンドを実行すると、テーマの間違っている箇所や改善点を自動で教えてくれます。

抜け出し方

• 常に「スマホ最優先」で考える: 開発中は、常にブラウザの表示をスマホサイズにして確認するクセをつけましょう。
• 画面サイズに合わせて見た目を変えるテクニックを学ぶ: CSSのメディアクエリ（`@media`）は、レスポンシブデザインの必須知識です。