しかし、Shopify Liquidとは一体何なのか？
この記事では、Liquidについて知る必要のあるすべてのことを、できるだけシンプルな方法で、あなたのような初心者に完璧に提供します。
この記事の最後には、今すぐコーディングを始められるよう、ボーナス・ヒントも用意している！
概要
Shopifyリキッドの紹介
Shopify Liquidは Tobias Lutke(Shopifyの共同設立者)によって作られたオープンソースのテンプレート言語です。すべてのShopifyテーマが書かれているテンプレート言語です。
Liquid をテンプレート言語と呼ぶ人もいれば、テンプレートエンジンと呼ぶ人もいます。どちらもある面では正しいのですが、Liquid のコードは主にデータを引き出し、ブラウザにレンダリングされたときにデザイン要素に置き換えるコマンドのプレースホルダーなので、テンプレート言語と呼ぶ方がより正確です。
どんなに複雑な機能を備えていても、すべての Shopifyテーマは同じではありません。
Shopifyの特定のテーマのルック＆フィールは気に入ったが、あなたが本当に好きな機能が一つ欠けていたらどうする？通常であれば、その機能を持つ他の代替テーマを探すでしょう。
しかし、テンプレート言語の使い方を知っていれば、テーマのリキッドファイルに行ってコードを編集し、その機能を追加することができる。
それがShopify Liquidです。ある意味、それはあなたが望む外観と感触を達成するために、そのコアで編集する力を与えることによって、選択したテーマを制限します。
リキッドコードがテンプレートとデータの橋渡しをする
このコンセプトをよりよく理解するためには、まず、Shopifyが動的なウェブサイトであることを理解する必要があります。 ダイナミックウェブサイト.
Shopifyストアの動的要素（Liquidコードで記述）には以下が含まれます。 商品ディスプレイ, コレクションページ, チェックアウトページなどがあり、顧客の場所や商品の選択、ウェブサイト内で実行されたその他のアクションに応じて変更することができます。
同時に、Shopifyストアはメニュー、ヘッダー、フッターのような静的要素（HTML、CSS、JavaScriptで書かれたもの）を持っています。
仕組みはこうだ：
- ShopifyユーザーがブラウザにあなたのストアのURLを入力する。
- Shopifyは、どの店舗がリクエストされ、どのページにアクセスしたいかを特定します。
- そして、どのShopifyテーマがあなたのストアでアクティブに使用されているかを識別し、ブラウザに読み込まれます。
- ページ内にリキッドプレースホルダー(例えば商品コレクション)がある場合、Shopifyはそれを処理し、これらのプレースホルダーはストアのリアルタイムデータに置き換えられます。
- リキッドコードが特定され作業された後、HTMLに置き換えられ、ブラウザのインターフェイスに読み込まれる。
- これらのプロセスを経て、ブラウザは何を表示すべきかを理解し、そのデータを顧客の画面上にインタラクティブな表示として視覚的に表現する。
Shopifyストアでリキッドファイルにアクセスするには？
リキッドファイルはShopifyのダッシュボードで非常に簡単に見つけることができます。
ステップ1:Shopifyのダッシュボードを開きます。左側のパネルでオンラインストアをクリックします。
ステップ 2: オンラインストアメニューで、テーマをクリックします。Shopifyストアで現在使用しているテーマが表示されます。三点アイコンをクリックし、複製を クリックします。
リキッドテーマのファイルにアクセスして調べるだけなら、現在のテーマを複製する必要はありません。しかし、自分でリキッドコードを入力したり、手を加えたりしたい場合は、Shopifyストアを複製するのが最も安全な方法です。
ステップ3：複製をクリックして数秒後、現在のテーマのコピーが下に作成されます。テーマライブラリセクションまでスクロールダウンし、 三点アイコンをクリックして、 コードの編集を選択します。テーマのファイルやウェブサイトの他のコードを含む別のページにリダイレクトされます。
ステップ4:Shopifyコードエディタの左パネルに、リキッドファイルが表示されます。これらは".liquid"という拡張子を使用しているため、簡単に見つけることができます。
リキッド構文とデリミタ
プログラミングにおいて、デリミタは文字列の始まりと終わりを示す文字です。リキッドでは2種類のデリミタを使用し、1つのテンプレートファイル内でリキッドコードを識別することを容易にしています。
構文
プログラミングにおける構文とは、コンピュータが読み取り可能で実行可能なコードを作成するために、すべての文字の配置を規定するルールのセットである。
Shopify Liquidは100以上のオブジェクト、フィルタ、タグで構成されています。これらの意味を知ることは重要ですが、Liquidのコードの書き方を学ぶことはそれだけでは終わりません。中括弧、パーセンテージ、ドット、ハイフンなどの他の文字とともに、これらの単語をどのように並べるかも知っておく必要があります。
大文字とスペースが重要なプログラミング言語もあれば、そうでない言語もある。
コンピュータは文字を0と1の組み合わせとして解釈することで動作することを覚えておいてください。 そして、あなたがコード・エディターで入力した文字やキャラクタはすべて0と1として解釈され、コンピュータの解釈に基づいてアクションが実行されます。
したがって、コードのブロックは視覚的には正しく見えても、単純なドットの位置の間違いや文字の大文字小文字が出力に影響する。
構文を英語で考えてみよう。単語の意味を知っているだけでは十分ではありません。本当に言いたいことを言うためには、適切な文脈でそれらを使う方法も学ばなければならない。プログラミングでも同じことが言える。
区切り記号
二重中括弧 -{{ ... }}.
- オブジェクトと フィルタの定義に使用
- これらの区切り記号は、データベースからの動的コンテンツを配置するために使用される。
- リキッドコードの二重中括弧はOutputを表す。
中括弧とパーセンテージ -{% ... %}.
- タグの定義に使用
- これらの区切り文字は、Shopifyストアの論理的なアクションのプレースホルダーです。
- この中抜き記号はロジックを 表し、次のような機能を担当している：
さて、上のShopifyストアの例に戻って、どのコードが出力とロジックを表すかを考えてみよう。
このコードのブロックでは、デリミターが動作しているのを見ることができる。このように、リキッドを分析する際に、あるコードが出力を引き出したり、ロジックを実装したりする際に、その区切り文字がどのようなものであるかを知ることができる。
このコードのブロックを解釈してみよう。
{{ page_title }}
これは、現在表示されている商品、コレクション、ページのタイトルをコードで引き出し、表示することを意味します。
コードには、{% ... %}区切りがあるので、ロジックもあります。
{%- unless page_title contains shop.name %}- {{ shop,name }}{% endunless -%}
の 代わりに{%- ... -%}が 使われていることに気づくだろう。パーセント記号の横のダッシュはハイフン・トリム演算子と呼ばれ、レンダリング出力で「unless」ステートメントを囲む不要な空白を削除します。
unlessは 、ある条件を満たさない場合にのみデータを取り出す制御フロー・タグである。条件が満たされた場合にデータを取り出すif 制御フロー・タグの反対である。
page_titleは ページタイトルを指すオブジェクト。
この演算子は、文字列や配列の中に部分文字列があるかどうかをチェックする。
shop.nameは 店の名前を取り出すもう一つのオブジェクトである。
は ハイフン（-）を表すHTMLコードで、実際のウェブページでは横線として表示されます。
簡単に言うと、ページタイトルにショップ名が含まれていなければ、ウェブページにはショップ名が表示されます。一方、ページタイトルにショップ名が含まれている場合は、何も表示されません。
オブジェクト、フィルター、タグについて話そう
さて、区切り文字と構文に取り組んだところで、次はShopify Liquidの3つの主要な部分に移ります。
リキッドコードがどのように動作するかをよりよく理解するために、コードを入力するときにオブジェクト、フィルタ、タグが何をするのかを知ることが重要です。
しかし、これらはいったい何なのか？ひとつずつ説明しよう。
注：以下のスクリーンショットは リキッドチートシート.各オブジェクト、フィルタ、タグの詳細な定義については、リンクをクリックしてください。
液体オブジェクト
リキッドオブジェクト（リキッド変数とも呼ばれる）は、あなたのテーマを構築する際の変数を表します。あなたがコードで何をしたいとしても、リキッドオブジェクトとやりとりすることになります。したがって、これが何を表しているのかを知っておくことは非常に重要です。
リキッドを図書館だと思ってください。オブジェクトは本棚で、本はプロパティです。例えば、page.titleを探す場合、まずpageと書かれた本棚を探し、titleと書かれた本を取り出します。
簡単に言うと、オブジェクトはShopifyテーマのデータにアクセスするために使用され、引き出したいデータは何でも出力されます。
液体フィルター
Filters decide what actions are done with the outputs (objects) you pull from your data. These are methods used to modify the output of numbers, strings, variables, and objects. Filters in a liquid code are very easy to spot as they are preceded with a pipe string ( | ) such as {{ … | join: ", " }} and {{ … | first }}
上のライブラリーの例で、page.titleを取り出したとする。フィルタを追加することで、それを使って何をするかを決定できるようになる。あるページで本を開くのか、逆さまにするのか、空中に放り投げるのか、などだ。
液体タグ
リキッドタグは{% ... %} でラップされ、リキッドテンプレートにロジックを実装するために使用されます。タグは条件分岐で動作するため、リキッドコードの目に見えない部分です。
Shopifyストアの例から抽出したこのコードの塊に戻る：
{%- unless page_title contains shop.name %}- {{ shop,name }}{% endunless -%}
このコード行はunlessタグを使用しており、条件を満たさない場合にのみ実行されることがわかりました。ページタイトルがYankee Capsで、ショップ名がCaps 4 Lessだとしよう...
このコードの条件は次のように解釈されます：「ページタイトル(Yankee Caps) にショップ名(Caps 4 Less)が 含まれていない場合、- Caps 4 Lessを表示する".
しかし、もしコードが次のようなif タグを使って書かれているとしたら：
{%- if page_title contains shop.name %} {{ shop,name }}{% endif- {{ shop,name }}{% endif -%}
ロジックタグが変わったので、解釈も変わります。このコードの意味は「ページタイトル（Yankee Caps ）にショップ名（Caps 4 Less）が 含まれている場合、Caps 4 Lessを表示する。
さらなる学習のためのリソース
これで終わりです。Shopify Liquidが何に使われるのか、どのような機能があるのか、そして3つの主要なパーツがどのように組み合わさって目的のデザイン要素を生み出すのかを知ることで、Shopify Liquidの表面を掻いたことになります。また、コードのサンプルブロックを解釈し、区切り文字がテンプレート言語でどのように機能し、何を示すのかを知ることができました。
問題は、ここからどうするかということです。さて、Shopify Liquidをより深く使いたい時に使えるいくつかの事実のリソースを紹介します。
まずはこのShopifyクラッシュコースから始めましょう。
このクラッシュコースは、フィルタ、演算子、タグの基本に取り組む、Liquid の準上級コースです。また、動作するコードを書く上で非常に重要な Liquid の構文についても説明します。
さらに重要なのは、デビッド・マーティンがリキッドテンプレートの作成プロセスを説明することです。ぜひお付き合いください。
あまりに圧倒されるようであれば、休憩を取り、吸収できることだけを吸収するようにする。
リキッドで使用される何百ものコードをメモする必要はありません。リキッドコードのコンピテンシーを身につけるのに役立つ、さらなる読み物がここにあります：
- リキッドコーディングで使用されるすべての基本的なコード、フィルタ、タグ、オブジェクトの完全なリストです。学習過程で必要なコードを見つけるのに役立ちますので、手元に置いておきましょう。
- Shopifyの開発者によって書かれたLiquidに関するすべての詳細なドキュメントです。このホワイトペーパーには、各コードの使用例だけでなく、用語や定義が含まれています。
- Liquid関連のブログを集めたライブラリです。これらのブログは、Liquidのコードをより深く理解し、内面化するのに役立ちます。
- 適切な構文で書かれたコードの例で、テンプレートの必要性を素早く解決する必要がある場合、Liquid ファイルにコピーして貼り付けることができます。これらの例には、コレクション、ブログ、ナビゲーションなどのコードが含まれています。
ChatGPTを使って今すぐコーディングを始めよう
ChatGPT（Chat Generative Pre-Trained Transformer）は、OpenAIによって開発された人工知能（AI）ツールである。ユーザーがプロンプト（質問、コマンド、その他の種類の問い合わせ）を入力すると、学習したデータに従って応答を生成する。ChatGPTの特徴は、これまでのチャットボットとは異なり、人間のような会話を作成できることだ。
ChatGPTを適切に使用すれば、メール、ブログ、記事、スクリプトなどあらゆる形式の文章を作成できる強力なツールです！
このビデオでは ロビーとコーディングはChatGPTを使ってリキッドコードを生成し、それをリキッドファイルに貼り付けて、実際にコードを書く方法を知っているかどうか試しています：
ChatGPTが書いたコードを使ってShopifyのセクションを作成することを目的とした実験ビデオです。最初に追加されたセクションはアナウンスバーで、AIはデザインを表示するコードを書くことができました。
実験では、AIに商品のセクションを生成するように依頼しました。ChatGPTは商品セクションを表示するコードを生成することができましたが、望ましい結果を得るためには、ユーザーがコードをもう少し微調整する必要がありました。
テイクアウェイ
ChatGPTはリキッドコードの生成において良い仕事をしました。しかし、望ましい視覚的な結果を生成するには、いくつかの追加プロンプトと手動での微調整が必要でした。
AIは確かに液体コードに詳しいが、限界がある。そのいくつかを紹介しよう：
- ChatGPTは一般的なリキッドコードを作成しますが、Shopifyストアで使用できるようにするためには微調整が必要です。
- AIはあなたのウェブサイトに存在するコードの相関関係を知らないので、AIが生成するコードは、あなたのユースケースに当てはまるかもしれないし、当てはまらないかもしれない。
- 生成されるコードの使いやすさは、入力するプロンプトの正確さに依存する。
- 残念ながら、プログラミングの知識がほとんどない場合、ChatGPTを使用して完全に機能するShopifyストアを作成することはできません。従って、ChatGPT を便利に使用するためには、適切なプロンプトを入力できるようにコードの仕組みも学ぶ必要があります。
- ChatGPTはウェブデベロッパーの仕事をすることはできませんが、小さなセクションのコードを書くなどの小さなタスクを完了するための素晴らしいアシスタントになります。
ChatGPTでリキッドコードを読み解く
もしChatGPTにこのような制限があるのなら、リキッドコードでAIを使うにはどうしたらいいのだろう？
学習プロセスのアシスタントとして使うことができます。実際、ChatGPTはコードのブロックを解釈し、初歩的なレベルで説明することに長けています。
そして、Shopify Liquidに関する知識がゼロの人にとって、ChatGPTはインターネット上の豊富な情報を簡素化する素晴らしい方法です。
ChatGPTにコードの解釈を依頼する
まず オープンAIにアクセスし、メールアドレスを使用してログインします。その後、チャットインターフェイスにリダイレクトされますので、そこでプロンプトの入力を開始します。
このブログで以前使用したShopifyストアの例に戻ろう。今回は、別のコードの塊を使います。
このコードのブロックを理解したいとする：
どのような情報を探しているのか、具体的に説明する。
このリキッドコードを解釈し、非常に簡単な言葉で説明してください。全体を通して使用されているすべてのオブジェクト、タグ、フィルターを特定し、それらを個別に説明してください。
{%- if settings.favicon != blank -%}。
<link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
{%- endif -%}
ChatGPTが返すレスポンスです：
ご覧の通り、ChatGPTはプロンプトに従うのが非常に上手です。コードを一行ずつ解釈し、コード（とその小さな要素）がどのように動作し、ウェブページ上でどのような結果をもたらすかについて説明を与えてくれました。
別のプロンプトで別のコードを試してみよう：
プロンプト：（さて、プロンプトはあまり具体的にならないようにしよう。）
このコードが何をするのか説明してください：
{%- unless settings.type_header_font.system?-%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
{%- endunless -%}
その返答がこれだ：
ご覧のように、リキッドコードを使用していることを指定しませんでしたが、ChatGPTはそれがテンプレート言語であることを識別することができました。また、コードを一行ずつ説明し、意味のある洞察を提供することもできます。これは、AIツールがプロンプトを越えて見るのに十分賢いことを示しています。
では、最初のプロンプトで使ったものを使って、プロンプトをより具体的にしてみよう：
このリキッドコードを解釈し、非常に簡単な言葉で説明してください。全体を通して使用されているすべてのオブジェクト、タグ、フィルターを特定し、それらを個別に説明してください。
{%- unless settings.type_header_font.system?-%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
{%- endunless -%}
ChatGPTのレスポンス：
より具体的なプロンプトがあれば、ChatGPTはより確実な答えと、より正確な解釈を提供することができた。
テイクアウェイ
この練習から、私たちは多くのことを学んだ：
- ChatGPTはShopify Liquidを深く理解しています。
- 回答の正確さは、プロンプトをどれだけ具体的に書くかにかかっている。
- 正確な回答を得るためには、どのような質問をすればよいかを知らなければならない。
ChatGPTが返す回答に満足できない場合は、「回答を再生成」をクリックすると、同じ質問に対して別の回答を返します。また、上記で使用したのと同じプロンプトを入力することで、ChatGPTが提供した回答と似たようなエッセンスを含んでいるにもかかわらず、ChatGPTによって異なる回答が得られる可能性があることは注目に値します。
読む プログラミングのためのチャットGPT: チャットGPTのための100+コーディングプロンプト
結論
経験豊富なウェブデベロッパーにとって、Shopify Liquidはシンプルなコードであり、変更をより速く、より安全に行うことができます。
しかし、正直なところ、コーディングのバックグラウンドが全くない人にとって、リキッドは学ぶのに圧倒されるものです。特に、CSS、HTML、JSONのようなコードがShopifyストアのバックエンドで調和して使用されるため、どのように動作するかの基本的な理解も必要だからです。
もし、これが大変な作業とストレスに思えるなら、言うまでもなく、一度ミスを犯すと不安になってしまうかもしれません。 ページビルダーを使えば、コードなしでウェブサイトを変更することができます。
Shopify Liquidの学習は一朝一夕でできるものではありません。その全てを理解するためには、一貫して情報の塊を吸収する体系的なプロセスが必要です。ChatGPTを学習アシスタントとして使用することで、コードエディタで見たコードの文脈を簡単に理解することができ、学習段階をより早く、より簡単にすることができます。
ただ、適切なプロンプトを使うことを忘れないでほしい。
