# React からの移行

このページでは、[Monaca CLI](/products_guide/monaca_cli.md)を使用して、 プロジェクトを Monaca に移行するための手順を説明します。このガイドを終えたら、Monaca を使って プロジェクトからアプリを実行、テスト、デバッグ、ビルドすることができます！始めましょう！

## 前提条件

1. 移行を開始する前に、[キーポイント](/products_guide/migration/key_point.md)を一読してみてください。
2. Monaca CLI を npm でグローバルにインストールする

   ```bash
   $ npm install -g monaca
   ```

## 移行手順

1. Monaca CLIのインストール後、Monacaアカウントでログインしてください。 

```javascript
$ monaca login
```

    2\. プロジェクトディレクトリに移動します。 

```javascript
$ cd <project dir>
$ npm run eject
$ npm install
```

&#x20;   3\. ウォッチスクリプトがないので、ウォッチスクリプトを下の手順で作成します。

* **scripts/build.js** を **scripts/watch.js**としてコピーする
* **build** 関数を下のように変更する

```javascript
function build(previousFileSizes) {
  console.log('Creating an optimized production build...');
  let compiler = webpack(config);
  return new Promise((resolve, reject) => {
    compiler.watch({},(err, stats) => {
      if (err) {
        return reject(err);
      } else {
        copyPublicFolder();
      }
      console.log(stats.toString({
        chunks: false,
        colors: true
      }));
    });
  });
}
```

&#x20;    4\. 次に、プロジェクトをMonacaのプロジェクト構造に変換するために **monaca init** を実行します。&#x20;

```javascript
$ monaca init
$ ...
$ ? Are you sure you want to continue initializing this project? Yes
$ ? Is it a transpilable project? Yes
$ ? Which command do you use to serve the app? node scripts/start.js
$ ? Which command do you use to build the app? node scripts/build.js
$ ? Which command do you use to watch the changes from your app? node scripts/watch.js
```

&#x20;   次のように **package.json** ファイルに3つの新しいコマンドを注入する必要があります：

```javascript
"scripts": {
    "monaca:preview": "node scripts/start.js & node scripts/watch.js",
    "monaca:transpile": "node scripts/build.js",
    "monaca:debug": "node scripts/watch.js"
}
```

&#x20;   5\. Config ビルド出力ディレクトリ

* 「**scripts/build.js**」と「**scripts/watch.js**」を開き、fs.emptyDirSync（paths.appBuild）を削除します。 関数のmeasureFileSizesBeforeBuildからビルドディレクトリが削除されないようにします。
* 「config/paths.js」を開き、appBuildディレクトリとservePathを次のように変更します

```javascript
module.exports = {
    appBuild: resolveApp('www'),
    servedPath: './'
}
```

## アプリをデバッグする

[Monaca デバッガー](/products_guide/debugger.md) は、端末上で Monaca アプリをリアルタイムでテスト、デバッグするためのアプリケーションです。\
Monaca クラウド IDE で アプリを開発する場合、ファイルに加えられた変更は、保存後すぐに Monaca デバッガーに同期されます。

Monaca デバッガーの使い方は、以下になります。

1. Google Play または App Store から端末に Monaca デバッガーをインストールします。

[![](https://docs.monaca.io/images/monaca_ide/tutorial/testing_debugging/App_Store.jpg) ](https://itunes.apple.com/us/app/monaca/id550941371?mt=8)[![](https://docs.monaca.io/images/monaca_ide/tutorial/testing_debugging/Google_play.png)](https://play.google.com/store/apps/details?id=mobi.monaca.debugger\&hl=en)

{% hint style="info" %}
Android エミュレータに Monaca デバッガーをインストールする場合は、 [Android エミュレーター向け Monaca デバッガー ](/products_guide/debugger/installation/debugger_emulator.md)を参照してください。
{% endhint %}

1. Monaca デバッガーを起動し、Monaca アカウントでサインインします。 Monaca クラウド IDE と同じアカウントを使用していることを確認してください。

![](/files/-MgYkZAmuoe2erWewuXu)

1. デバッグを開始する前に、Monaca DebuggerとローカルPCをペアリングする必要があります。ペアリング前に次の点に注意してください。

* Monaca DebuggerとローカルPCは、同じネットワーク接続（LANまたはWi-Fi）に接続する必要があります。
* ローカルPCのファイアウォールを無効にする。
  1. 上の点を確認後、ペアリングを開始できます。ターミナルでプロジェクトディレクトリに移動し、 `monaca debug`と入力します。

```javascript
    $ cd <project dir>
    $ monaca debug
```

1. 次に、デバッガとローカルPCをペアリングするよう促すポップアップメッセージがMonaca Debuggerの中に表示されます。

![](/files/-MgYkxrMaFRZsRMS0BP-)

1. ペアリングが成功した場合、ローカルプロジェクト名がMonaca Debuggerの `Local Projects`に表示されます。 ペアリングに失敗した場合は、[Fail to Pair Monaca Debugger](/products_guide/debugger/troubleshooting.md)を参照してください。

![](/files/-MgYlE-q_J0ce2suixUB)

1. プロジェクトを実行するには、Monaca Debuggerのプロジェクト名をタップします.
2. プロジェクトがデバッガで実行されているはずです。プロジェクトのさまざまな操作を試してみてください！ その後、コードを変更して保存してみてください。次に、デバッガに反映された変更が表示されます。

{% hint style="info" %}
デバッグを停止し、デバッガのペアを解除するには、 `Ctrl + c` を押します。
{% endhint %}

## アプリをビルドする

### CLI コマンドのみを使用 <a href="#cli-komandonomiwo" id="cli-komandonomiwo"></a>

1. プロジェクトディレクトリに移動します。

   ```
      $ cd <project dir>
   ```
2. Android Debug Buildを開始する

   ```
      $ monaca remote build android --build-type=debug
   ```

### GUI での使用 <a href="#gui-deno" id="gui-deno"></a>

1. プロジェクトディレクトリに移動します。

   ```
      $ cd <project dir>
   ```
2. ビルドウィンドウを開いてビルドを開始します。

   ```
      $ monaca remote build --browser
   ```
3. デバッグビルドはデフォルトで選択されています。`Start Build`をクリックしてください。

![](/files/-MgYlllLWIRnAo5VQnLM)

1. ビルドが完了するまでに数分かかることがあります。ビルドが正常に完了すると、次の画面が表示されます。アプリをデバイスにインストールするさまざまな方法を選択できます。

![](/files/-MgYlsVRFaiW5LGNsiE_)


---

# 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/react_migration.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.