2019/4 Flowを使った感想

佐々木誠

2019年4月18日に公開大阪

Reactで有名なFlowをプロジェクトで使うことがあったのでご紹介します。

Flowとは

Reactと同様Facebook製なJavaScriptの型チェッカーです。 JavaScript言語には型がないので、型安全にして品質をあげようというツールです。このFlowをReactのプロジェクトで導入してみました。

利用イメージ

Javaのような型とはちょっと違います。JavaScriptを拡張した言語ではなく、あくまでツールです。

1.ファイルの先頭

ファイルの一番最初に、コメントアウト形式で以下のように記述します。これで、このファイルがFlowチェックするファイルだとツールが認識します。

// @flow

2.型指定

変数の右側にコロンで型を記述する方式です。Webpackでjsxをjsに変換する際に型はなくなります。

let gengo: string = 'heisei';
gengo = 'reiwa';

ReactだとPropsやStateに活用するといいですね。typeで型オブジェクトを定義する感じです。

type Props = {
    init: boolean,
    target: string,
    finish: (msg: string)=>void,
};

type State = {
    selected: string,
};

export default class UserSelector extends React.Component<Props, State> {
    render() {
        <div>
            {!this.props.init && <p>初期化中です</p>}
            {this.props.init && <p>{selected}を選択中です</p>}
        </div>
    }
};

3.テスト

Flowは言語ではなくチェッカーなので、以下のようなコマンドでテストを行います。

> flow check

整合性が合わなければエラーとなり、問題を発見できます。

使ってみた感想

半年程度、使ってみた感想としては「微妙」でした。理由は２つあります。

１つは、能動的にテストコマンドを実行しなければ問題が見つけられないことです。コーディング中に細かく都度実行するのは手間なので、ある程度区切りがついてからテスト実行することになります。そのため、動いた！作りきった！と思ったあとにテストして問題が見つかったりするとネガティブな気持ちになったります。

もう１つはFlowはあくまで型チェッカーなので、型の記述は必須ではなく強要されません。自由なのはいいことですが、前述のネガティブな気持ちが強い人は億劫になり書かなかったりします。

結果、導入したプロジェクトではFlowからTypeScriptに移行しました。

ReactでのTypeScript導入はちょっとハードルが高いですが、Flowを利用するならTypeScriptを利用することをおすすめします。