こんにちは。櫻井です。
Shopifyの環境構築の仕方について調べれば調べるほどShopifyのテーマに使われているLiquidという言語について理解しないと話にならなのがわかってきました。でも、日本語のドキュメントがまじで全然ないんです。しょうがないので自力でGoogle先生とか周りの人に意味を聞きながらどうにか訳しながらある程度理解できたので今日はLiquidって何？ってところから説明していこうと思います。
Shopifyで使われているLiquidって何？
LiquidはShopifyがRUbyで作成したテンプレート言語でGitHubのオープンソースプロジェクトとして公開されています。shopifyテーマの根幹となっていて動的コンテンツの読み込みに使われます。
Liquidって何ができるの？
Liquidはshopifyストアに入力されたデータを入手してWebページに使用することができます。つまりCMSみたいなことができるってことです。(多分。。)
Liquidの構文
LiquidにはPHPなど、他のプログラミング言語と同様に変数のやり取りやif文のようなロジックや制御、データの出力などができる仕組みがあります。Liquidの構文はHTMLとの区別がつきやすいように区切り文字に囲われています。
{{ }}が変数などのデータの出力を表し、{% %}がif文のようなロジックや制御の流れを表します。
Liquidのコードには主に三つの機能があります。
・Objects
・Tags
・Filters
です。順に説明していきます。
Objects
ObjectsはShopify admminからのデータを出力します。記述の仕方は{{ }}で出力したいデータのオブジェクトを囲む形になります。例えば次のように書きます。
{{ product.title }}
この例ではproductというオブジェクトのtitleプロパティを出力します。projectオブジェクトのプロパティについて詳しく知りたい場合はLiquid referenceを読んでみてください。
ちなみに、{{ product.title }}というLiquidオブジェクトはShopifyテーマの商品を登録する箇所の商品のタイトルに当たります。なので、コードがコンパイルされ、商品ページに表示される時、{{ product.title }}には商品のタイトルが入ります。product以外にもLiquidで元から用意されているオブジェクトは他にもありますので詳しく知りたい方は<Liquid objectsのページをみてください。
Tags
Tagsはif文などのロジックやコンテンツの制御をするために使います。Tagsは{% %}で囲って表します。{% %}で囲まれたテキストは{{ }}で囲んだ時のように実際のWebページで表示されるたりはしません。
なので、表品が売り切れていた時と商品がある時で異なる内容を表示させることができます。
{% if product.available %}
<h2>Price: $99.99</h2>
{% else %}
<h2 class="sold-out">Sorry, this product is sold out.</h2>
{% endif %}
この例だと、商品がある場合は「Price: $99.99」が表示され、ない場合は「Sorry, this product is sold out.」が表示されます。
tagsは様々なタイプに分かれているので詳しく知りたい場合はこちらをみてください。
・Control flow tags
・Iteration tags
・Theme tags
・Variable tags
・Deprecated tags
Filters
filtersはオブジェクトや変数の出力の内容を変更するために使います。filtersはオブジェクトと同じく{{ }}を使いますが、filtersはさらに|を使って表します。例えば次のように表します。
{{ 'hello, world!' | capitalize }}
capitalizeは単語の一文字目を大文字に変えてくれるfiltersです。なので出力は「Hello, world!」になります。複数のfiltersを使用することもできます。例えば
{{ 'hello, world!' | capitalize | remove: "world" }}
removeは:の後に続く文字列を削除してくれるfiltersです。なので出力は「Hello, !」になります。複数のfiltersを使用する場合は左から右に処理がされて行くので注意してください。
filtersは以下の8つのタイプに分類されます。詳しく知りたい場合はこちらをみてください。
・Array filters
・Color filters
・HTML filters
・Math filters
・Money filters
・String filters
・URL filters
・Additional filters
まとめ
今回はLiquidって何？っていう根本的なところからお話ししました。どういうものなのか、何ができるものなのかがわかっていただけていたら幸いです。
