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-next';

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-next';

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-next';

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

function getObject(toy) { 
  return toy === "ball" ? "ball" : "crayon"
}

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

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

"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> は必要な場合に限って慎重に使用し、可能であればよりシンプルな翻訳構造を優先してください。

次のステップ

翻訳内で Variable コンテンツを扱う方法については、<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-next';

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-next';

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-next';

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

function getObject(toy) { 
  return toy === "ball" ? "ball" : "crayon"
}

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

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

"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> は必要な場合に限って慎重に使用し、可能であればよりシンプルな翻訳構造を優先してください。

次のステップ

翻訳内で Variable コンテンツを扱う方法については、<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-next';

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-next';

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-next';

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

function getObject(toy) { 
  return toy === "ball" ? "ball" : "crayon"
}

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

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

"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> は必要な場合に限って慎重に使用し、可能であればよりシンプルな翻訳構造を優先してください。

次のステップ

翻訳内で Variable コンテンツを扱う方法については、<Var> コンポーネントを参照してください。
主な翻訳用コンポーネントについては、<T> を参照してください。

Static

このページについて

Static

このページについて

Static

このページについて

GitHubGitHubでスターを付ける

GitHubGitHubでスターを付ける

GitHubでスターを付ける

GitHubでスターを付ける