#ctx.libs

ctx.libs は RunJS 内蔵ライブラリの統一ネームスペースであり、React、Ant Design、dayjs、lodash などの常用ライブラリが含まれています。import や非同期読み込みは不要で、直接 ctx.libs.xxx を通じて使用できます。

#適用シーン

#内蔵ライブラリ一覧

#トップレベルの別名

過去のコードとの互換性のため、一部のライブラリは ctx.React、ctx.ReactDOM、ctx.antd、ctx.dayjs としてトップレベルでも公開されています。メンテナンスとドキュメント検索のしやすさから、ctx.libs.xxx への統一を推奨します。

#遅延読み込み

lodash、formula、math などは**遅延読み込み（Lazy Loading）**を採用しています。最初に ctx.libs.lodash にアクセスしたときに動的インポート（dynamic import）が行われ、その後はキャッシュが再利用されます。React、antd、dayjs、antdIcons はコンテキストによってプリセットされており、すぐに利用可能です。

#実行例

#React と Ant Design によるレンダリング

const { Button, Card } = ctx.libs.antd;

ctx.render(
  <Card title="タイトル">
    <Button type="primary">クリック</Button>
  </Card>
);

#Hooks の使用

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

const App = () => {
  const [count, setCount] = useState(0);
  return <Button onClick={() => setCount((c) => c + 1)}>{count}</Button>;
};
ctx.render(<App />);

#アイコンの使用

const { Button } = ctx.libs.antd;
const { UserOutlined, HeartOutlined } = ctx.libs.antdIcons;

ctx.render(<Button icon={<UserOutlined />}>ユーザー</Button>);

#dayjs による日付処理

const now = ctx.libs.dayjs();
const formatted = now.format('YYYY-MM-DD HH:mm:ss');
ctx.message.info(formatted);

#lodash ツール関数

const user = { profile: { name: 'Alice' } };
const name = ctx.libs.lodash.get(user, 'profile.name', 'Unknown');

#formula 公式計算

const values = [1, 2, 3, 4];
const sum = ctx.libs.formula.SUM(values);
const avg = ctx.libs.formula.AVERAGE(values);

#math 数学式

const result = ctx.libs.math.evaluate('2 + 3 * 4');
// result === 14

#注意事項

• ctx.importAsync との混用: ctx.importAsync('react@19') を通じて外部の React を読み込んだ場合、JSX はそのインスタンスを使用します。この際、ctx.libs.antd と混用しないでください。antd はその React バージョンに対応したものを読み込む必要があります（例: ctx.importAsync('antd@5.x')、ctx.importAsync('@ant-design/icons@5.x')）。
• 複数の React インスタンス: "Invalid hook call" が発生したり、hook dispatcher が null になったりする場合、通常は複数の React インスタンスが原因です。ctx.libs.React の読み込みや Hooks の呼び出し前に、まず await ctx.importAsync('react@バージョン') を実行して、ページと同一の React インスタンスを共有するようにしてください。

#関連情報

• ctx.importAsync() - 外部 ESM モジュールのオンデマンド読み込み（特定バージョンの React、Vue など）
• ctx.render() - コンテナへのコンテンツのレンダリング