React と Redux を使った Electron 環境を作ってみました

最近、デスクトップアプリ開発界隈で流行ってる Electron の環境を React と Redux を組み合わせて作成してみました。Redux は Swift にも移植されたたりしているので前から気になってました。せっかくなんでオリジナル Redux 触ってみようと思った次第です。

最終成果物的なソースコードはこちら

Electron + React + Redux の最小構成 Boilerplate を作成しました。Boilerplate ってのは「再利用を意図した標準的な文例集」という意味で、必要最低限これだけあれば Electron + React + Redux 開発ができるよってことを意識してあります。ソースコードはこちらに置きました。 github.com

インストールと Electron の実行

以下の手順だけで Electron アプリが起動します。babel-core/register を使っているので ES6 のコンパイルは不要です。

$ git clone https://github.com/glassonion1/electron-react-redux-boilerplate.git
$ cd electron-react-redux-boilerplate
$ npm install
$ electron app

ディレクトリ構成

ディレクトリ構成は以下のような感じにしました。

$ cd ~/electron-react-redux-boilerplate
$ tree -I node_modules
.
├── app
│   ├── actions
│   │   └── counter.js
│   ├── components
│   │   ├── Root.js
│   │   └── main.js
│   ├── css
│   │   └── style.css
│   ├── index.html
│   ├── index.js
│   └── reducers
│       ├── counter.js
│       └── index.js
└── package.json

使用した Node.js のライブラリ

Electron 0.3系、React 0.14系、Redux 3.3系で構築しています。ReactDOM は React 0.14系から必須になったみたいなので追加してます。 ES6 から ES5 へのトランスパイラは Babel 6系を使うことにしました。Babel 5と6で設定が違ったのですこし手こずりました。

{
    "name": "electron-boilerplate",
    "version": "1.0.0",
    "description": "electron app",
    "main": "index.js",
    "author": "glassonion1",
    "license": "MIT",
    "repository": {
        "type": "git",
        "url": "https://github.com/glassonion1/electron-react-redux-boilerplate.git"
    },
    "keywords": [
        "electron",
        "react",
        "redux",
        "babel",
        "boilerplate"
    ],
    "dependencies": {
        "babel-core": "^6.6.5",
        "babel-preset-es2015": "^6.3.13",
        "babel-preset-react": "^6.3.13",
        "electron-prebuilt": "^0.31.0",
        "react": "^0.14.2",
        "react-dom": "^0.14.2",
        "react-redux": "^4.0.0",
        "redux": "^3.3.1"
    },
    "devDependencies": {
        "react": "^0.14.2",
        "react-redux": "^4.0.0",
        "redux": "^3.3.1"
    }
}

ES6 の自動トランスパイル

babel-core/register を使うと ES6 をgulp なんかでわざわざトランスパイルしなくても自動でトランスパイルしてくれます。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Electron!</title>
        <link href="css/style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="root"></div>
        <script>
            window.onload = function() {
                require("babel-core/register")({
                    "presets": ["es2015", "react"]
                });
                require("./components/main.js");
            }
        </script>
    </body>
</html>