Oxc
← Back to rules

react/jsx-curly-brace-presence スタイル

🛠️ An auto-fix is available for this rule.

何を実行するか ​

リテラルだけで十分な場合に、不要な JSX 式を禁止するか、または、JSX 子要素や属性でリテラルに対して必ず JSX 式を強制します。

このルールでは、JSX プロパティおよび/または子要素において、波かっこ（カッコ）の有無を強制したり、不要な波かっこを禁止したりできます。

不要な JSX 式が発生する状況については、React のドキュメント と このページの JSX の落とし穴について を参照してください。

なぜ問題なのか ​

JSX コードに対して異なるスタイルを使用すると、読みにくくなり、一貫性が失われます。

コードの一貫性は可読性を高めます。このルールによって、アプリケーション全体で波かっこ（カッコ）の使用パターンを一定に保つことができます。

ルールの詳細 ​

デフォルトでは、このルールは、両方の JSX プロパティと子要素における不要な波かっこの存在をチェックし、警告を表示します。後方互換性を確保するため、プロパティ値が JSX 要素である場合については、デフォルトでは対象外になります。

波かっこの有無を強制するために、プロパティ、子要素、あるいはそれらの組み合わせに対してオプションを設定できます。同様に、不要な波かっこの禁止やチェックの無視にも同じオプションが利用可能です。

注意: このルールをオブジェクト形式で設定することを強く推奨しており、"propElementValues" を "always" に設定することをおすすめします。プロパティ値が JSX 要素の場合に波かっこを省略できる機能は、曖昧であり、意図的にドキュメント化されていないため、依存してはいけません。

例の設定 ​

jsonc
{
  "rules": {
    "react/jsx-curly-brace-presence": ["error", { "props": <string>, "children": <string>, "propElementValues": <string> }]
  }
}

または、以下のようにも記述できます：

jsonc
{
  "rules": {
    "react/jsx-curly-brace-presence": ["error", "always"], // または "never" もしくは "ignore"
  },
}

フィックスの詳細 ​

オプションとして fix を渡された場合、スタイル違反がどのように修正されるかは以下の通りです。

  • always: JSX 属性を波かっこ/JSX 式で囲み、子要素も同様にダブルクォート付きで囲む

  • never: JSX 属性および子要素から波かっこを取り除く

  • すべての修正操作ではダブルクォートが使用されます。

例 ​

{ props: "always", children: "always" } で設定した場合の 誤り なコードの例：

jsx
<App>Hello world</App>;
<App prop="Hello world">{"Hello world"}</App>;

これらのコードは次のように修正できます：

jsx
<App>{"Hello world"}</App>;
<App prop={"Hello world"}>{"Hello world"}</App>;

{ props: "never", children: "never" } で設定した場合の 誤り なコードの例：

jsx
<App>{"Hello world"}</App>;
<App prop={"Hello world"} attr={"foo"} />;

これらのコードは次のように修正できます：

jsx
<App>Hello world</App>;
<App prop="Hello world" attr="foo" />;

{ props: "always", children: "always", "propElementValues": "always" } で設定した場合の 誤り なコードの例：

jsx
<App prop=<div /> />

これらのコードは次のように修正できます：

jsx
<App prop={<div />} />

{ props: "never", children: "never", "propElementValues": "never" } で設定した場合の 誤り なコードの例：

jsx
<App prop={<div />} />

これらのコードは次のように修正できます：

jsx
<App prop=<div /> />

"always" で設定した場合の 誤り なコードの例：

jsx
<App>Hello world</App>;
<App prop="Hello world" attr="foo">
  Hello world
</App>;

これらのコードは次のように修正できます：

jsx
<App>{"Hello world"}</App>;
<App prop={"Hello world"} attr={"foo"}>
  {"Hello world"}
</App>;

"never" で設定した場合の 誤り なコードの例：

jsx
<App prop={"foo"} attr={"bar"}>
  {"Hello world"}
</App>

これらのコードは次のように修正できます：

jsx
<App prop="foo" attr="bar">
  Hello world
</App>

境界ケース ​

このフィックスはテンプレートリテラル、引用符付き文字列、エスケープ文字付き文字列にも対応しています。

  • ルールが不要な波かっこを削除するように設定され、JSX 式内のテンプレートリテラルに式がない場合、警告が出力され、ダブルクォートで修正されます。たとえば：
jsx
<App prop={`Hello world`}>{`Hello world`}</App>

は警告され、次のように修正されます：

jsx
<App prop="Hello world">Hello world</App>
  • ルールが波かっこの強制を設定し、文字列に引用符がある場合、子要素にはダブルクォートで修正され、属性には通常の方法で修正されます。また、修正時にダブルクォートはエスケープされます。

たとえば：

jsx
<App prop='Hello "foo" world'>Hello 'foo' "bar" world</App>

は警告され、次のように修正されます：

jsx
<App prop={'Hello "foo" world'}>{"Hello 'foo' \"bar\" world"}</App>
  • ルールが不要な波かっこ（JSX 式）の削除を設定し、そのような文字列中に引用符などのエスケープが必要な文字（例：引用符、禁止されている JSX 文字、エスケープ文字、または似たような HTML エンティティ名など）がある場合、コードは警告されず、修正されません。なぜなら、修正によりコードの可読性が低下する可能性があるためです。

"never" で設定しても 正しい と見なされるコードの例：

jsx
<Color text={"\u00a0"} />
<App>{"Hello \u00b7 world"}</App>;
<style type="text/css">{'.main { margin-top: 0; }'}</style>;
/**
 * 空白をコンテナなしで注入する方法はないため、これは常に許可される。
 */
<App>{' '}</App>
<App>{'     '}</App>
<App>{/* コメント */ <Bpp />}</App> // コメントがあるためコンテナは必須

使用しないべき場面 ​

このルールは、あなたが、波かっこの使用に関する一貫性や不要な JSX 式の使用に関する心配をしていない場合に無効にするべきです。

設定 ​

このルールは、以下のプロパティを持つ構成オブジェクトを受け入れます：

children ​

type: "always" | "never" | "ignore"

default: "never"

JSX 要素の子要素に対して、波かっこを強制するかどうか。

  • never: 必要のない波かっこを禁止。たとえば、<Foo>I love oxlint</Foo> が好ましい。
  • always: すべてのケースで波かっこを使用。たとえば、<Foo>{'I love oxlint'}</Foo>。
  • ignore: 子要素に対してどちらのスタイルでも許可。

propElementValues ​

type: "always" | "never" | "ignore"

default: "ignore"

ignore もしくは never に設定された場合、以下のコードは許可（または強制）されます： <App prop=<div /> />;

always に設定された場合、プロパティ値が JSX 要素である場合に波かっこが必須になります： <App prop={<div />} />;

注意: propElementValues は 強く推奨 されており、always に設定することをお勧めします。プロパティ値が JSX 要素の場合に波かっこを省略できる機能は曖昧であり、意図的にドキュメント化されておらず、依存すべきではありません。

props ​

type: "always" | "never" | "ignore"

default: "never"

JSX 要素のプロパティに対して、波かっこを強制するかどうか。

  • never: 必要のない波かっこを禁止。たとえば、<Foo foo="bar" /> が好ましい。
  • always: すべてのケースで波かっこを使用。たとえば、<Foo foo={'bar'} />。
  • ignore: プロパティ値に対してどちらのスタイルでも許可。

使用方法 ​

設定ファイルまたは CLI でこのルールを 有効化 するには、次のいずれかの方法を使います：

json
{
  "plugins": ["react"],
  "rules": {
    "react/jsx-curly-brace-presence": "error"
  }
}
bash
oxlint --deny react/jsx-curly-brace-presence --react-plugin

参照 ​

© 2026 VoidZero Inc. および Oxc 貢献者。