SEKKEIYA Desktop 開発スタート：Tauri + React で最初のウィンドウを起動する

対象： 初心者〜中級者向け
所要時間： 約15分
技術スタック： Tauri 2.x / React / Vite / JSX

この記事のゴール

Tauri + React を使って "最初のウィンドウ" が立ち上がるところまでを一気に体験します。SEKKEIYA の Desktop アプリも、この同じ構成を土台に作られています。

• 開発の全体像を把握する
• 必要なツール（Rust, Tauri）を導入する
• Hello Desktop（初回起動）を達成する

まず何をしたらいいか分からない初心者のための、環境構築〜プロジェクト作成の全手順をまとめました。

今回のゴール：「Desktop の土台」を作る

デスクトップ版といっても、いきなり全機能を作るわけではありません。まずは "ブラウザなしで動くミニ版" を目指します。

今回の到達点（MVP）

• ウィンドウが立ち上がる — OS ネイティブのアプリケーションとして起動する
• React が画面に描画される — Web 技術で UI を構築できる状態にする
• 接続の土台が完成 — Firebase や S.Models API を後から繋げられる準備

次のステップ（NEXT）

• モデル一覧表示
• ローカルフォルダ監視
• Drag & Drop
• Rhino 連携

採用技術の説明

Tauri 2.x（App Core / Rust ベース）

• OS ネイティブ機能へのブリッジ
• 超軽量・高速・堅牢

React + Vite（UI Framework）

• Web 版の UI 構築ロジックをそのまま利用できる
• 高速な HMR 開発

JavaScript（JSX）

• 慣れ親しんだ言語でデスクトップアプリを記述できる

なぜこの構成なのか

1. Web 版の資産を直接活用： Web 版を React で作っているため、コンポーネントやロジックの知識をそのまま流用でき、学習コストを最小化できる。
2. 圧倒的な軽量性： Electron と比較してインストーラーサイズは10分の1以下（Tauri は 10MB 未満、Electron は 100MB 超）。メモリ使用量も少なく、古い PC でもサクサク動く。
3. 強力なデスクトップ機能： ローカルファイル操作、トレイ常駐、自動アップデートなど、ブラウザでは不可能な機能をプラグインで拡張できる。
4. クロスプラットフォーム： Windows / macOS 両対応。

Step 1：開発環境の準備

Rust と Tauri CLI をインストールします。これらは "グローバルコマンド" として導入するため、どのフォルダで実行しても問題ありません。

Rust のインストール

winget install -e --id Rustlang.Rustup
rustup default stable

Windows Package Manager（winget）を使うと簡単です。

Tauri CLI のインストール

npm install -g create-tauri-app

Node.js 環境（npm コマンド）が必要です。

Step 2：プロジェクト作成

CLI を使って Tauri + React のプロジェクトを作成します。コマンドを実行すると質問が表示されるので、Framework に React、Language に JavaScript を選んでください。

npm create tauri-app@latest sekkeiya-desktop

作成されるディレクトリ構造は次の通りです。

sekkeiya-desktop/
├─ src/          # React (UI)
├─ src-tauri/    # Rust (Backend)
└─ package.json

Step 3：アプリ起動

プロジェクトフォルダに移動し、開発サーバーを立ち上げます。

cd sekkeiya-desktop
npm install              # 依存関係のインストール
npm run tauri dev        # アプリ起動（開発モード）

初回は Rust のコンパイルに少し時間がかかります。完了すると、React（JSX）のコードがネイティブのウィンドウとして立ち上がります。デスクトップ開発の最初の壁である「ウィンドウ表示」をこれでクリアです。

Step 4：UI カスタマイズ

App.jsx を書き換えて、デスクトップ版の動作確認を行います。ファイルを保存するとホットリロードが走り、ネイティブウィンドウ内の文字が即座に変わるかを確認しましょう。

export default function App() {
  return (
    <div style={{ padding: 24 }}>
      <h1>SEKKEIYA Desktop</h1>
      <p>デスクトップ版の開発を開始しました!</p>
    </div>
  );
}

ここまで確認できれば、環境構築は完了です。あとは Web 版と同じように React を書くだけです。

今後のロードマップ

ここまでの準備ができれば、Web 版の知識をそのまま活かしながら、デスクトップならではの機能を足していくだけです。Tauri はプラグインシステムが強力で、OS 固有の機能も npm install 感覚で追加できます。

Web スタック側

• Firebase ログイン： Web 版と同じ認証基盤を使い、アカウント情報を共有
• S.Models API： モデル一覧データの取得やメタデータの同期
• Dashboard UI： MUI（Material UI）による管理画面
• 3D Viewer（Three.js）： ブラウザ版で実績のある3Dビューアを移植

ネイティブ機能側

• Folder Watch： ローカルフォルダを監視し、ファイルの変更を検知
• Drag & Drop： OS からのファイルドロップを受け入れ、即アップロード
• App Linkage： Rhino や Blender と連携し、データを直接送受信

まとめ

今回の記事でデスクトップ版のスタートラインに立ちました。Rust / Tauri 環境を構築し、React（Vite）+ JavaScript でプロジェクトを作成、ネイティブウィンドウの表示とホットリロードを確認しました。

次のステップでは、Firebase ログイン → S.Models API 連携 → MUI による UI 構築、と進めることで、チームで使えるレベルのプロトタイプへと一気に成長させられます。