メッセージのフォーマット

18waysはデフォルトでwaysParserを使用します。このパーサーは、変数やロケールに応じたフォーマットを処理しながら、ソースコピーを読みやすく保つことを可能にします。

変数

変数には波括弧を使用してください。<T>を使うことで、メッセージの横に値をインラインで保持できます。

tsx
'use client';
 
import { T } from '@18ways/react';
 
export function WelcomeMessage() {
  return <T>Hello {{ name: 'Ada' }}</T>;
}

複数形

文の形が実際に変わる場合は、ICUスタイルの複数形ブロックを使用してください。

tsx
import { T } from '@18ways/react';
 
export function InboxCount({ count }: { count: number }) {
  return (
    <T>{{ count, format: 'plural, =0{No messages} =1{One message} other{{count} messages}' }}</T>
  );
}

日付とお金

実際の Date または amount と currency を持つお金のようなオブジェクトを渡すと、18ways は自動的にフォーマットします。 それは {publishedAt} や {renewalTotal} のようなプレースホルダーでも同様です。

出力を制御したい場合、例えば dateStyle:long やカスタムマネーディバイダーのように、明示的フォーマッターを使用してください。

tsx
'use client';
 
import { T } from '@18ways/react';
 
export function BillingSummary() {
  const publishedAt = new Date('2026-03-14T09:00:00Z');
  const renewalTotal = {
    amount: 1900,
    currency: 'USD',
  };
 
  return (
    <>
      <p>
        <T>Last updated {{ publishedAt }}</T>
      </p>
      <p>
        <T>Renewal total {{ renewalTotal }}</T>
      </p>
      <p>
        <T>Detailed date: {{ publishedAt, format: 'date, long' }}</T>
      </p>
    </>
  );
}

デフォルトでは、金額は小数単位として扱われます。すでに主要単位を持っている場合は、divisor: 1を使用して明示的な金額フォーマッタを使用してください。

選択ブロック

selectを使用するのは、コピーが限られた一連の離散的な値に依存する場合です。

tsx
import { T } from '@18ways/react';
 
export function SignInState({ isSignedIn }: { isSignedIn: boolean }) {
  return (
    <T vars={{ name: 'Ada' }}>
      {{
        isSignedIn,
        format:
          'select, true{Welcome back, {name}} false{Sign in to continue} other{Sign in to continue}',
      }}
    </T>
  );
}

コンポーネントの構成

JSX内で文を一緒に保つことで、18waysは一般的なケースのために実際のUI構造を保持します。 例えば、<T><a href="#">ここをクリック</a>してもっと見る</T>のように、手動でフラグメントを繋ぎ合わせる必要がありません。

tsx
'use client';
 
import Link from 'next/link';
import { T } from '@18ways/react';
 
export function HeroCta() {
  return (
    <T>
      <Link href="/pricing">Click here</Link> to see more
    </T>
  );
}

パーサーをオフにする

@18ways/reactを使用すると、ルートでmessageFormatter="none"を設定するか、カスタムフォーマッタ関数を提供できます。それは高度なエスケープハッチであり、デフォルトのパスではありません。

実用的なルール

文がいくつかの変数を含む完全なフレーズとして書ける場合は、それを1つのメッセージにまとめてください。 そうすることで、コードの断片をつなぎ合わせるよりも翻訳の質が劇的に向上します。

メッセージの書式設定