Help us understand the problem. What is going on with this article?

Electron + React + Flow を1から試してみる

More than 3 years have passed since last update.

やること

boilerplate等を使えば、簡単に使いやすくなっていますが、
結構色々なものが入っていて一つ一つの動きが理解しづらかったので、
一旦1から試してみる。

環境

MacOS 10.12
Node.js v7.4
npm 4.0.5
yarn 0.23.2

Electron

まずはElectronのインストール。
グローバルインストールしたくない場合はプロジェクト内にインストールでもOKです。

npm install -g electron
mkdir project
cd project
npm init
package.json
"main": "app.js",
"scripts": {
    "start": "electron ."
},

一部抜粋。mainスクリプトがapp.js(好きな名前でOK)、scripts.start を electron . に設定する。
これで npm startelectron . が走るようになります。

$ npm install --save electron

electronモジュールを入れます。saveオプションでpackage.jsonに記録します。

mainスクリプトであるapp.jsを作ります。

app.js
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow

let mainWindow

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

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

app.on('ready', createWindow)

app.on('activate', () => {
  if (mainWindow == null) {
    createWindow()
  }
})
$ npm start

これで空ページが出ればElectronの起動はOKです。

React

React導入に必要なモジュールを入れます。
React本体とコンパイルに必要なWebpackとbabelです。

$ yarn add react react-dom babel-core
$ yarn add babel-loader babel-preset-react webpack -D

ビルド用のwebpackの設定ファイルを作ります。

webpack.config.js
module.exports = {
  entry: './app/src/index.js',
  output: {
    filename: 'renderer.js',
    path: __dirname + '/app/dist'
  },
  devtool: 'source-map',
  resolve: {
    extensions: ['.jsx', '.js']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
}

output.pathは相対パスが使えないので注意が必要です。
__dirnameでルートディレクトリが取れます。

package.json
"scripts": {
  "build": "./node_modules/webpack/bin/webpack.js --config ./webpack.config.js",
 }

buildコマンドを作ります。yarnで入れたwebpackを設定ファイル指定で叩きます。 npm run build でビルドできます。

シンプルなReactを使ったファイルを作ってビルドします。

index.js
import React from 'react'
import { render } from 'react-dom'

const Test = () => <div>test</div>


render(
  <Test />,
  document.getElementById('root')
)
$ npm run build

これでdist/renderer.jsにビルド結果が出力されます。
Reactの導入はこれで完了です。

flow

次にflowを入れます。

flowコマンドを使えるようにします

$ brew install flow
$ npm -g install flow-typed
$ yarn add flow-bin flow-typed -D

flowコマンドと型定義を取得するflow-typedコマンドを入れ、
devDependenciesにflow-bin, flow-typedを入れます。

$ flow init

.flowconfigファイルができます。

.flowconfig
[ignore]
.*/node_modules/.*
[include]

[libs]

[options]

node_modules以下はチェックする必要ないのでignoreに入れます。
処理時間が変わってきます。

$ flow-typed install

導入しているモジュールの型定義が取得できます。

// @flow

jsファイルの先頭に@flowのコメントがあることがflowの検査対象設定となります。

let num: number;
num = "a"

例えばこう書いて flow コマンドを実行すると

app/src/index.js:8
  8: num = "a"
           ^^^ string. This type is incompatible with
  7: let num: number;
              ^^^^^^ number

こうやって指摘してくれるようになります。

まとめ

とりあえず何が必要なのかは理解できたのかなと思います。
環境構築で困るケースもあるかと思うので、どなたかの理解の手助けになればと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away