喧嘩百合 ロゴ

UnityでReact, TypeScript, Tailwindを使えるOneJSを導入してみた

📅投稿日: 2025-5-24

Unity OneJS React TypeScript Tailwind CSS UI開発

UnityのUI開発にOneJSを導入しました。導入理由、メリット・デメリット、課題とその解決策を解説します。

UnityでReact, TypeScript, Tailwindを使えるOneJSを導入してみた

はじめに

UnityのUI開発といえば、uGUIやUI Toolkitが一般的ですが、Webフロントエンドの技術スタックで開発できる「OneJS」を導入してみました。なぜOneJSを選んだのか、実際に使ってみてどうだったのか、導入を検討している方に向けてご紹介します。

OneJSとは何か

OneJSは、Unity上でReact、TypeScript、そしてTailwind CSSといったWeb開発で広く使われている技術を使ってUIを構築できるフレームワークです。これにより、普段Webフロントエンド開発に慣れているエンジニアが、その知識や経験を活かしてUnityのリッチなUIを効率的に開発することが可能になります。

https://onejs.com/

なぜOneJSを導入しようと思ったのか

OneJSの導入を検討し、実行に移した理由はいくつかあります。

  • CursorベースでのUI開発: CursorのAIエージェントを最大限に活用してUI開発を進めたいと考えました。
  • AIエージェントとの高い親和性: AIエージェントは、ReactやTypeScript、Tailwind CSSといったWeb技術のコード生成を得意としています。AIの得意分野を活かすことで、開発効率の向上が期待できました。
  • 自身のフロントエンド開発経験の活用: 私自身にフロントエンド開発の経験があり、TypeScriptやTailwind CSSを使ったUI開発に馴染みがあったため、学習コストを抑えつつ開発に取り組めると感じました。
  • コードベースの保守性向上とバージョン管理: UIの定義をコードベースで行うことで、保守性が向上し、Unity Version Controlで差分を明確に追えるようになります。これはuGUI + Prefab中心の管理と比べて大きなメリットです。
  • 既存の購入資産の活用: 以前からOneJSを購入しており、いつか使ってみたいという気持ちがあったことも導入のきっかけの一つです。UnityでReactを使ってUIを作れることに魅力を感じていました。

導入して感じたメリット・デメリット

実際にOneJSを導入して開発を進める中で感じたメリットとデメリットです。

メリット

  • ホットリロードの快適さ: コードを変更してすぐにUnity側でUIの変更を確認できるホットリロード機能は非常に強力です。UIの試行錯誤が高速化され、開発効率が大幅に向上します。
  • AIによるコード生成の質の高さ: AIが最も得意とする技術スタック（React, TypeScript, Tailwind CSS）であるため、UIコンポーネントの生成やスタイリングに関するコードの提案・生成の質が高く、AIとの連携開発が非常にスムーズです。

デメリット

  • Webとのスタイルの差異: Web版のTailwind CSSには存在するスタイルが、OneJS（Unity）環境ではまだ完全に実装されていない場合があります。
    • ただし、これはUI Toolkitのデバッガーを使えばどのスタイルが適用されているかすぐに確認できるため、大きなデメリットとは感じませんでした。必要に応じて代替のスタイルを探すことで対応可能です。

既存UIシステムとの比較

OneJSと既存のUIシステムであるUI Toolkit（USS）およびuGUIの特徴を比較してみます。

  • UI Toolkit (USS) との比較: UI ToolkitでスタイルをUSS（Unity Style Sheets）で記述する場合、UIが複雑になってくるとUSSファイルも複雑になりがちです。これはかつてのWeb開発でHTML、CSS、jQueryを使って複雑なアプリケーションを構築していた時代と似た状況になりやすく、大規模なアプリケーション（になりがちなゲーム開発）のUI開発には向かない可能性があります。
  • uGUIとの比較: uGUIは主にエディタ上での操作やプレハブを主体としたUI構築手法であり、コードベースでの管理には限界があります。そのため、uGUIはコード生成AIとの相性があまり良くありません。また、UI要素が増えるにつれてプレハブが大量に生成され、管理が煩雑になりがちです。OneJSはUIの定義がコードとして分離されるため、UIロジックと見た目をより明確に分けられ、管理しやすくなります。

躓いた点、ハマりどころ、解決策

開発中に遭遇したいくつかの問題と、その解決策についてです。

  • 存在しないスタイルの生成とホットリロードの停止: AIにコードを生成させた際に、OneJS環境には存在しないTailwindスタイルを生成してしまうことがありました。その結果、UIの表示がおかしくなったり、最悪の場合はホットリロードが効かなくなることがありました。
    • 解決策: UI Toolkitデバッガーを使って、適用されているスタイルとエラーが出ていないかを確認することで、問題の箇所を特定し、スタイルを修正します。AIが生成したコードも鵜呑みにせず、実行環境での確認が重要です。
  • シーンを分ける方法: アプリケーションが大きくなると、UIもシーンごとに分けたくなることがあります。OneJSで現在のシーンに応じてUIを切り替える方法についてです。
    • 解決策: index.tsxなどのエントリーポイントとなるファイルで、UnityEngine.SceneManagement.SceneManager.GetActiveScene().nameを使って現在のシーン名を取得し、そのシーン名に応じて表示するコンポーネントを切り替えるように実装します。
import { render, h } from "preact";
import { useState, useEffect } from "preact/hooks";
import { SceneManagement } from "UnityEngine";

const App = () => {
	const [sceneName, setSceneName] = useState("");

	useEffect(() => {
		// コンポーネントマウント時にシーン名を取得
		const currentScene = SceneManagement.SceneManager.GetActiveScene().name;
		setSceneName(currentScene);
	}, []);

	// シーン名に応じたUIの分岐
	const renderSceneSpecificUI = () => {
		switch (sceneName) {
			case "Scene1":
				return <div />;
			case "Scene2":
				return <div />;
			case "Scene3":
                return <div />;
			default:
				return <div />;
		}
	};

	return renderSceneSpecificUI();
};

render(<App />, document.body);

まとめと今後の展望

OneJSを導入したことで、UnityのUI開発にWebフロントエンドの知見やツールを活かせる大きな可能性を感じました。特にAIとの相性の良さやホットリロードの快適さは、Web開発に慣れたエンジニアにとっては非常に魅力的な機能です。

今の所感触が非常に良いため、今後もOneJSを活用してリッチなUI開発に挑戦していきたいと思います。

←ブログ一覧に戻る