Flowによる静的型チェック #reactnative

Flowとは

FlowはJavaScriptに静的型チェックの機能を追加するものです。
静的型付き言語では書いたコードの型が間違っているとエラーが出て、間違いに素早く気づくことができます。
JavaScriptは静的型付き言語ではなく静的型チェックを行えません。
FlowではJavaScriptに静的型チェック機能を追加するライブラリ。

No.1 Flowのセットアップ

ここではReact NativeにFlowをセットアップする方法を示します。
雛形の作成(react-native init)でFlowの設定ファイルである「.flowconfig」が自動で生成されています。
＊設定ファイルは自動で生成されていますが、ライブラリ自体はインストールされていません。

1. 設定ファイルからバージョンを確認する

バージョンを確認

cat .flowconfig

[ignore]
; We fork some components by platform
.*/*[.]android.js

; Ignore "BUCK" generated dirs
<PROJECT_ROOT>/\.buckd/

; Ignore unexpected extra "@providesModule"
.*/node_modules/.*/node_modules/fbjs/.*

; Ignore duplicate module providers
; For RN Apps installed via npm, "Libraries" folder is inside
; "node_modules/react-native" but in the source repo it is in the root
.*/Libraries/react-native/React.js

; Ignore polyfills
.*/Libraries/polyfills/.*

; Ignore metro
.*/node_modules/metro/.*

[include]

[libs]
node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow/
node_modules/react-native/flow-github/

[options]
emoji=true

module.system=haste

munge_underscores=true

module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'

module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.native.js

suppress_type=$FlowIssue
suppress_type=$FlowFixMe
suppress_type=$FlowFixMeProps
suppress_type=$FlowFixMeState

suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError

[version]
^0.65.0

2. バージョンを指定してインストール

インストール

npm install --save-dev flow-bin@0.65.0

＊開発時にしか使わないため「--save-dev」にする

No.2 Flowを使う

静的型チェックを行う関数を作成

App.js

//プログラムの最下部に記載

// @flow
function increment(n: number): number {
    return n + 1;
}
increment("3"); // Error!

No.3 Flowを実行する(エラー)

Flowを使って静的型チェックを行う

Flownの実行

`(npm bin)`/flow

＊1回目の実行はFlowのサーバプロセスを立ち上げるため時間がかかる

Flow実行結果

Error: App.js:13
 13: } from 'react-native';
            ^^^^^^^^^^^^^^ react-native. Required module not found

Error: App.js:64
 64: square("2");
            ^^^ string. This type is incompatible with the expected param type of
 61: function square(n: number): number {
                        ^^^^^^ number


Found 2 errors

No.3 Flowを実行する(正常)

エラー箇所の修正

エラーの修正

vi App.js

エラーの修正

increment(3);

Flow実行(正常)

Flow実行

`(npm bin)`/flow
No errors!

あとがき

・npmで簡単にライブラリを追加できるので後からFlowを追加することが可能
・React Nativeでアプリを開発する場合、最初からFlowを導入した開発が推奨されています。Flowの型チェックで「インターフェースのわかりやすさ」「リファクタリングのしやすさ」など使用しない理由が見つからない。
・Flowを利用することで型チェックを導入した開発がReact Nativeでも簡単に行える。