• 日本語

      • JSX

      RunJSはJSX構文をサポートしており、Reactコンポーネントのようにコードを記述できます。JSXは実行前に自動的にコンパイルされます。

      コンパイルの説明

      • sucrase を使用してJSXを変換します。
      • JSXは ctx.libs.React.createElement および ctx.libs.React.Fragment にコンパイルされます。
      • Reactのインポートは不要：JSXを直接記述でき、コンパイル後は自動的に ctx.libs.React が使用されます。
      • ctx.importAsync('react@x.x.x') を通じて外部のReactをロードする場合、JSXはそのインスタンスの createElement を使用するように変更されます。

      組み込みのReactとコンポーネントの使用

      RunJSにはReactおよび一般的なUIライブラリが組み込まれており、import なしで ctx.libs から直接使用できます。

      • ctx.libs.React — React本体
      • ctx.libs.ReactDOM — ReactDOM（必要に応じて createRoot と併用可能）
      • ctx.libs.antd — Ant Designコンポーネント
      • ctx.libs.antdIcons — Ant Designアイコン
      const { Button } = ctx.libs.antd;

ctx.render(<Button>クリック</Button>);

      JSXを直接記述する場合、Reactを分割代入（destructure）する必要はありません。Hooks（useState、useEffect など）や Fragment（<>...</>）を使用する場合のみ、ctx.libs から分割代入する必要があります。

      const { React } = ctx.libs;
const { useState } = React;

const Counter = () => {
  const [count, setCount] = useState(0);
  return <div>Count: {count}</div>;
};

ctx.render(<Counter />);

      注意：組み込みのReactと ctx.importAsync() でインポートした外部のReactを混在させることはできません。外部UIライブラリを使用する場合は、Reactも外部から一括してインポートする必要があります。

      外部のReactとコンポーネントの使用

      ctx.importAsync() を使用して特定のバージョンのReactやUIライブラリをロードすると、JSXはそのReactインスタンスを使用します。

      const React = await ctx.importAsync('react@19.2.4');
const { Button } = await ctx.importAsync('antd@6.2.2?bundle');

ctx.render(<Button>クリック</Button>);

      antdがreact/react-domに依存している場合、deps を介して同一バージョンを指定することで、複数のインスタンスが生成されるのを避けることができます。

      const React = await ctx.importAsync('react@18.2.0');
const { Button } = await ctx.importAsync('antd@5.29.3?bundle&deps=react@18.2.0,react-dom@18.2.0');

ctx.render(<Button>Button</Button>);

      注意：外部のReactを使用する場合、antdなどのUIライブラリも ctx.importAsync() を通じてインポートする必要があります。ctx.libs.antd と混在させないでください。

      JSX構文のポイント

      • コンポーネントと props：<Button type="primary">テキスト</Button>
      • Fragment：<>...</> または <React.Fragment>...</React.Fragment>（Fragmentを使用する場合は const { React } = ctx.libs の分割代入が必要です）
      • 式：JSX内では {式} を使用して変数や演算を挿入します（例：{ctx.user.name}、{count + 1}）。{{ }} のようなテンプレート構文は使用しないでください。
      • 条件付きレンダリング：{flag && <span>コンテンツ</span>} または {flag ? <A /> : <B />}
      • リストレンダリング：array.map() を使用して要素のリストを返し、各要素に一意の key を設定します。
      const { React } = ctx.libs;
const items = ['a', 'b', 'c'];

ctx.render(
  <ul>
    {items.map((item, i) => (
      <li key={i}>{item}</li>
    ))}
  </ul>
);