ローカル開発環境をセットアップする

更新日2026年7月30日

プラグインプレイグラウンドは素早い試作に最適ですが、本格的なプラグインを作る場合はローカル開発環境が適しています。自分のエディタでコードを書き、.zip を手動でビルドして再インストールすることなく、Re:Earth Visualizer 上でほぼ即時に変更を確認できます。

このワークフローは次の 2 つで構成されます：

テンプレートから作成するプラグインプロジェクト
DEV_PLUGIN 機能を使い、プレビューサーバーからプラグインを直接読み込むローカル版 Re:Earth Visualizer

前提条件

このガイドでは、Re:Earth Visualizer がローカルで起動しており http://localhost:3000 でアクセスできることを前提とします。Visualizer 本体（サーバー／DB を含む）のセットアップは別の手順です。詳細は reearth-visualizer repository を参照してください。

また、Node.js と Yarn がインストールされている必要があります。

テンプレートからプラグインを作成する

推奨する開始点は、React / ShadCN / Tailwind CSS を用いた Re:Earth Visualizer Plugin ShadCN Template です。

テンプレートからプロジェクトを作成し、ターミナルでそのディレクトリを開いたら：

プロジェクトディレクトリへ移動：
Terminal window
```
cd your-new-plugin
```
依存関係をインストール：
Terminal window
```
yarn install
```
必要ファイルを生成するため、初回ビルドを実行：
Terminal window
```
yarn build
```
開発／プレビューサーバーを起動：
Terminal window
```
yarn dev-build
```

この最後のコマンドは、保存のたびに自動でビルドし、http://localhost:5005 のプレビューサーバーから配信します。

Re:Earth Visualizer で DEV_PLUGIN を有効化する

次に、ローカル Visualizer がそのプレビューサーバーからプラグインをロードするよう設定します。

ローカル Re:Earth Visualizer プロジェクトの web ディレクトリへ移動し、まだ存在しなければ .env ファイルを作成します：
Terminal window
```
cd web
touch .env
```
env にプレビューサーバー URL を追加します：
Terminal window
```
REEARTH_WEB_DEV_PLUGIN_URLS='["http://localhost:5005"]'
```

.env を保存すると Web サーバーは自動的に再起動します。

ウィジェットプラグインをプロジェクトに追加する

両方のサーバーが起動したら、Visualizer 上でプラグインをホストするプロジェクトを用意します。

http://localhost:3000 でローカル Re:Earth Visualizer を開きます。
ダッシュボードから新しいプロジェクトを作成します。
プロジェクトをダブルクリックして開きます。
エディタのヘッダーで Install Dev Plugins をクリックし、プレビューサーバーからプラグインを取得してインストールします。
Widgets タブを開き、シーンにプラグインのウィジェットを追加します。

開発ループ

接続できると、日々の作業はとても短くなります。

プラグインコードを変更して保存すると、自動的に再ビルドされます。
Visualizer のエディタヘッダーで Reload Dev Plugin Extensions をクリックすると、更新された拡張コードが読み込まれます。

ページ全体を再読み込みするのではなく、プラグインだけが再読み込みされるため、変更はほぼ即時に反映されます。

DEV_PLUGIN の 2 つのボタン

DEV_PLUGIN ワークフローでは、Visualizer のエディタヘッダーに 2 つのボタン（どちらもパズルピースアイコン）が追加されます。

Install Dev Plugins — プレビューサーバーからプラグインを取得し、.zip にパッケージ化してインストールします。
Reload Dev Plugin Extensions — ページを再読み込みせずに、プレビューサーバーから拡張コードを再読み込みします。

どちらを押すべきかは、変更内容に応じて次の表で判断してください。

変更したもの	使用するボタン
プロジェクトへの初回セットアップ	Install Dev Plugins
拡張コード（TypeScript / JavaScript）	Reload Dev Plugin Extensions
`reearth.yml`（プラグインマニフェスト）	Install Dev Plugins