メインコンテンツまでスキップ

テンプレート構文：ロジックの記述

テンプレート内では、パレット CMS 専用の inazuma code を使って、関数の定義と実行、式の評価などのロジックを記述できます。

テンプレート構文とinazuma code を組み合わせることで、見た目（マークアップ）とロジック（処理）を分離しつつ、柔軟で再利用性の高いテンプレート を記述できます。

inazuma code の特徴や具体的な構文については、後続の章で詳しく解説します。

利用例：

@code: let show_banner = user.logged_in && user.plan === 'pro';

@if ( show_banner )
  <div class="banner">ようこそ、Pro ユーザー！</div>
@endif

単一行のコード：@code:​

1 行のみのコードを記述する場合は、@code: 構文を使用します。

定数の定義や単純な計算に適しています。

@code: let x = 42;

ブロック形式のコード：@code ... @endcode​

複数行にわたるコードを記述したい場合は、ブロック形式の構文を使います。

@code と @endcode の間に、複数行のコードを記述できます。

複雑な処理や関数の定義に適しています。

@code
  let greeting = 'Hello';
  let user = { name: 'Alice', age: 30 };

  let shout = (text) => text.to_upper() + '!';

  let message = shout(`${greeting}, ${user.name}`);
@endcode

変数のスコープ​

宣言した関数や定数は、同じテンプレート内 でのみ有効です。

テンプレートはそれぞれ完全に独立したサンドボックス環境で評価されるため、インクルード先やインクルード元との間でスコープは共有されません。

ただし、必要な値は @include: ディレクティブの props や、後述する @import: と @export: を使って明示的に受け渡せます。

スコープの挙動は JavaScript の let や const に似ており、宣言されたブロック内およびその子スコープからのみ参照可能 です。

まとめ
  • @code: はシンプルな 1 行処理に、@code ... @endcode は複雑な処理や関数の定義に適しています。
  • 評価結果をテンプレートに埋め込むには {{ ... }} 構文を使用します。
  • 変数のスコープは、同じテンプレート内の宣言されたブロックおよびその子スコープです。