LiquidJSにて自作フィルターを使う方法

2023/05/28（日）

LiquidJSを使うとShopifyのLiquidテンプレートエンジンをクライアントサイドで使うことができますが、内部で使えるフィルターは必ずしもShopifyのLiquidテンプレートエンジンと同じではありません。

例えば数字をカンマ区切りで表示したい場合、ShopifyのLiquidテンプレートエンジンでは{{ 123456789 | money_without_currency }}とすると123,456,789と表示されますが、LiquidJSではこれに該当するフィルターが存在しません。

ですがLiquidJSでは割りと簡単に自作フィルターを追加することができます。

以下は{{money_without_currency}}と同様にカンマ区切りで数字を表示出来る{{number_with_delimiter}}というフィルターを追加する例です。

import { Liquid } from 'liquidjs';

const engine = new Liquid();
const appDiv: HTMLElement = document.getElementById('app');

/**
 * 数字をカンマ区切りに変換する
 * @param number
 */
const exchangeNumberWithDelimiter = (number: number) => number.toLocaleString();

// フィルターを追加登録
engine.registerFilter('number_with_delimiter', exchangeNumberWithDelimiter);

// パースとレンダリング
engine
  .parseAndRender('{{123456789 | number_with_delimiter}}')
  .then((render) => {
    console.log(render); // 123,456,789
    appDiv.innerHTML = render;
  });

フィルターで実行したい関数と、それを登録するregisterFilterメソッドを用意すれば簡単に自作フィルターを追加することができます。

参考：LiquidJS - Register Filters