# ターミナル出力の表示

`useTerminal` を使って読み取り専用の xterm ターミナルを作成し、ANSI カラー対応でシェルコマンド出力をレンダリングします。

## 基本的な使い方

```tsx
import { useTerminal, useShell, TerminalThemes } from "@fluxlay/react";

function Terminal() {
  const { terminalRef, instance } = useTerminal({
    fontSize: 14,
    theme: TerminalThemes.dracula
  });

  useShell("my-command", { terminal: instance });

  return <div ref={terminalRef} style={{ height: 400, width: "100%" }} />;
}
```

## カスタマイズ

### フォント

```tsx
const { terminalRef, instance } = useTerminal({
  fontSize: 16,
  fontFamily: "'JetBrains Mono', monospace"
});
```

### テーマ

[20 以上の組み込みテーマ](/ja/studio/developer/reference/sdk/terminal-themes.md)から選べます。

```tsx
// ダークテーマ
TerminalThemes.dark.default;
TerminalThemes.dark.modern;
TerminalThemes.nord;
TerminalThemes.dracula;
TerminalThemes.tokyoNight;
TerminalThemes.oneDark;

// ライトテーマ
TerminalThemes.light.default;
TerminalThemes.solarized.light;
TerminalThemes.catppuccin.latte;
```

## レイアウト

ターミナルは FitAddon を使ってコンテナに自動フィットします。親要素でサイズを制御します。

```tsx
<div ref={terminalRef} className="h-full w-full" />
```

## 注意事項

- ターミナルは読み取り専用です（ユーザー入力は受け付けません）。
- カーソルは非表示です。
- スクロールバックは無効です。
- CSS オーバーライドによりコンテナを埋めます。

詳細は [useTerminal リファレンス](/ja/studio/developer/reference/sdk/use-terminal.md)を参照してください。