30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

ReactにFlowを導入して型チェックを行う

React webpack Flow

JavaScriptは動的型付け言語なので、型のチェックは行われない。
だが、大規模な開発や複数人による開発のときは、型が欲しいこともある。

JavaScriptで型システムを導入する方法はいくつかあるが、その一つがFlow。
同じく型システムを実現するものとしてTypeScriptがあり、よく比較されるが、TypeScriptと違いFlowはAltJSではない。
通常のJavaScriptを拡張するような形で利用する。
そのため、既存のコードに段階的に導入していくことが出来る。

この記事では、Reactでの開発にFlowを導入する手順を書いていく。

Flowを導入するまで

いくつかの方法があるが、今回はビルドやコンパイルにはBabelとwebpackを使う。

以下の記事で説明した内容にFlowの設定を追加する、という流れ。

まず、Flowをnpmインストールし、それをnpm scriptに追加する。

$ npm i flow-bin -D
"scripts": {
  ...
  "flow": "flow",
  ...
},

この状態で$ npm run flow initを実行すると、.flowconfigが作成される。

次に、Flowを使うのに必要なプリセットやプラグインをインストールし、.babelrcを書き換える。

$ npm i babel-preset-flow babel-plugin-transform-class-properties -D
{
  "presets": ["es2015", "flow", "react"],
  "plugins": ["transform-class-properties"]
}

さらに、webpack.config.jsも書き換える。

  module: {
    rules: [{
      test: /\.js$/,
      include: path.resolve(__dirname, 'src'),
      use: [{
        loader: 'babel-loader',
        options: {
          presets: [
            'es2015', 'flow', 'react',
          ],
          plugins: ['transform-class-properties'],
        },
      }],
    }],
  },

これで、Flowを使う準備は整った。
コードにFlowの設定を追加した状態で、$ npm run flowとすれば、型チェックを行ってくれる。
また、ビルドに不要なコードはBabelが除去してくれるので、webpackによるビルドも問題なく行われる。

ESLintの設定

Flowそのものは使えるようになったが、このままでは、ESLintが通らなくなる。
Flowによって型を定義した部分のパースが上手くいかず、エラーになってしまうため。
そのため、ESLintの設定も行う必要がある。

必要なパッケージを入れ、.eslint.jsonを編集する。

$ npm i -D babel-eslint eslint-plugin-flowtype
{
  "parser": "babel-eslint",
  "plugins": ["flowtype"],
  ...
}

これで、ビルド、Flow、Lintが全て問題なく動くようになった。
あとは、Reactで書いたコードにFlowを追加していき、$ npm run flowを実行すればいい。

参考資料