shopifyの紹介④ liquidについて

shopifyの紹介④ liquidについて

22 年 04 月 11 日

リキッドマスターズと名乗っているからには、一番重視しているのがこの「liquid」と言う・・・普段は全く聞き馴染みのない物です。liquidって何か?って一言で言えば

shopify専用のプログラミング言語

と言う事になります。専用なので他では全くと言っていいほど使えません!が、しかし!!shopifyの制作をする上では最も重要な言語です。

(この辺プログラミング言語って言わないよねぇ。みたいな話をする人もいるかもですが、いいんです!プログラミング言語なんです。細かい事は気にしない)

なので今回はざっくりと

Liquidの基本

について書かせて頂います。

これを読むと、リキッドの概念が何となくつかめるかと思いますよ!

  1. そもそもliquidって?
  2. 2種類の囲い方
  3. オブジェクトとプロパティ
  4. よく使うのは3つ

の順番に解説していますので、気になる方はご一読ください。

1.そもそもliquidって?

なんせここがわからない場合も多いですよね。

shopifyはECサイトなわけですが、ECサイト上のテーマ設定には色んなliquidと言うプログラムで書いた物を表示する機能があります。

ECサイトですから想像してみて下さい

  • 商品の名前
  • 商品の価格
  • 商品の在庫数
  • etc...

色々必要になりそうなデータってありますよね?!

別に商品データにかかわらず、liquidは注文データ顧客データ、等々のデータをshopifyの中にあるデータベースから引っ張ってくるのが最大の仕事です。

その引っ張ってくる方法と、引っ張ってきた物をテーマ上に反映するためのプログラムが liquid で、shopifyでECサイトを作るうえでは絶対に外せない、データベース操作をする為の物だと思って下さい。

余談ですがlliquidはそのベースとなっているのがrubyなので、たまにrubyっぽい所があります。(いや、ruby書けないですけど)

 

 

2.2種類の囲い方

liquid自体はshopifyを構成するliquidファイル(拡張子が.liquid)のファイル内に書き込める言語です。例としてよく見るのだと

  • {{ product.title }}
  • {% assign price = product.price %}

みたいな2種類の書き方があります。日本語にしてみると

波括弧2重 or 波括弧パーセント

の2種類になるわけですね。

・波括弧2重

こちらは単純に「呼び出し」に使う場合に使います。上の例だと {{ product.title }} と書いてあるので、英語読んで字のごとく「商品タイトル」を表示してくれます。

・波括弧パーセント

コッチはよくわからんですよね。まずassignって何?って話ですが、これは使うプログラミングの宣言と言えばいいのかな?assignは「変数を宣言します」

変数名は「price」でその中身は(=)「商品価格」です。と言うプログラムになります。これで「price」と言う変数に商品価格が代入されたので、商品価格を表示したい時には {{ product.price }} でもいいですが、ただ {{ price }} でも表示出来る事になる!ってわけです。

 

 

3.オブジェクトとプロパティ

書き方が2つある!って事がわかった次に認識しておきたいのがオブジェクトとプロパティっていったい何なのか?って事ですね。

{{ product.title }} 

2の章で書いてた、このliquidにそれらが含まれていて product の部分がオブジェクトで title の部分がプロパティです。

プログラミングに元々強い人はこれがjson形式で定義されてるよ!って聞けば「あーなる程ですね!」ってなるかもしれませんが、一般的には「なんのこっちゃさっぱり」だと思います。

要するにproductは商品ですからproductオブジェクトは「商品データの塊」です。塊の中にはタイトル(title)や価格(price)、商品写真(image)などがデータベースで格納されています。

{{ product.title }} = 商品データ.の中のタイトル

って書いてる様な感じです。「.」の前がオブジェクト、そして[.]の後ろがプロパティだと言う事をわかってからliquidを眺めていると、何となく見えてくるものがあるはずですよ!

4.よく使うのは3つ

波括弧2重の方は基本的に「ただ書き出す」役割なので、覚える事が少ないですが(今回は割愛してますがフィルターなんかで色々やれます。)

波括弧パーセント の方はプログラミング言語らしいプログラミングその物?なので、覚える事が多いんです。とは言え、僕の経験からすると80%以上は3つだけ覚えれば何とかなります。

どんなプログラミング言語でも基礎ともいえる3つでshopifyでは

  • assign (変数定義)
  • if (条件分岐)
  • for (ループ処理)

この3つです。どんなプログラミング言語もこの3種類の変形だったりするので、liquidを覚える際もこの3つを優先的に使えるようになりましょう!

 

まとめ

liquidで実務していくうえで必要なのは

  • assign (変数定義)
  • if (条件分岐)
  • for (ループ処理)

の使い方を覚えて、

オブジェクト と プロパティ】の操作のしかた、持ってくる方法をひたすら考える事なんですよ。

なんせ専門用語で、教材や情報が少ないのは、ゴリゴリのエンジニアさんにとっては「専門的」過ぎて、普段から忙しいのに汎用性のない言語を新しく学習している場合ではない!と言うのが多いのかな?なんて思いますが、フリーランスでshopify構築を目指す方はこの「プロが忙しくて手が回らないけど、需要は高い」と言う所がポイントです!

穴埋めしてくる人材は常に求められてますからね^^

 

---------

ちなみにリキッドマスターズの基礎講座だと上級編でその辺りをしっかりと動画解説していますよ。まさに基礎講座なので基礎はつかめるかと思います。

コミュニティ本体の方では、それをさらにブラッシュアップして商品データに限らず、どうやって「加工」するのか?「これとこれ組み合わせて」処理してみよう!とかより実践的な事を6週間かけて学んでいくような感じになります。6週間後には基本的なliquid操作が出来て、自作でsectionが作れる知識がしっかり身に付きます。