shopifyの紹介④ liquidについて
リキッドマスターズと名乗っているからには、一番重視しているのがこの「liquid」と言う・・・普段は全く聞き馴染みのない物です。liquidって何か？って一言で言えば
shopify専用のプログラミング言語
と言う事になります。専用なので他では全くと言っていいほど使えません！が、しかし！！shopifyの制作をする上では最も重要な言語です。
（この辺プログラミング言語って言わないよねぇ。みたいな話をする人もいるかもですが、いいんです！プログラミング言語なんです。細かい事は気にしない）
なので今回はざっくりと
Liquidの基本
について書かせて頂います。
これを読むと、リキッドの概念が何となくつかめるかと思いますよ！
- そもそもliquidって？
- ２種類の囲い方
- オブジェクトとプロパティ
- よく使うのは３つ
の順番に解説していますので、気になる方はご一読ください。
1．そもそもliquidって？
なんせここがわからない場合も多いですよね。
shopifyはECサイトなわけですが、ECサイト上のテーマ設定には色んなliquidと言うプログラムで書いた物を表示する機能があります。
ECサイトですから想像してみて下さい
- 商品の名前
- 商品の価格
- 商品の在庫数
- etc...
色々必要になりそうなデータってありますよね？！
別に商品データにかかわらず、liquidは注文データ、顧客データ、等々のデータをshopifyの中にあるデータベースから引っ張ってくるのが最大の仕事です。
その引っ張ってくる方法と、引っ張ってきた物をテーマ上に反映するためのプログラムが liquid で、shopifyでECサイトを作るうえでは絶対に外せない、データベース操作をする為の物だと思って下さい。
余談ですがlliquidはそのベースとなっているのがrubyなので、たまにrubyっぽい所があります。（いや、ruby書けないですけど）
2.２種類の囲い方
liquid自体はshopifyを構成するliquidファイル（拡張子が.liquid）のファイル内に書き込める言語です。例としてよく見るのだと
- {{ product.title }}
- {% assign price = product.price %}
みたいな2種類の書き方があります。日本語にしてみると
波括弧２重 or 波括弧パーセント
の2種類になるわけですね。
・波括弧２重
こちらは単純に「呼び出し」に使う場合に使います。上の例だと {{ product.title }} と書いてあるので、英語読んで字のごとく「商品タイトル」を表示してくれます。
・波括弧パーセント
コッチはよくわからんですよね。まずassignって何？って話ですが、これは使うプログラミングの宣言と言えばいいのかな？assignは「変数を宣言します」
変数名は「price」でその中身は（＝）「商品価格」です。と言うプログラムになります。これで「price」と言う変数に商品価格が代入されたので、商品価格を表示したい時には {{ product.price }} でもいいですが、ただ {{ price }} でも表示出来る事になる！ってわけです。
3.オブジェクトとプロパティ
書き方が２つある！って事がわかった次に認識しておきたいのがオブジェクトとプロパティっていったい何なのか？って事ですね。
{{ product.title }}
２の章で書いてた、このliquidにそれらが含まれていて product の部分がオブジェクトで title の部分がプロパティです。
プログラミングに元々強い人はこれがjson形式で定義されてるよ！って聞けば「あーなる程ですね！」ってなるかもしれませんが、一般的には「なんのこっちゃさっぱり」だと思います。
要するにproductは商品ですからproductオブジェクトは「商品データの塊」です。塊の中にはタイトル（title）や価格（price）、商品写真（image）などがデータベースで格納されています。
{{ product.title }} = 商品データ.の中のタイトル
って書いてる様な感じです。「.」の前がオブジェクト、そして［.］の後ろがプロパティだと言う事をわかってからliquidを眺めていると、何となく見えてくるものがあるはずですよ！
4.よく使うのは３つ
波括弧２重の方は基本的に「ただ書き出す」役割なので、覚える事が少ないですが（今回は割愛してますがフィルターなんかで色々やれます。）
波括弧パーセント の方はプログラミング言語らしいプログラミングその物？なので、覚える事が多いんです。とは言え、僕の経験からすると８０％以上は３つだけ覚えれば何とかなります。
どんなプログラミング言語でも基礎ともいえる３つでshopifyでは
- assign （変数定義）
- if （条件分岐）
- for （ループ処理）
この３つです。どんなプログラミング言語もこの3種類の変形だったりするので、liquidを覚える際もこの３つを優先的に使えるようになりましょう！
まとめ
liquidで実務していくうえで必要なのは
- assign （変数定義）
- if （条件分岐）
- for （ループ処理）
の使い方を覚えて、
【オブジェクト と プロパティ】の操作のしかた、持ってくる方法をひたすら考える事なんですよ。
なんせ専門用語で、教材や情報が少ないのは、ゴリゴリのエンジニアさんにとっては「専門的」過ぎて、普段から忙しいのに汎用性のない言語を新しく学習している場合ではない！と言うのが多いのかな？なんて思いますが、フリーランスでshopify構築を目指す方はこの「プロが忙しくて手が回らないけど、需要は高い」と言う所がポイントです！
穴埋めしてくる人材は常に求められてますからね＾＾
---------
ちなみにリキッドマスターズの基礎講座だと上級編でその辺りをしっかりと動画解説していますよ。まさに基礎講座なので基礎はつかめるかと思います。
コミュニティ本体の方では、それをさらにブラッシュアップして商品データに限らず、どうやって「加工」するのか？「これとこれ組み合わせて」処理してみよう！とかより実践的な事を６週間かけて学んでいくような感じになります。６週間後には基本的なliquid操作が出来て、自作でsectionが作れる知識がしっかり身に付きます。