# General Translation React SDKs (gt-react, gt-next, gt-react-native): Lint ルール URL: https://generaltranslation.com/ja/docs/react/reference/lint-rules.mdx Docs index: https://generaltranslation.com/llms.txt Description: React Core linter ルールにより、翻訳可能なコンテンツを静的かつ適切に保ちます。React Core linter ルールのリファレンス。 General Translation React Core linter (`@generaltranslation/react-core-linter`) は、統合時によくあるミスを検出する ESLint プラグインです。たとえば、翻訳可能なコンポーネント内の動的コンテンツ、翻訳関数内の静的でない文字列、未対応の属性などを検出します。`recommended` 設定では、すべてのルールがエラーとして有効になり、3 つのルールのうち 2 つは自動修正に対応しています。インストールと ESLint の設定については、[コードのリンティング](/docs/react/guides/linting-your-code) ガイドを参照してください。 *これらのルールは、General Translation のコンポーネントや関数をインポート元によって検出します。`gt-react`、`gt-next`、`gt-react-native` はデフォルトで認識されます。`gt-tanstack-start` など、その他のパッケージは [`libs`](#libs) オプションで追加してください。* ## ルール [#rules] | ルール | 検出内容 | 自動修正 | | ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | | [`static-string`](#static-string) | 翻訳関数 ([`useGT`](/docs/react/reference/hooks/use-gt)、[`getGT`](/docs/node/reference/functions/get-gt)、[`msg`](/docs/react/reference/functions/msg)) に渡される動的または非静的な文字列、および非静的な糖衣構文変数。 | はい | | [`static-jsx`](#static-jsx) | 変数コンポーネントでラップされていない [``](/docs/react/reference/components/t) 内の動的コンテンツ。 | はい | | [`no-data-attrs-on-branch`](#no-data-attrs) | [``](/docs/react/reference/components/branch) の `data-*` 属性。このコンポーネントでは無視されます。 | いいえ | 3 つのルールはすべて `recommended` 設定で `error` に設定されており、共通の [`libs`](#libs) オプションを受け付けます。 ## `static-string` [#static-string] **自動修正** はい · **推奨** `error` [`useGT`](/docs/react/reference/hooks/use-gt) の `gt` や `getGT`、[`msg`](/docs/react/reference/functions/msg) などの登録関数は、コンパイラ が ビルド時 に内容を抽出するため、静的な string しか受け取れません。このルールは、動的な第1引数を検出し、変数を string に連結するのではなく、options object で渡す ICU スタイルの インターポレーション を使うよう促します。 ### 仕組み * **静的なコンテンツが必要です。** 最初の引数は文字列リテラル (または [`msg`](/docs/react/reference/functions/msg) の場合は文字列リテラルの配列) である必要があります。文字列の連結や、変数を埋め込んだ template literal はフラグ付けされます。 * **ICU の自動修正。** 形式が ICU (デフォルト) の場合、このルールは修正可能な動的式を ICU 文字列と options object に書き換えます。三項演算子は `select` 文になり、その他の式は `{varN}` プレースホルダーになります。 * **[`derive`](/docs/react/reference/functions/derive) は使用できます。** [`derive`](/docs/react/reference/functions/derive) 呼び出しは、単独でも静的な部分と連結した形でも許可されます。これは、そのバリアントが ビルド時 に解決されるためです。 * **静的な糖衣構文変数。** options object 内のメタデータ key は静的である必要がありますが、必要な型はそれぞれ異なります。`$id` と `$format` は静的な文字列、`$context` は静的な文字列または [`derive`](/docs/react/reference/functions/derive) 呼び出し、`$maxChars` は数値リテラル、`$requiresReview` は真偽値リテラルである必要があります。 * **ICU の検証。** 文字列で ICU 形式を使用している場合、このルールはその構文を検証し、不正なメッセージには `Invalid ICU message format` を報告します。 ### 例 ```tsx // ❌ 誤り — 動的な値が文字列に連結されている const gt = useGT(); gt('Hello ' + name); gt(`Hello ${name}!`); // ✅ 正しい — ICUインターポレーション、変数はoptions objectで渡す const gt = useGT(); gt('Hello {name}!', { name }); ``` ```tsx // ❌ 誤り — 糖衣構文変数が静的なstringではない msg('Save', { $context: label }); // ✅ 正しい — 静的な糖衣構文変数 msg('Save', { $context: 'a button label' }); // ✅ 正しい — deriveを使ったビルド時バリアント gt('Hello ' + derive(getName())); ``` ### オプション 共通の[`libs`](#libs)オプションに対応しています。 ## `static-jsx` [#static-jsx] **自動修正** あり · **推奨** `error` コンパイラが抽出できるよう、[``](/docs/react/reference/components/t) コンポーネントには静的な children だけを含める必要があります。このルールは、[``](/docs/react/reference/components/t) 内の動的コンテンツ (変数、関数呼び出し、メンバー式) を検出し、[``](/docs/react/reference/components/var)、[``](/docs/react/reference/components/num)、[``](/docs/react/reference/components/currency)、または [``](/docs/react/reference/components/datetime) などの変数コンポーネントでラップすることを必須とします。 ### 動作の仕組み * **静的な children のみ。** [``](/docs/react/reference/components/t) 内では、文字列、数値、真偽値、補間を含まない template literal のみ使用できます。それ以外の式にはフラグが付きます。 * **[``](/docs/react/reference/components/var) で自動ラップ。** フラグが付いた式は [``](/docs/react/reference/components/var) でラップされ (必要に応じて import も追加され) 、値は翻訳されずにレンダリングされます。 * **分岐の変換。** 三項演算子 (`cond ? a : b`) または論理 AND (`cond && a`) は、代わりに [``](/docs/react/reference/components/branch) に変換されます。 * **分岐属性。** このルールは [``](/docs/react/reference/components/branch) と [``](/docs/react/reference/components/plural) の各コンテンツ分岐もチェックし、各分岐の値が静的または JSX であることを要求します。 ### 例 ```tsx // ❌ 誤り — 動的コンテンツを の直下に配置している {name}; {getGreeting()}; // ✅ 正しい — 動的コンテンツを変数コンポーネントでラップしている {name}; You have {count} messages.; ``` ```tsx // ❌ 誤り — 内のインライン条件式 {isActive ? 'Active' : 'Inactive'}; // ✅ 正しい — 自動修正により に変換される Inactive ; ``` ### オプション 共通の[`libs`](#libs)オプションに対応しています。 ## `no-data-attrs-on-branch` [#no-data-attrs] **自動修正** なし · **推奨** `error` [``](/docs/react/reference/components/branch) コンポーネントは、予約済みでない props を 分岐 の値として扱うため、`data-` プレフィックス付きの属性は無視されます。このルールは、[``](/docs/react/reference/components/branch) の `data-*` 属性が黙って破棄されるのを防ぐために検出します。自動修正はありません。属性を削除するか、ラップしている要素に移動してください。 ### 例 ```tsx // ❌ 誤り — data-* 属性は によって無視されます ; // ✅ 正しい — 属性をラッパー要素に移動します ; ``` ### オプション 共通の[`libs`](#libs)オプションに対応しています。 ## 共通オプション [#shared-options] すべてのルールで同じオプションを指定できます。 ### `libs` [#libs] **型** `string[]` · **任意** · **デフォルト** `['gt-react', 'gt-next', 'gt-react-native', 'gt-i18n', '@generaltranslation/react-core/components', '@generaltranslation/react-core/components-rsc', '@generaltranslation/react-core/hooks', '@generaltranslation/react-core/pure']` このルールで General Translation パッケージとして扱うモジュール source の一覧です。コンポーネントまたは関数は、これらのモジュールのいずれかからインポートされた場合にのみチェックされるため、alias を使ったインポートも正しく解決されます。フレームワークのパッケージがデフォルトの一覧に含まれていない場合は追加してください。たとえば `gt-tanstack-start` です: ```js title="eslint.config.js" const libs = ['gt-tanstack-start']; export default [ { plugins: { '@generaltranslation/react-core-linter': gtLint }, rules: { '@generaltranslation/react-core-linter/static-jsx': ['error', { libs }], '@generaltranslation/react-core-linter/static-string': ['error', { libs }], '@generaltranslation/react-core-linter/no-data-attrs-on-branch': ['error', { libs }], }, }, ]; ``` ## Sitemap See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.