Static

概要

<Static> コンポーネントは、語形の一致や活用、語順の変化を損なうことなく、文を分割したり再利用可能なコンテンツを扱ったりするために使用されます。次の例では、「The beautiful boy plays with the ball」と「The beautiful girl plays with the ball」という 2 通りの別々の翻訳が作成されます。

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

<T>
  美しい<Static>{getSubject(gender)}</Static>がボールで遊んでいます。
</T>;

<Static> コンポーネントは、CLI（コマンドラインインターフェイス）ツールに対して、関数呼び出しを展開し、その関数から返されうるすべてのコンテンツを一覧化するよう指示します。このとき、あらゆる return 文は <T> コンポーネントでラップされているかのように扱われます。

高度な使い方: <Static> コンポーネントは高度な機能であり、翻訳エントリの数が見かけ以上に膨大になる可能性があるため、注意して使用する必要があります。さらに <Static> は、考えられるすべてのコンテンツの組み合わせが静的に解析可能であることを厳密な要件として課します。

詳細については、gt-next@6.8.0 のリリースノートを参照してください。

リファレンス

Props（プロップス）

Prop

Type

説明

Prop	説明
`children`	静的コンテンツを返す関数呼び出しです。CLI（コマンドラインインターフェイス）ツールは、考えうるすべての戻り値を解析します。

将来的には、<Static> は三項演算子、条件文、関数呼び出しなど、より複雑な式もサポートする予定です。

文字列・数値・ブール値のリテラル
ネストされた <Static> および <Var> コンポーネントを含む JSX 式
三項演算子
条件文 (if/else)
他の静的関数の呼び出し

使用例

基本的な使い方

文の構造に影響する動的コンテンツを処理するには <Static> を使用します。

BasicExample.jsx

import { T, Static } from 'gt-react';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

export default function Example({ gender }) {
  return (
    <T>
      <Static>{getSubject(gender)}</Static>は美しいです。
    </T>
  );
}

これにより、次の2つの翻訳エントリが作成されます：

"The boy is beautiful"
"The girl is beautiful"

Variables を使用する場合

静的関数の戻り値で動的なコンテンツを扱うには、<Static> と <Var> を組み合わせます。

WithVariables.jsx

import { T, Static, Var } from 'gt-react';

function getGreeting(title) {
  return (
    <>
      こんにちは、<Static>{getTitle(title)}</Static>。お元気ですか、<Var>{name}</Var>？
    </>
  );
}

export default function Greeting({ title, name }) {
  return (
    <T>
      <Static>{getGreeting(title)}</Static>
    </T>
  );
}

複数の Static コンポーネント

複数の <Static> コンポーネントを使用する場合、翻訳エントリ数が組み合わせ分だけ増加するので注意してください。

MultipleStatic.jsx

import { T, Static } from 'gt-react';

function getSubject(gender) {
  return gender === 'male' ? '男の子' : '女の子';
}

function getObject(toy) {
  return toy === 'ball' ? 'ボール' : 'クレヨン';
}

export default function PlayExample({ gender, toy }) {
  return (
    <T>
      <Static>{getSubject(gender)}</Static>が<Static>{getObject(toy)}</Static>で遊びます。
    </T>
  );
}

これにより、4 つの翻訳エントリ（2 × 2 の組み合わせ）が生成されます：

"boy plays with the ball"
"boy plays with the crayon"
"girl plays with the ball"
"girl plays with the crayon"

サポートされている関数構文

SupportedSyntax.jsx

function getExamples(key) {
  switch (key) {
    case 'literals':
      if (condition1) {
        return '少年';
      } else if (condition2) {
        return 22;
      } else {
        return true;
      }
    case 'jsx':
      return (
        <>
          こんにちは、<Static>{getTitle(title)}</Static>さん。<Var>{name}</Var>さん、お元気ですか？
        </>
      );
    case 'ternary':
      return condition ? '少年' : '少女';
    case 'function_calls':
      return otherStaticFunction();
  }
}

関数はビルド時に解析可能である必要がある
すべての戻りパスは静的に決定できる必要がある
関数の戻り値に含まれる動的コンテンツは <Var> コンポーネントを使用する必要がある
現在は、直接の children としての関数呼び出しのみがサポートされる

Variable コンテンツ

静的関数の戻り値に含まれる、あらゆる動的または Variable なコンテンツは、すべて <Var> コンポーネントでラップする必要があります。

// 正しい例
function getContent() {
  return (
    <>
      Hello, <Var>{userName}</Var>!
    </>
  );
}

// 誤り - ビルドエラーが発生します
function getContent() {
  return <>Hello, {userName}!</>;
}

注意事項

<Static> コンポーネントは、文を分割して扱いつつ、言語間で文法的な正確さを維持できるよう設計されています。
1 つの翻訳において複数の <Static> コンポーネントを使用する場合は、パフォーマンスへの影響を常に考慮してください。
static 関数内のすべての return 文は、<T> コンポーネントでラップされているものとして扱ってください。
<Static> は慎重に使用し、可能な限りシンプルな翻訳構造を優先してください。

次のステップ

翻訳内での可変コンテンツについては、<Var> コンポーネントを参照してください。
メインの翻訳用コンポーネントについては、<T> コンポーネントを参照してください。

概要

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

<T>
  美しい<Static>{getSubject(gender)}</Static>がボールで遊んでいます。
</T>;

詳細については、gt-next@6.8.0 のリリースノートを参照してください。

Prop	説明
`children`	静的コンテンツを返す関数呼び出しです。CLI（コマンドラインインターフェイス）ツールは、考えうるすべての戻り値を解析します。

将来的には、<Static> は三項演算子、条件文、関数呼び出しなど、より複雑な式もサポートする予定です。

文字列・数値・ブール値のリテラル
ネストされた <Static> および <Var> コンポーネントを含む JSX 式
三項演算子
条件文 (if/else)
他の静的関数の呼び出し

使用例

基本的な使い方

文の構造に影響する動的コンテンツを処理するには <Static> を使用します。

BasicExample.jsx

import { T, Static } from 'gt-react';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

export default function Example({ gender }) {
  return (
    <T>
      <Static>{getSubject(gender)}</Static>は美しいです。
    </T>
  );
}

これにより、次の2つの翻訳エントリが作成されます：

"The boy is beautiful"
"The girl is beautiful"

Variables を使用する場合

静的関数の戻り値で動的なコンテンツを扱うには、<Static> と <Var> を組み合わせます。

WithVariables.jsx

import { T, Static, Var } from 'gt-react';

function getGreeting(title) {
  return (
    <>
      こんにちは、<Static>{getTitle(title)}</Static>。お元気ですか、<Var>{name}</Var>？
    </>
  );
}

export default function Greeting({ title, name }) {
  return (
    <T>
      <Static>{getGreeting(title)}</Static>
    </T>
  );
}

複数の Static コンポーネント

複数の <Static> コンポーネントを使用する場合、翻訳エントリ数が組み合わせ分だけ増加するので注意してください。

MultipleStatic.jsx

import { T, Static } from 'gt-react';

function getSubject(gender) {
  return gender === 'male' ? '男の子' : '女の子';
}

function getObject(toy) {
  return toy === 'ball' ? 'ボール' : 'クレヨン';
}

export default function PlayExample({ gender, toy }) {
  return (
    <T>
      <Static>{getSubject(gender)}</Static>が<Static>{getObject(toy)}</Static>で遊びます。
    </T>
  );
}

これにより、4 つの翻訳エントリ（2 × 2 の組み合わせ）が生成されます：

"boy plays with the ball"
"boy plays with the crayon"
"girl plays with the ball"
"girl plays with the crayon"

サポートされている関数構文

SupportedSyntax.jsx

function getExamples(key) {
  switch (key) {
    case 'literals':
      if (condition1) {
        return '少年';
      } else if (condition2) {
        return 22;
      } else {
        return true;
      }
    case 'jsx':
      return (
        <>
          こんにちは、<Static>{getTitle(title)}</Static>さん。<Var>{name}</Var>さん、お元気ですか？
        </>
      );
    case 'ternary':
      return condition ? '少年' : '少女';
    case 'function_calls':
      return otherStaticFunction();
  }
}

関数はビルド時に解析可能である必要がある
すべての戻りパスは静的に決定できる必要がある
関数の戻り値に含まれる動的コンテンツは <Var> コンポーネントを使用する必要がある
現在は、直接の children としての関数呼び出しのみがサポートされる

Variable コンテンツ

静的関数の戻り値に含まれる、あらゆる動的または Variable なコンテンツは、すべて <Var> コンポーネントでラップする必要があります。

// 正しい例
function getContent() {
  return (
    <>
      Hello, <Var>{userName}</Var>!
    </>
  );
}

// 誤り - ビルドエラーが発生します
function getContent() {
  return <>Hello, {userName}!</>;
}

注意事項

<Static> コンポーネントは、文を分割して扱いつつ、言語間で文法的な正確さを維持できるよう設計されています。
1 つの翻訳において複数の <Static> コンポーネントを使用する場合は、パフォーマンスへの影響を常に考慮してください。
static 関数内のすべての return 文は、<T> コンポーネントでラップされているものとして扱ってください。
<Static> は慎重に使用し、可能な限りシンプルな翻訳構造を優先してください。

次のステップ

翻訳内での可変コンテンツについては、<Var> コンポーネントを参照してください。
メインの翻訳用コンポーネントについては、<T> コンポーネントを参照してください。

概要

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

<T>
  美しい<Static>{getSubject(gender)}</Static>がボールで遊んでいます。
</T>;

詳細については、gt-next@6.8.0 のリリースノートを参照してください。

Prop	説明
`children`	静的コンテンツを返す関数呼び出しです。CLI（コマンドラインインターフェイス）ツールは、考えうるすべての戻り値を解析します。

将来的には、<Static> は三項演算子、条件文、関数呼び出しなど、より複雑な式もサポートする予定です。

文字列・数値・ブール値のリテラル
ネストされた <Static> および <Var> コンポーネントを含む JSX 式
三項演算子
条件文 (if/else)
他の静的関数の呼び出し

使用例

基本的な使い方

文の構造に影響する動的コンテンツを処理するには <Static> を使用します。

BasicExample.jsx

import { T, Static } from 'gt-react';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

export default function Example({ gender }) {
  return (
    <T>
      <Static>{getSubject(gender)}</Static>は美しいです。
    </T>
  );
}

これにより、次の2つの翻訳エントリが作成されます：

"The boy is beautiful"
"The girl is beautiful"

Variables を使用する場合

静的関数の戻り値で動的なコンテンツを扱うには、<Static> と <Var> を組み合わせます。

WithVariables.jsx

import { T, Static, Var } from 'gt-react';

function getGreeting(title) {
  return (
    <>
      こんにちは、<Static>{getTitle(title)}</Static>。お元気ですか、<Var>{name}</Var>？
    </>
  );
}

export default function Greeting({ title, name }) {
  return (
    <T>
      <Static>{getGreeting(title)}</Static>
    </T>
  );
}

複数の Static コンポーネント

複数の <Static> コンポーネントを使用する場合、翻訳エントリ数が組み合わせ分だけ増加するので注意してください。

MultipleStatic.jsx

import { T, Static } from 'gt-react';

function getSubject(gender) {
  return gender === 'male' ? '男の子' : '女の子';
}

function getObject(toy) {
  return toy === 'ball' ? 'ボール' : 'クレヨン';
}

export default function PlayExample({ gender, toy }) {
  return (
    <T>
      <Static>{getSubject(gender)}</Static>が<Static>{getObject(toy)}</Static>で遊びます。
    </T>
  );
}

これにより、4 つの翻訳エントリ（2 × 2 の組み合わせ）が生成されます：

"boy plays with the ball"
"boy plays with the crayon"
"girl plays with the ball"
"girl plays with the crayon"

サポートされている関数構文

SupportedSyntax.jsx

function getExamples(key) {
  switch (key) {
    case 'literals':
      if (condition1) {
        return '少年';
      } else if (condition2) {
        return 22;
      } else {
        return true;
      }
    case 'jsx':
      return (
        <>
          こんにちは、<Static>{getTitle(title)}</Static>さん。<Var>{name}</Var>さん、お元気ですか？
        </>
      );
    case 'ternary':
      return condition ? '少年' : '少女';
    case 'function_calls':
      return otherStaticFunction();
  }
}

関数はビルド時に解析可能である必要がある
すべての戻りパスは静的に決定できる必要がある
関数の戻り値に含まれる動的コンテンツは <Var> コンポーネントを使用する必要がある
現在は、直接の children としての関数呼び出しのみがサポートされる

Variable コンテンツ

静的関数の戻り値に含まれる、あらゆる動的または Variable なコンテンツは、すべて <Var> コンポーネントでラップする必要があります。

// 正しい例
function getContent() {
  return (
    <>
      Hello, <Var>{userName}</Var>!
    </>
  );
}

// 誤り - ビルドエラーが発生します
function getContent() {
  return <>Hello, {userName}!</>;
}

注意事項

<Static> コンポーネントは、文を分割して扱いつつ、言語間で文法的な正確さを維持できるよう設計されています。
1 つの翻訳において複数の <Static> コンポーネントを使用する場合は、パフォーマンスへの影響を常に考慮してください。
static 関数内のすべての return 文は、<T> コンポーネントでラップされているものとして扱ってください。
<Static> は慎重に使用し、可能な限りシンプルな翻訳構造を優先してください。

次のステップ

翻訳内での可変コンテンツについては、<Var> コンポーネントを参照してください。
メインの翻訳用コンポーネントについては、<T> コンポーネントを参照してください。

Static

このページについて

Static

このページについて

Static

このページについて

GitHubGitHubでスターを付ける

GitHubGitHubでスターを付ける

GitHubでスターを付ける

GitHubでスターを付ける