1. はじめに

1.1　記事について

本記事は、前回のThemeBlocksを使用したセクションを具体的に使用していきます。

1.2　記事の対象

この記事は、Shopifyテーマ開発者に向けて記載しております。

1.3　記事

この記事を読み終えるまでに、約10分です。

2. テーマブロックの基本構成の確認

今回のテーマでは前回のテーマブロックの記事に引き続き、具体的な開発方法を見ていこうと思います。

今回の記事で詳細に全て書こうと思ったのですが、今回のテーマブロックの記事に関してはもう一つ追加で書かせてください。結論テーマブロックの記事に関しては全部で「3部作」での構成を予定しております。

ではテーマブロックの構成についてお伝えさせていただければと思うのですが、

その前に！念頭においていただきたいことをお伝えします。

まず今回のアップデートでShopifyのブロックは二種類になったといえます。

### ブロックの種類

1. セクション定義ブロック 
   セクションファイル内で定義されているブロックのこと
2. テーマブロック
   blocksディレクトリ内に存在するブロックのこと
※名前は僕が勝手につけました

今回のアップデートでShopifyにおけるブロックの種類は2つあるんだ！的にご認識いただくのと合わせて、上記により

### セクションの種類

1. 従来のセクション
2. テーマブロックを使用するセクション
   備考：これがいわゆるFlexSectionsになっていくのだと思います。詳細は割愛

とセクションの種類も2つになったんだと念頭においていただければと思います。それに加えてラスト、

### テーマのディレクトリ基本構成が7→8になった

上記をまずご念頭においていただくことで、今回の記事と次に執筆する記事をの理解が進みやすいかと思います。

それでは冒頭長くなりましたが、具体的に「テーマブロック」を使用したセクションの”基本的”な作成方法を見ていきましょう。

2.1 custom-secitonの作成

まずはcustom-section.liquidファイルとして新たなセクションファイルを追加

2.2 Schemaの作成

従来のセクション通り、Schemaを記述していくのですが、

Schema内のプロパティに”blocks”というものが出現しています。ここが新しい。

→ この値を@themeにすれば、blocksディレクトリ内で作成されている全てのblocksを読み込むことができます。

このプロパティの中でテーマブロックを指定してあげるとスコープが絞られ、特定のブロックしか使用できないセクションが作成できます。※詳細は次回記事にて

2.3 テーマブロックの呼び出し方法

はい、また新しい記述が出てきました

{% content_for 'blocks'%}

こいつを書いてあげることで、schema内

    "blocks": [
        {"type": "@theme"},
        {"type": "@app"}
     ],

で指定されたテーマブロックを呼び出すことができます。※この場合は@themeが指定されているので、blocksディレクトリにある全てのブロックを呼び出すこと可能です。

2.4 テーマブロックを作成してみる

ではblocksディレクトリにblockを作成していきましょう~ 「heading.liquid」を作成します。

ファイルが作成されたら、shemaをまずは記述していきます。この辺りはセクションの構成と同じですね。

セクション定義ブロックではsettings>blocksのプロパティの中にblockのschemaを記述していく感じでしたが、これはテーマブロックでは必要ありません。settingsの中に直接書いちゃいます。

続いて要素を作っていきます。

通常セクションのファイルないだと{% for %}分の中でblockを呼び出す必要がありましたが、blocksディレクトリの中ではその必要はありません！直接書いちゃいます。

Memo：テーマブロックでも {{ block.shopify_attibutes }} は有効ですので忘れずに。

するとこんな感じでテーマエディタ上で出現します。

ここまでが基本的なテーマブロックの構成です。今回の記事はここまでなのですが、

「え？ここまでだとセクション内で定義した方が早くない？」と思われた方、おっしゃる通りです。

ただ、テーマブロックの強みである「汎用的にテーマ内で使用できる」「ブロックをネストできる」などの利点を踏まえた上で「テーマブロックを使用したセクションの構築方法」を次回の記事で詳細にお伝えできればと思います。

それでは次回の記事も、よろしくお願いいたします！

著者：ショピ道 龍之介