Japanese Translation:

Text.js は、ブラウザのコンソール内でのフルスタック React アプリケーションの直接構築を可能にすることで開発を革新します。React 19 の機能を活用しており、このアプローチは複雑な外部環境の必要性を取り除き、開発者がチャートやフォームなどのインタラクティブ UI を画面に直接即座にプロトタイプ化することを可能にします。フレームワークは、「dirty gating」と呼ばれる技術を使用してパフォーマンスを最適化し、不要なビジュアル更新を最小限に抑えます。また、軽量なサーバーサイドレンダリングを活用して効率性を高めています。開発者ツール向けの標準的な React 慣習を適応させることで、入力方法のハンドリングや任意のズームレベルに対応するレスポンシブレイアウトなどの必須タスクをサポートします。開発者はキーボードショートカットを利用してすぐに構築を開始でき、専用のプレビューペインにアクセスできます。将来、この技術はエージェントプロキシを通じて高度な AI 相互作用をサポートするために拡大すると予想されます。この移行により、ワークフローが簡素化され、デバッグが迅速化され、チームが複雑な非同期的コンポーネントを展開前にプレビューできるため、デジタルイノベーションのペースが大幅に加速しています。

ブラウザコンソール上で動作するフルスタック React アプリケーション (Text.js)

このページは開発者ツール内のコンソールで動作します。
⌘⌥J（Mac）または Ctrl+Shift+J（Windows/Linux）を押してコンソールを開き、↑/↓キーでナビゲート、そしてプレビューをクリックしてください。最初に開発者機能を有効することをお勧めします。

サンプルコード

以下のコードをコンソールの REPL に入力・実行できます。

import { useState } from "react";
import { AsciiFont, Box, Text, useInput } from "@textjs/app";

export default function Page() {
  const [count, setCount] = useState(0);
  
  // ↑/↓ キーでカウント値を変更
  useInput((e) => {
    if (e.key === "up") setCount((c) => c + 1);
    if (e.key === "down") setCount((c) => c - 1);
  });

  return (
    <Box className="flex-col gap-1 p-2">
      <AsciiFont text="▼ TEXT.JS" />
      <Text color="muted">コンソール内の React 19</Text>
      <Text bold color="accent">count = {count}</Text>
    </Box>
  );
}

機能とキャパビリティ

React 19 対応: Text.js はコンカレント描画、Suspense、エラーバウンダリを完全に対応しています。
App Router:
```
app/
```
フォルダ構造をサポート。ルート・レイアウト設定、バック/フォワードボタン、深いリンク動作が正常に機能します。
レスポンシブグリッド: ページのズームレベルや開発者ツールパネルのサイズに自動的にフィットします。
キーボード入力: 隠された単一の
```
<textarea>
```
を介して全ての入力を処理し、ペースト操作や IME（入力方法）を正しくサポートします。

コンポーネントとレイアウト

サポートされているコンポーネントパターン

<Box>

<Stack>

<Grid>

<SplitPane>

<ScrollBox>

<Center>

<Data>

<List>

<Table>

<Tree>

<Markdown>

<Code>

<Diff>

サポートされている可視化機能

チャート:
```
<LineChart>
```
,
```
<BarChart>
```
,
```
<Sparkline>
```
インジケータ:
```
<ProgressBar>
```
,
```
<Gradient>
```
メディア:
```
<Image>
```

サポートされているコントロール

入力系:

<Input>

<Select>

<Checkbox>

<Switch>

<Slider>

オーバーレイ:
```
<Dialog>
```

ユーティリティ:

<Keyboard>

<useKeymap>

<KeyHelp>

<KeyHints>

<CommandPalette>

<StatusBar>

<useFocus>

アーキテクチャとパフォーマンス

Text.js は以下的高效な処理サイクルを実現しています。

コミット (Commit): React のカスタムリコンシリエーター経由。
レイアウト (Layout): Yoga がボックスの全体セル上で計算。
描画 (Paint): 変更された行のみを再描画（損傷限定）。
ディルティゲート (Dirty gate): 変更がないフレームは処理停止。
エンコード (Encode): 3,200 セルが圧縮され、149 個の
```
%c
```
スパンへ変換。
発信 (Emit): フレーム追加間隔は最低でも 66ms。

パフォーマンス指標の詳細

コンソールのクリア戦略:
- 次のフレームが開発者ツールの描画を待つまで空欄（
```
clear()
```
  +
```
log()
```
  ）：70.6% のフレームで空。
- アドオン追加 (
```
log()
```
  のみ)：1.0% のフレームが空、処理時間は 0.163ms。
フル描画サイクル（レイアウト・描画・エンコード合計）: 平均 0.011ms。
単一行の編集（キーストローク時）:0 回 の追加コールオーバーヘッド。

高度な利用法

アイドルフレーム最適化: 3,200 セルを 149 個の
```
%c
```
引数に変換して軽量化。
サーバー側レンダリング:
```
runtime = "server"
```
をエクスポートすることで、ルートや非同期コンポーネントをサーバーでレンダリング可能。ブラウザは約 21kB (gzip) のフレームプレイヤーのみ読み込みます。
環境互換性: ターミナルおよび AI エージェント上での実行も動作確認済み。

OpenCode インテグレーション

OpenCode TUI を Text.js で再構築した 「OpenCode Lite」 は、ブラウザコンソール上で即座に動作します。

サンドボックス機能: スクリプト化されたエージェントが任意の質問に回答可能。インストール不要。
1 コマンドで接続:
```
bunx @textjs/opencode@latest proxy
```
表示されたコマンドを入力すると、ローカル OpenCode サーバーと同期されます。
モデルとセッション管理:
```
/models
```
アクションを通じて、OpenCode サーバー上の任意のモデルやセッション、エージェントを選択可能です。

ツールリング

エディタ機能に加え、リントおよびテストツールへの統合サポートが含まれています。

Text.js：console.log 内でレンダリングされるフルスタック React アプリを開発