FIXER cloud.config Tech Blog
Liquid Template Language（Liquidテンプレート言語）って何者？
2021年06月18日 11時00分更新
本記事はFIXERが提供する「cloud.config Tech Blog」に掲載された「Liquid Template Languageって何者？」を再編集したものです。
目次
はじめに
Liquid Template Languageとは
何ができる？
使用例
1.オブジェクト・データの表示
2.Filters
3.変数定義
4.条件分岐
5.JavaScriptへの変数渡し
最後に
はじめに
以前、Power Apps Portalを触っていた時に初めてLiquid Template Languageというものに遭遇しました。当時は必要最低限なことしか調べてなかったのですが、自分と同じようにまだ馴染みがない人にちょっとした紹介も兼ねて調べ直してみました。
Liquid Template Languageとは
Liquid Template Language（以後Liquid）とはECサイトプラットフォームで有名なShopifyが2006年に作ったテンプレート言語です。（意外と前からありました）
テンプレート言語という単語もあまり聞き馴染みがなかったのですが、私と同じような人が質問をしていました。
Q. テンプレート言語って何？？
A. 要は別のメインとなる言語に埋め込める言語だよ。 例えば、PHPは（厳密にテンプレート言語とは言い切れないけど）HTMLの中にPHPタグで囲んで埋め込むことができるよね。こういう使われ方をする言語だよ。
https://stackoverflow.com/questions/4026597/what-is-a-templating-language
こんなLiquidですが、名前を聞いたことがあるサービスでいうとShopifyはもちろんPower Apps PortalやTwillioなどで使われており、Jamstackアーキテクチャの静的サイトジェネレータ一覧のページでも導入しているプラットフォームがちらほら見受けられます。（GitHubに導入アプリ一覧もあります）
何ができる？
Liquidを組み込んでいるWebアプリの持っている動的コンテンツ（日時やWebページ、ログインユーザーの情報など）やそれをそれらを用いたロジックをHTML、JavaScriptに手軽に埋め込むことができます。 と、言葉だけではイメージが湧きにくいので使用例を次で紹介します。
使用例
Liquidは中括弧をタグとして囲み、その書き方は大きく二種類。 オブジェクト・データの表示は二重の中括弧{{ }}、ロジックは%付きの中括弧{% %}で囲んで書きます。
1.オブジェクト・データの表示
これはWebページのタイトルを表示するサンプルです。表示するオブジェクトを二重中括弧で囲んでいます。
// Input
{{ page.title }}
↓
// Output
Sample page
2.Filters
オブジェクト・データを表示するときに前処理で使えるFiltersが用意されています。数値演算や文字列操作などがあります。これらを使用するときは表示するデータにパイプ | で繋げていきます。
1つ目は数値の絶対値を取っています。
// Input
{{ "-19.86" | abs }}
↓
// Output
19.86
2つ目は/my/fancy/urlという文字列のmyをyourに置換し、末尾に.htmlを追加しています。
// Input
{{ "/my/fancy/url" | replace: "my", "your" | append: ".html" }}
↓
// Output
/your/fancy/url.html
3.変数定義
変数を定義するときには%付きの中括弧{% %}を使用し、以下のように書きます。定義した変数を後に使うことももちろん可能です。
// Input
{% assign value = "cake" %}
{{ value | replace: "c", "t" }}
↓
// Output
take
4.条件分岐
if文やcase文と行った条件分岐も書くことができます。以下はログインユーザーがいるときはユーザー名を表示するサンプルです。
// Input
{% if user %}
Hello {{ user.name }}!
{% else %}
Hello Guest User!
{% endif %}
↓
// Output （If user logs in, display user name）
Hello Taro!
5.JavaScriptへの変数渡し
HTMLへの埋め込みをよく見かけますが、JavaScriptへ変数を渡すこともできます。
{% assign username = user.name %}
var userName = "{{ username }}";
最後に
この記事ではLiquid Template Languageの紹介をしました。
もう少し詳しいことは公式ドキュメントをご覧いただければと思いますが、また実際に導入して動かしてみた記事も書ければと思います。もしShopifyやPower Apps Portalを既に使っている人がいたら是非活用してみてください！
瓦井 太雄／FIXER
温泉巡りや映画、スポーツ鑑賞が好きです。IFTTT や Workflow でしていたことを Power Automate でもしてみたい。
