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

テンプレート構文：コンテキストの共有

@export: と @import: は、テンプレート間でコンテキスト（関数や定数）を共有するための構文です。

テンプレートのロジックを分離・整理し、再利用性と保守性を大幅に向上できます。

チーム開発や共通ライブラリの構築にも非常に有効です。

基本構文​

テンプレートで定義したコンテキストを、他のテンプレートに共有するには @export: を使います。

@code
  let format_price = (price) => '¥' + price.to_fixed(2);
  let discount = (price, rate) => price * (1.0 - rate);
@endcode

@export: {
  format_price,
  discount,
};

エクスポートされたコンテキストは、別のテンプレート内で @import: によって読み込めます。

@import: {
  format_price,
  discount,
} from 'helpers';

<p>定価：{{ format_price(1000) }}</p>
<p>割引後：{{ format_price(discount(1000, 0.2)) }}</p>

別名（エイリアス）でのインポート／エクスポート​

変数の名前が衝突する場合や、より用途に即した名前で使いたい場合は、as キーワードで別名を指定できます。

エクスポート時に別名を指定：

@code: let greeting = 'Hello';
@export: {
  greeting as default_greeting
};

インポート時に別名を指定：

@import: {
  default_greeting as welcome_message
} from 'text_utils';

<p>{{ welcome_message }}, ユーザーさん</p>

引数とクエリ​

@import: は with 句に対応しているため、インポート先に引数や検索条件を渡せます。

@import: { format_date } from 'helpers' with { props: { locale: 'en' } };
まとめ
  • @export: はテンプレート内で定義された 関数・定数を明示的にエクスポート します。
  • @import: は他のテンプレートにあるエクスポート済みの関数・定数を、現在のテンプレートのスコープに読み込みます。
  • インポート先では読み込んだ関数・定数をローカル変数と同様に使用できます。
  • from 句に指定するのは、エクスポート元テンプレートの コンテンツ ID です。
  • テンプレート同士は サンドボックスで分離されており、export/import を使わない限りスコープは共有されません。
  • @import: は with 句にも対応しているため、props を使った値の受け渡しと併用できます。