# クラウドIDE プレビュー機能の設定

プレビュー機能を利用するには、プロジェクトの `package.json` ファイルに、次の設定が必要となります。

1. `monaca:preview`コマンド

   * Monaca クラウドIDEは、プレビュー機能に必要となる開発サーバーを起動させるため`monaca:preview` コマンドを実行します。

2. 開発用サーバーの接続ポートを「8080」に指定
   * 起動した開発用サーバーは、ポート番号「8080」でリッスンします。

Monaca以外のサービスや開発ツールで作成されたプロジェクトは、上記の設定によりプレビュー機能をご利用いただけます。

## トランスパイルを利用しないプロジェクト

トランスパイルを利用しないプロジェクトは、`package.json` ファイルの `script`プロパティと`devDependencies`プロパティを次のように設定します。開発用サーバーは、BrowserSyncを利用して起動しています。

### scriptプロパティ

scriptプロパティへ`monaca:preview`コマンドと`dev`コマンドを追加します。

```
"scripts": {
    ・・・
   "monaca:preview": "npm run dev",
   "dev": "browser-sync start -s www/ --watch --port 8080"
    ・・・
}
```

### devDependencies

`devDependencies`プロパティへ`browser-sync`モジュールを追加します。

```
"devDependencies": {
    "browser-sync": "~2.27.7"
}
```

最新のMonacaプロジェクト(Cordova12)において、`browser-sync`は上記のバージョンを指定します。

## トランスパイルを利用するプロジェクト

VueやReact、Angularなどのトランスパイルを利用するプロジェクトは、`monaca:preview`コマンド内に開発用サーバーを起動する処理を登録します。

また、ソースコードの変更時に自動的にビルドを実行させる場合は、`watch`コマンドも`monaca:preview`コマンド内に追加してください。

{% hint style="warning" %}
トランスパイルを利用するプロジェクトは、多くのモジュールに依存しているため、Monacaへの移行ができない可能性があります。予めご了承ください。
{% endhint %}

### scriptプロパティ

下記は、webpackを利用した場合の設定内容の一例です。

開発用サーバーを起動する`webpack server`コマンドを `dev` コマンドに設定。

ソースコードの変更検知の処理を`watch` コマンドに設定し、`monaca:preview`コマンド内で2つの処理を登録しています。

```
  "scripts": {
    ・・・
    "monaca:preview": "npm run dev & npm run watch",
    "dev": "webpack serve --port 8080 --open",
    "watch": "webpack --watch --mode production",
    ・・・
  }
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ja.docs.monaca.io/products_guide/migration/setup-preview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.