2021.10.17

Shopifyの独自言語「Liquid」とは?機能やディレクトリ、構文について徹底解説

Shopifyの独自言語「Liquid」とは?機能やディレクトリ、構文について徹底解説

Shopifyの利用を検討する際に、コンピュータ言語であるLiquidを理解していると判断しやすい事もあります。

多くの方は初めて聞く言語について難しいイメージを持つ場合がありますが、Liquidは他の言語との共通点も多くある言語なので理解しやすい点もあるでしょう。

オンラインのサイトを運営する時にぺージのカスタマイズ機能のある言語なので便利です。

ディレクトリは簡単に言えばファイルを保管するフォルダですが、それぞれのディレクトリは異なる役割を持っています。

基本的な構文は3種類あり理解しやすい内容となっています。

ここでは、独自の言語であるLiquidとは何かや機能、ディレクトリから構文まで紹介します。

Liquidとは 

Liquidは、Rubyを基本としたテンプレートの言語です。

Rubyは日本人の方が開発した言語でアプリケーションソフトウェアを作る時に使用されます。

サイトの動的なコンテンツを記載する言語ですが、静的なコンテンツはHTMLで記載されます。

特徴としては、他言語と同じ様に構文があって変数を使うので、言語に触れた事のある方なら理解しやすいです。

異なる役割のディレクトリを7つ持つので、言語全体を理解する時もそれぞれのディレクトリの用途を理解しておくのもポイントです。

Shopifyで利用されるRubyをべ―スとしたテンプレート言語

LuquidはRubyを基本としたテンプレート言語ですが、テンプレート言語の意味しては別のメインとなる言語に埋め込む事が出来る言語を指します。

実際のプログラムの動作はHTMLの中にLiquidを構文を埋め込み実行されます。

特徴としては、ストアのサイトにおけるデータを動的にぺージに入れる事を可能としています。

Shopify以外で見てみるとPortalやPower Apps等でも利用されているので聞いた事がある方もいるでしょう。

引用元:“Liquid Template Language(Liquidテンプレート言語)って何者?”

サイトの動的コンテンツを記載する言語

動的なサイトのコンテンツを記載する言語なので、サイトの表現が色々広がるのが良いです。

ここで言う動的コンテンツは、サイトを見ている方のリクエストに対して部分的、全体にコンテンツを生成するWebコンテンツの事です。

言語に初めて触れる方にとっては、専門用語の理解も大切なポイントと言えますが、初めに言語の概要を理解出来ると全体を捉える事が出来ます。

動的コンテンツは指示された事に対して後の処理が変化するのでオンラインストアでは重要な機能です。

静的コンテンツはHTMLで記載される

動的なコンテンツはLiquidで記載しますが、サイトの閲覧者から与えられた指示に対してサーバにあるコンテンツを送信して表示する静的コンテンツはHTMLで記載されます。

HTMLと他の言語を組み合わせる事でより魅力あるサイトにする事が可能です。

HTMLだけでも動的なコンテンツに向いていないサイトになってしまい、Liquidだけでも見やすいサイトとは言えないです。

HTMLはホームぺージを作成する際に利用する言語ですが、動的な内容を表示する言語には、PHPだけでなく汎用の言語であるJava等があります。

他の言語と同じ様に構文があり変数を扱う

HTMLでは変数を扱えないのに対してLiquidは構文があり変数を利用出来る利点があります。

例としては中括弧を使い変数を定義します。特徴としては定義した変数を後で利用する事も出来ます。

実際のプラグラムの流れとしては、inputで値を入力して必要な変換等を行い結果をoutputして表示します。

この様な処理はオンラインストアでは、入力したデータに対して必要な表示をする際に使われるので便利です。

動的なコンテンツの処理が行える点は、この言語の大きなメリットと言えます。HTMLに埋め込む際にも、自然な形で言語を記載出来るので良いです。

役割の違う7つのディレクトリで構成

言語の仕様としてそれぞれ役割の違う7つのディレクトリで構成されています。

例としては、ディレクトリはパソコンにおけるデータが保存されている場所である階層を意味しますが、言い換えるとフォルダの様なものになります。

フォルダにはLayoutsやTemplates等の種類があり、フォルダは階層の構造となっています。

階層はLayoutsの中にTemplatesがあり、その中にSectionsがあり最後にSnippetsが中にある構造です。

コードを編集したい時には、管理画面のオンラインストアからテーマに移動して「現在のテーマ」の項目の「アクション」にある「コードを編集」を選択する事で行えます。

Liquidの機能

機能として便利なのがサイトをカスタマイズ出来る事です。

マーケティングを考慮する時はサイトの印象を少しでも良いものにしたいと考えますが、サイトの閲覧者の視点になってカスタマイズ出来る言語は売上にも貢献してくれます。

別の機能としてフィルター、データの出力、タグ、オブジェクトの出す事等が挙げられ、これらの機能を十分に理解して使いこなせば、有益なサイトを作る事が出来ます。

直感的に分かりにくいプログラムの部分では、時間をある程度掛けて慣れる事でストレスをそれ程感じずに言語を使えるでしょう。

他の言語と似た理解で対応出来る点も多いので、機能を沢山利用してサイトをカスタマイズする楽しみがあります。

サイトのカスタマイズが可能

言語でカスタマイズ可能な事は、ストアの機能だけでなくデザインも含まれます。良く言語を理解していれば、ランクの高い機能も使えます。

カスタマイズをする時の注意点として、専門的な知識がある方でもカスタマイズする際は言語の特性を知っておく必要があります。

良くあるミスとして言語は7つのディレクトリで管理されていうので、間違えた場所に記載すればエラーが出てしまう事もあります。

記載したファイルが異なる場所にあれば編集を完了する事は出来ないので、記載する場所は慎重に管理してカスタマイズする必要があります。

引用元:“ShopifyのLiquidとは?機能と使い方、注意点を解説”

8種類のフィルター機能を持つ

機能の1つとしてオブジェクトの出力の結果を修正するフィルターがあります。

全部で8種類のフィルターがあり、例としてArray filtersと言うフィルターがあります。

このフィルターは配列を操作して特定の要素を出力する事も可能です。

他にはMath filtersと言う四則演算、四捨五入等の計算を行えるフィルターもあります。

より良いストアを構築するには、フィルター機能を上手に使いこなす必要があるので、フィルターの種類も覚えて閲覧者が見やすいサイトを作るのもポイントです。

管理画面からデータを出力するオブジェクト

テーマテンプレートで二重中括弧で下記の様に囲まれているのがオブジェクトになり、管理画面からデータを出力する機能があります。

  • {{ product.title }}

このオブジェクトの例では、オブジェクトがproductになりtitleはオブジェクトのプロパティになります。

実際のオブジェクトの言語の処理としては、上記のオブジェクトがコンパイルにより変換されて商品のタイトルを出力します。

オブジェクトは言語の中に多くあるので、カスタマイズを考えている方は一読すると良いです。

タグでテンプレートのロジック、制御フローを作る

他の機能としてテンプレートのロジックや制御の流れを作るタグがあります。

繰り返しの処理も可能なタグは、{% %}の中に記載して使用します。

タグの種類は全部で5種あり、制御のフローを作るControl flow Tagsや、コードブックの繰り返し処理を行うIteration tags等があります。

Control flow tagsでは言語のブロックが実行するかどうかの条件を作成します。

他の言語と同じ感覚でプログラムを組む事が可能なので利便性が高いです。

タグの基本的な意味としてインターネットでサイトをどの様に表示させるか決める命令文と言えるので、カスタマイズを検討中の方は理解しておくと整理しやすいです。

二重中括弧の中には出したいオブジェクトを入れる

二重中括弧の中にオブジェクトを入れるのは出力になり、タグでは{% %}を利用する事で処理を実行させる言語なので理解しやすい面もあります。

簡単なサンプルの実際のプログラムを見てそれぞれの役割を理解してコマンドの打ち方を覚えるのがおすすめです。

カスタマイズでは、複数の機能を活用する為プログラムが複雑になるケースもありますが、言語を一行一行区切って考えるだけでなく、プログラム全体の役割も把握しながらカスタマイズ出来ると良いです。

引用元:“はじめてのShopifyのコーディングで注意する2ポイント”

Liquidのディレクトリ

ディレクトリは別の言い方をすれはファイルデータが入っているフォルダです。

それぞれのフォルダの中には様々な拡張子のファイルが入っています。拡張子は、ファイルの種類を識別する為の文字列でファイル名の後半に記載されています。

フォルダは全部で7種類あり目的別に分類されています。例としてAssetsフォルダには、テーマで使用される画像、スタイルシート等が入っています。

各フォルダの名前と中にあるファイルの種類を把握する事で言語をより詳細に理解出来ます。

Assetsフォルダ

Assetsフォルダの役割は、サイトで使用する画像やJava Scriptを保存しています。Java Scriptは、言語の1つです。

他にはCSSと言われるぺージのスタイルを決めるファイルも保管されています。

このフォルダの使用での注意点として、Assetsフォルダの中にフォルダを作っても、そのフォルダ内のファイルを認識させることは出来ないので知っておいた方が良いでしょう。

ぺージを編集している時に、作ってはいけないフォルダを作成して、エラーが発生すれば時間がその分掛かってしまいます。

ポイントは、フォルダのファイルはAssetsフォルダの中に同じ階層で全て入れておく事です。

Configフォルダ

Configフォルダは、テーマにおける設定の情報が保存されています。

ファイルの種類としては、settings_schema.jsonやsettings_data.json等がありあす。これらのファイルにはテーマのエディタで変更が出来る内容等を定義しています。

他にはテーマエディタで設定されたデータが保存されています。

テーマ設定の画面を見てみると、色やカート、ソーシャルメディア、チェックアウト等の項目がありますが、これらの変更内容等を保存しています。

テーマエディタで設定を変更していると意識しないですが、実際にはこららのConfigフォルダ内のファイルのデータを変更しています。

Layoutsフォルダ

Layoutsはその名前の通り、テーマのレイアウトを決めるファイルが保存されています。

このフォルダに入っているtheme.liquidファイルはサイトのレイアウトを決めるヘッダーやフッターだけでなくタグも構成する大切なファイルです。

実際のカスタマイズでは、サイトの全体を変更したい時は、theme.liquidに言語を記述していきます。

一度でレイアウトを決めるのはサイト構築する際に難しいので、変更しながらレイアウトが決定していくとスムーズです。

知っておいた方が良い点として、決済画面のカスタマイズにはShopify Plusを契約する必要があるので知っておいた方が良いです。

Localesフォルダ

Localsフォルダは言語についての設定フォルダとなっています。

サイトで利用される「ありがとうございます。」等を編集出来る利点があります。

ストアの運営を考える時は、サイトの文言でニュアンスを変えたい場合があるので、Localsフォルダを利用してストアにあった言葉に変更するのもマーケティング上効果的です。

サイトで表示される文言については、管理画面からも変更出来るので知っておいた方が使い方の幅が広がります。

気を付けた方が良い事として、Localsフォルダ内のファイルを上書きしてしまうミスも考えられるので、ファイルの取扱いには注意しましょう。

Sectionsフォルダ

Sectionsのフォルダは、それぞれのページのパーツを保存しています。

仮にテーマファイルを自作した場合は、Sectionsフォルダはないので自ら作る事になります。

テーマファイルを自分で作る時は、事前にどの様な作業が他に発生するのか知っておく必要があります。

このフォルダ内の編集は、schemaと言われる内容記載してテキストや画像を変更します。

Sectionsフォルダは、サイトのパーツを保管するのでサイトのイメージを決める大切なディレクトリと言えます。

Snippetsフォルダ

別のディレクトリとしてSnippetsフォルダがありあす。

このフォルダはアイコンやサイトナビゲーション等の細かパーツに該当します。

SectionsとSnippetsは両方ともサイトのパーツを保存しておくフォルダになります。

2つの違いは、管理画面で編集出来るのがSectionsであるのに対してSnippetsは出来ません。

実際のSnippetsの利用は、小さいボタンやアイコン等を作る時に使われる傾向があります。それに対してSectionsは、問合せフォーム等の大きなパーツで使用されます。

Templatesフォルダ

Templatesフォルダには、それぞれのぺージにおけるテンプレートのファイルが保存されています。

ファイルの拡張子としてはliquidが多く、例えばblog.liquidのファイルはブログの一覧ページについてのファイルとなっています。

他には、カートのページはcart.liquidに保存されていて、index.liquidはトップぺージとなっています。

Templatesのファイルの種類は多いので、どの様な役割をしているか知っておくと良いです。

Liquidの構文とその使い方

言語には構文が存在しますが、Liquidも同じ様な構文で構成されています。

構文の種類としては、アウトプットをする構文やロジックやループ、条件追加のフィルターの構文等があります。

個々の構文を作成する際の記載方法は異なりますが、種類が多くないので覚えてしまえば使えるでしょう。

構文はそれぞれ違う目的で使用されるので、役割も異なります。

フィルターの構文は、文字列を修正する際に使用するのに対して、ロジックの構文はサイトには出力されないロジックを使う時に記載します。

アウトプットの構文

アウトプットの構文では、ぺージにおけるコンテンツを表示する際に使用します。

書き方としては、二重中括弧の中にコードを記載します。

記載されるコードは、事前に定義されているオブジェクトやオブジェクトのプロパティ、文字列となっています。

言い換えると言語の中で定義した変数を表示する機能がアウトプットの構文にはあります。

ロジックやループの構文

ロジックやループの構文は、{%%}を利用して記載されます。

%と%の間にロジックを記載します。ロジックの内容は、for文、if文、変数の宣言等があります。

ロジックの意味は他の言語と同じような解釈が可能なので、経験者はスムーズに理解出来るでしょう。

この構文の特徴は、サイトには表示されない点です。

条件追加のフィルター

条件を追加する際に使用するフィルターは、出力するものを変化させる為に使われます。

使い方は、{{}}の中に出力させる内容を|で区切り使用します。

例としては下記の様な記載方法となり、処理された表示はHelloとなります。

このフィルターの例は一例でしかないですが、フィルターには多くの書類があるので必要に応じて覚えていくのが良いです。

  • {{ ‘hello’ | capitalize }}

まとめ:Shopifyの独自言語「Liquid」とは?機能やディレクトリ、構文について徹底解説

広く知られているShopifyを利用してカスタマイズを可能とするLiquidは、納得のいくオンラインストアを作るのに必要な言語と言えます。

タグを利用してロジックを作る事が可能なので必要な処理を行える言語と言えます。

言語を理解する時に大切なポイントとしてディレクトリの理解が挙げられます。

ディレクトリは言い換えるとフォルダを意味して、それぞれのフォルダには様々な役割のファイルが保管されています。

フォルダの中のファイルを実際に編集する時は、慎重に記載する事が大切です。

エラーが出た場合は、簡単に対処出来るケースは良いですが、編集した内容のどこに問題があるか不明な場合は修正に時間を要する時もあるので注意が必要です。

構文はアウトプット、ロジックやループ、フィルター等がありそれほど難しい内容ではないですが、簡単な構文の記載を参考にして理解を深めるのがおすすめです。

どの言語にもそれぞれ他の言語と違った特徴があるので、どの点が特徴的なのか把握出来れば、他の言語の経験者であればスムーズに習得出来るでしょう。

他の言語の経験がない方は、言語の概要を理解して徐々にプログラムのポイントを押さえると良いです。

様々なカスタマイズを可能とするLiquidを使用し、ストアの売上の向上につながる様に日々更新していくのがおすすめです。

Shopi Labでは、Shopifyの運用のマーティングの方法について分かりやすく説明していて、ネットショップの運用の後のサポート等も行います。気になる方は気軽にお問合せ頂ければ丁寧に対応致します。

Shopify experts(エキスパート)ならShopi Lab Shopify experts(エキスパート)ならShopi Lab
監修者
黒岩俊児
黒岩俊児

shopify 制作チーム責任者・テクニカルディレクター 株式会社セルフプラスCEO

Shopifyサイト制作のスペシャリスト。本業であるサイト制作に加え、公認のShopify expertとして数々のShopifyサイトを手掛けている。2021年7月よりShopifyに関する様々な一次情報を得るため、自らShopify本社のあるカナダへ移住。

この監修者の記事一覧

あなたにおすすめの記事

よく読まれている記事

この記事を見た人はこんな記事も見ています

お問い合わせ

Shopi Lab(ショピラボ)

Shopi Lab(ショピラボ)をご覧のみなさまへ

Shopi Lab(ショピラボ)では、Shopifyのアプリや構築制作方法、運用マーケティング手段についてはもちろん、自社のECサイトを構築・運用する上で必要な情報を紹介しております。現在日本では開発業者の数が少ないため、検索しても役立つ情報が少ないことが現状です。そのためShopi Lab(ショピラボ)では、今後Shopifyの導入を検討している企業担当者様へ向けて、正確な役立つ情報を発信して行くことを心掛けております。 企業担当者様については、Shopify導入に対してご不明点や懸念事項がございましたら、お問い合わせ窓口よりお気軽にお問い合わせください。 また他カートをご利用中でShopifyへの乗り換えをご検討中の企業様についても、ご支援が可能でございます。世界シェアNo.1のECプラットフォームが日本で展開を初めて2年が経ちましたが、Shopi Lab(ショピラボ)ではさらにShopifyの魅力を発信していきます。