Liquidテンプレートエンジン

Liquidテンプレートエンジンは、柔軟性とシンプルさを兼ね備えたテンプレートエンジンで、主にRubyで開発され、現在では多くのプラットフォームで利用されています。本ハンドブックでは、Liquidの基本的な構文から応用例までを網羅します。

概要

Liquidは、動的なWebサイトや静的サイトジェネレータでよく使用されるテンプレートエンジンです。その特徴は以下の通りです：

• 安全性 - 制限付きテンプレート構文により、ユーザーが書いたコードが意図せず危険な操作を実行するのを防ぎます。
• 柔軟性 - 構文がシンプルでありながら強力な機能を提供します。
• ポータビリティ - 多くのプログラミング言語やフレームワークで利用可能です。

基本構文

Liquidのテンプレートは主に3つの要素から構成されます：

• 出力タグ：{{ ... }} の形式で、変数や計算結果を出力します。
• ロジックタグ：{% ... %} の形式で、制御構造やフィルターを適用します。
• テキスト：静的なHTMLやプレーンテキスト。

例

以下は基本的なLiquidテンプレートの例です：

<h1>Welcome, {{ user.name }}!</h1>
{% if user.admin %}
<p>You have administrator privileges.</p>
{% else %}
<p>You are a regular user.</p>
{% endif %}

タグ

Liquidでは、以下のようなロジックタグを使用できます：

if/else

条件分岐を行うためのタグ。

{% if condition %}
  <!-- 条件が真のとき -->
{% else %}
  <!-- 条件が偽のとき -->
{% endif %}

for

ループ処理を行うタグ。

{% for item in items %}
  <li>{{ item }}</li>
{% endfor %}

capture

変数に値を代入するためのタグ。

{% capture greeting %}Hello, {{ user.name }}!{% endcapture %}
<p>{{ greeting }}</p>

フィルター

Liquidでは、フィルターを使用してデータを変換できます。フィルターはパイプ (|) 記号を用いて適用します。

例

{{ "hello" | upcase }}  <!-- 出力: HELLO -->
{{ "Liquid" | append: " Template Engine" }}  <!-- 出力: Liquid Template Engine -->

主なフィルター一覧

• upcase: 文字列を大文字に変換
• downcase: 文字列を小文字に変換
• append: 文字列を連結
• replace: 特定の文字列を置換
• size: 配列や文字列のサイズを取得

オブジェクト

Liquidテンプレート内で使用されるオブジェクトの例を以下に示します。

配列

{% assign fruits = "apple, orange, cherry" | split: ", " %}
{% for fruit in fruits %}
  <li>{{ fruit }}</li>
{% endfor %}

ハッシュ

{% assign user = {"name": "John", "age": 30} %}
<p>{{ user.name }} is {{ user.age }} years old.</p>

応用例

ページ分割 (Pagination)

{% for article in articles offset:10 limit:5 %}
  <h2>{{ article.title }}</h2>
  <p>{{ article.content }}</p>
{% endfor %}

カスタムフィルターの追加

Liquid自体にはカスタムフィルターを追加可能です（使用している実装による）。

外部APIからのデータ利用

Liquidテンプレートは静的データが基本ですが、バックエンドを通じて動的データと組み合わせることもできます。

トラブルシューティング

Liquidテンプレートのデバッグに役立つ方法を以下に示します：

• エラーのログを確認 - テンプレートエンジンがエラー内容を詳細に出力します。
• 変数の出力 - {{ variable | inspect }} を使用してデバッグ。

まとめ

Liquidテンプレートエンジンは、シンプルでありながら柔軟性が高く、さまざまな場面で活用できます。このハンドブックを基に、ぜひLiquidテンプレートを使いこなしてください！