WebStormを使って React を Electron で動かす

#はじめに
デスクトップアプリをElectronで普通に作っていましたが、そろそろフレームワークも使ってみたいなと思い、Reactを使ってデスクトップアプリを作るための方法です。
IDEは[JetBrains社](https://www.jetbrains.com/ja-jp/)の[WebStorm](https://www.jetbrains.com/ja-jp/webstorm/)を使っています。

また、この記事は、[React+ElectronでHello Worldする](https://qiita.com/niusounds/items/0c0016fdcc67cd12a954)を参考に、
WebStormで作成するための手順です。ありがとうございます。

#目次

1. Reactでプロジェクトを作る
1. Reactの表示確認
1. NPMモジュールの追加
1. Electron用のファイルの作成
1. Electronの実行
1. Electronのビルド

#環境

* Windows10 64bit
* WebStorm 2020.3
* Electron 11.1.1
* React 17.0.1
* node.js 14.15.1

#1. Reactプロジェクトを作る
WebStormを起動し、`File > New > Project...`を選択
左のペインからReactを選択し、右の`Location:`にプロジェクト名を入れます。
![キャプチャ0.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/d03881e2-da91-d014-2d44-8a9ccced57db.png)


`create`を選択したら、必要なデータがダウンロードされ、プロジェクトが作成されます。
![キャプチャ1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/8e29022d-566d-b726-af63-a0887bcdbe23.png)
#2. Reactの表示確認
`package.json`を開きます。

```json:package.json
{
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  ...
}
```

`start`と記述のある所の左の再生ボタンを押して、`Run 'npm start'`を選択します。
![キャプチャ6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/8ae7bb62-6695-eec7-e7cb-91740408862a.png)

ブラウザが開き、コンパイルが走り、以下の画面が出ればReactは動いてます。
![キャプチャ5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/7e9feed6-bd37-2ee4-827e-264ceeeddc53.png)

#3. NPMモジュールの追加
Reactの起動が確認できたら、次は、Electronで実行するためのモジュールを入れていきます。
`File > Settings...`を選択すると、Settingsウィンドウが開きます。
`Languages & Frameworks > Node.js and NPM`を選び、`+`を押して、以下のモジュールをinstallします。

1. electron：Electronの実行モジュールです
2. electron-packager：Electronをパッケージ化するモジュールです
3. concurrently：複数のコマンドを実行するモジュールです

![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/2ea594aa-d063-32ad-33d9-5cbaafb157f6.png)


#4. Electron用のファイルの作成
ほぼ[こちらの記事を引用](https://qiita.com/niusounds/items/0c0016fdcc67cd12a954#electron%E5%AE%9F%E8%A1%8C%E7%94%A8%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E8%BF%BD%E5%8A%A0)させていただいております。

`public`フォルダに以下のファイルを追加します。

```json:package.json
{
    "name":"electron-test",
    "version":"1.0.0",
    "main":"main.js"
}
```

```js:main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')

let mainWindow

function createWindow() {
    mainWindow = new BrowserWindow({ width: 800, height: 600 })

    // 環境変数 ELECTRON_START_URL が定義されていればそれを使う。なければ index.html を使う。
    const startUrl = process.env.ELECTRON_START_URL || url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    })
    mainWindow.loadURL(startUrl)

    // 開発中のみ開発者ツールを表示
    if (process.env.ELECTRON_START_URL) {
        mainWindow.webContents.openDevTools()
    }

    mainWindow.on('closed', _ => {
        mainWindow = null
    })
}

app.on('ready', createWindow)

app.on('window-all-closed', _ => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', _ => {
    if (mainWindow === null) {
        createWindow()
    }
})
```
実行用の`package.json`をElectronで実行するためのスクリプトを変更します。
※jsonファイルはコメントタグが使えないので、値として入れています。

```json:package.json
{
  ...
  "scripts": {
    "//1": "// Electron のビルドスクリプト",
    "electron-dev": "set ELECTRON_START_URL=http://localhost:3000 && electron public",
    "electron-build": "electron-packager build  --platform=win32 --arch=x64 --overwrite --asar",

    "//2": "// React のビルドスクリプト",
    "react-start": "react-scripts start","//3": "// 元の start から変更",
    "react-build": "react-scripts build","//4": "// 元の build から変更",

    "//5": "// 開発時に使用",
    "start": "concurrently \"npm run react-start\" \"npm run electron-dev\"",

    "//6": "// ビルド時に使用",
    "build": "npm run react-build && npm run electron-build"
  },
  "//7": "Reactのビルド時にリソースを相対パスで読み込むようにする",
  "homepage": "./",
  ...
}
```

> `"homepage": "./"`を指定することでReactのビルド時にソースの読み込み先が相対パスになります。

とのことですので、忘れずに追加してください。

#5. Electronの実行
Reactの表示確認で行った時と同じように`//5`の`start`を実行します。
ウィンドウにReactの画面が表示出来たら実行完了です。
![キャプチャ7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49845/5745a1f7-0f74-f61b-16b7-72415620fef5.png)

#6. Electronのビルド
デスクトップアプリケーションにするために、`//6`の`build`を実行します。
フォルダ内に新しくbuildフォルダが出来たら、exeを実行してみてください。
今回の`electron-packager`の出力設定は、buildフォルダに、windows形式(--platform=win32)で、64bit版(--arch=x64)、上書き(--overwrite)で、圧縮した(--asar)ファイルを作成する、という感じの設定になっています。

# 参考
[React+ElectronでHello Worldする](https://qiita.com/niusounds/items/0c0016fdcc67cd12a954)
[electron + Reactで5分でHelloWorldする](https://qiita.com/konatsu_p/items/9ac02fb637bdfaf005ac)
[ReactのプロジェクトをElectron化する。](https://qiita.com/maecho/items/c34de805101ae489532e)