README.ja.md

VuReact

Vue 書いて、メンテナブルな React を生成。

Vue→React 移行のためのコンパイラツールチェーン。

Vue 3 SFC・Script・Style をランタイムなしで純粋な React へ変換。<script setup> ・段階的移行・混在開発に対応。

オンラインで試す · クイックスタート · 利用シーン · エコシステム · コンパイル約定 · 比較（セマンティック） · 更新履歴

日本語 | English | 简体中文

VuReact 実践：Vue 3 SFC → React 18+ コンポーネントのコンパイルデモ。

展示ビデオを見る · 高画質アニメーションを見る

💡 なぜ VuReact を選ぶか

既存の手法はランタイムを抱き合わせるもの（性能・デバッグの問題）か、複雑な構文で失敗する部分的な変換です。VuReact はコンパイル時のアプローチで、出力は純粋な React コードです。段階的な移行が可能です。

他の手法	VuReact
ランタイムラッパー（デュアルフレームワーク、性能低下、バンドル増）	コンパイル時に純粋な React を出力、段階的な移行が可能
部分的な変換（複雑構文で失敗）	テンプレート指令、Props、スロット、Composition API、scoped スタイル、TypeScript 型をサポート
AI リライト（結果が不安定、手動レビュー必須）	AST に基づく決定論的変換で予測可能かつ追跡可能

👉 詳細: Why VuReact? — more than syntax transformation

---

📖 目次

• 🕹️ オンラインプレイグラウンド（インストール不要）
• ✨ コア機能
• 🚀 クイックスタート
• 🛠️ CLI
• 💬 フィードバックとコミュニティ
• ✅ 利用シーン
• 📦 リポジトリパッケージ
• ♻️ エコシステム
• ⚙️ 処理流程
• 🙏 特別謝辞
• 🤝 コントリビュート
• 📄 ライセンス
• 🩷 スポンサー
• 🧩 事例募集

---

🕹️ オンラインプレイグラウンド（インストール不要）

30 秒で Vue → React のコンパイル体験ができます：

• Customer Support Hub（混在例）
• CRM 管理バックエンド（標準例）

例は CodeSandbox 上で自動的に起動します。読み込みに時間がかかる場合があります。

---

✨ コア機能

• セマンティックな変換（文字列置換ではない）: テンプレート、<script setup>、Composition API、TS 型を解析し、慣習に沿った React コードを生成します。
• 約定優先・可制御・メンテナブル: すべてを無差別に変換するのではなく、明確なコンパイル約定に従い予測可能な出力を実現します。
• 段階的移行: 単一ファイルからプロジェクト全体まで段階的に変換可能。
• 包括的な機能適合: レスポンシブ API、ライフサイクル、組み込み、ルーティング、scoped/module スタイル、Less/Sass をコンパイル時に処理（ランタイム負荷ゼロ）。
• 自動依存解析: トップレベル関数に useCallback を注入、オブジェクトや値は useMemo でメモ化、hooks の依存を追跡します。
• デュアルモード CLI: vureact build（高速インクリメンタルビルド）と vureact watch（ウォッチモード）を提供。

---

🚀 クイックスタート

💡 ゼロから始める公式ガイド: VuReact Quick Start

💡 ハイブリッド移行の実践例: Customer Support Hub (Vue + React)

インストール

Vue 3 プロジェクトで:

npm i -D @vureact/compiler-core

設定ファイル作成

プロジェクトルートに vureact.config.ts を作成：

import { defineConfig } from '@vureact/compiler-core';
export default defineConfig({
  input: '', // 入力パス（単一ファイルまたはディレクトリ）
  exclude: ['src/main.ts'], // Vue エントリとコンパイル対象外ファイルを除外
  output: {
    workspace: '.vureact',
    outDir: 'react-app',
    bootstrapVite: true,
  },
  onSuccess: async () => {
    console.log('コンパイル成功！');
    // ここでファイル操作や他ツール呼び出しなどの追加処理を行えます
  },
});

💡 そのほかの設定項目は Config API を参照してください。

単一コンポーネントを変換

{
 input: './src/your-component.vue',
}

プロジェクト全体を変換

{
 input: './src',
}

💡 注意: Vue Router を使用する場合は、必要な設定のために router adaptation guide を参照してください。

コンパイラ実行

npx vureact build

自動生成される .vureact/react-app ディレクトリには、変換後のコンポーネントと関連する依存関係・設定が含まれます。

プロジェクト構成例：

vue-project/
├── .vureact/
│   ├── cache/             # コンパイルキャッシュ
│   ├── react-app/         # 変換後の React アプリ
│   │   ├── src/           # 変換後の React ソース
│   │   ├── package.json   # React アプリ依存
│   │   ├── vite.config.ts # Vite 設定
│   │
├── src/                   # 元の Vue ソース
├── package.json           # 元プロジェクトの依存
└── vureact.config.ts      # 設定ファイル

💡 コンパイル警告が出た場合は、メッセージに従って修正してください。Compilation Conventions と Best Practices を読むと、変換しやすい Vue コードを書きやすくなります。

---

🛠️ CLI

# フル／インクリメンタルビルド
npx vureact build

# 開発用ウォッチ
npx vureact watch

# バージョン表示
npx vureact -v

# ヘルプ
npx vureact --help

👉 詳細はガイドを参照: Incremental Compilation | Watch Mode

---

💬 フィードバックとコミュニティ

• 問題があれば FAQ を確認、または Issue を提出してください。
• ルーター適合に関する疑問は router adaptation guide を参照してください。
• ページスタイルが崩れる場合は style troubleshooting solution を確認してください。
• ご意見は Discussions で共有してください。
• プロジェクトを応援したい場合は、⭐ を付けてもらえると助かります。

---

✅ 利用シーン

推奨

• プロジェクトを Vue 3 から React へ段階的に移行する必要があるが、ゼロから書き直したくなく、既存の解決策を優先的に探している。
• 一部の開発者は Vue を主な技術スタックとしており、そのメンタルモデルに慣れていて、React の追加的な負担が Vue よりも大きいと考えている。
• バックエンド開発者は両方のフレームワークを学びたくない。Vue は習得が早く直感的で、React に触れたくない。
• 変換後の React は Vue ランタイムから完全に切り離されている必要があり、デュアルフレームワークのランタイムによって生じるパフォーマンスやバンドルサイズの問題を避ける。

注意点

• 可制御性優先: 予測可能性を重視した設計。
• 約定駆動: 明確なコンパイル規約に従う必要あり。
• モダン構文重視: Vue 3 Composition API と <script setup> を前提とする。

オプション ☣️ハイブリッド開発で、Vue プロジェクトに直接 React エコシステムの機能を導入できます。

---

📦 リポジトリパッケージ

• packages/compiler-core
• packages/runtime-core

---

♻️ エコシステム

• VuReact Runtime — React 側での軽量な Vue API 実装。
• VuReact Router — Vue Router 風の構文を React Router にマッピングするアダプター。

---

⚙️ 処理流程

VuReact の処理流程は、コンパイル時と実行時の2つの主要な段階に分かれ、明確な役割分担によって Vue から React への変換を実現します。

flowchart LR
    A[Vue SFC / Script 入力] --> B[構文解析]
    B --> C[意味解析]
    C --> D[約定検証]
    D --> E[依存関係収集 / Hook 準拠再構築]
    E --> F[React JSX / TSX 出力]
    F --> G[Runtime 意味適応]
    G --> H[Router / エンジニアリング統合]

Loading

コンパイル時（決定論的）：Vue SFC / Script を解析し、規約を検証し、依存関係を分析して、React の実践に沿った TSX を生成します。

実行時（セマンティック適応）：Vue スタイルの API（useVRef、KeepAlive など）を提供し、コンパイルでは埋められないフレームワークの違いを補完し、ルーティング層を統合して、移行が完全なプロジェクトをカバーすることを保証します。

👉 詳細: VuReact デザイン理念

---

🙏 特別謝辞

ランタイム適応レイヤーの開発は、以下のプロジェクトから着想と支援を受けています。

• valtio — React 側における Vue 風リアクティブ API と Proxy 実装
• react-transition-group — React のトランジションアニメーションコンポーネント

---

🤝 コントリビュート

貢献歓迎です。詳細は CONTRIBUTING.md をご確認ください。

---

📄 ライセンス

MIT License © 2025 Ruihong Zhong (Ryan John)

---

🩷 スポンサー

VuReact はコミュニティに支えられています。スポンサーはメンテナンス、機能、ドキュメント改善に使われます。

プラットフォーム: Afdian

---

🧩 事例募集

利用事例を募集しています。試したプロジェクトがあればご連絡ください：

• 事例を提出
• 提出済みの事例を見る

---

VuReact — 革新的なコンパイラ設計とランタイム適応を通じて、Vue から React への完全コンパイルの可能性を探り、これまでにない変換深度とエンジニアリングの完成度を目指します。