はじめに

以前、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

２つ目は/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を既に使っている人がいたら是非活用してみてください！

Liquid公式Introduction

【DX人材を育成する新サービスのご案内】

このたび、ノーコード・ローコード開発に興味のある方に向けて、Power Platformを活用した「クラウドアプリ開発実践講座」をご用意しました！
さっそく、金融機関様などで全社的な研修にご採用をいただいております。
ほぼマウス操作だけでアプリが作れてしまう時代。プログラミング未経験の方でも、社内業務の自動化やデータ可視化ツールの開発をリードできるようになります。
いまならお試し60分無料体験講座を開催中です！ぜひお試しください☆

クラウドアプリ開発実践講座
https://sales.fixer.co.jp/dx-training