LiquidJSにて自作フィルターを使う方法
この記事はにメンテナンスが行われています。
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メソッドを用意すれば簡単に自作フィルターを追加することができます。