Flow を導入してみる
最近話題になっている Facebook 製 JavaScript の静的型チェックツール Flow を導入して使います。
ついでに Facebook 製の JavaScript パッケージ管理のアプリケーション yarn を使って進めていきます。
今回実施したのは下記の環境で。
- 実施した環境
- Mac OS X El Capitan 10.11.6
- Homebrew 1.1.2
まずは Homebrew を使って Flow を導入して進めていきます。
Flow の導入
Flow の導入は下記のコマンドで OK です。
brew install flow
これだけで Flow をインストールすることができます。
インストールされていれば、下記のコマンドで
flow version
こんな出力が表示されるはずです。
Flow, a static type checker for JavaScript, version 0.36.0
yarn の導入
yarn も brew でインストールする。インストールは下記のコマンドで。
brew install yarn
そのあと、echo 'export PATH="$PATH:yarn global bin"' >> ~/.bashrc をターミナル上で実行して、yarn を環境変数 PATH に追加する必要がある。追加し終えたら source ~/.bashrc で設定を再読込。
あとは、Flow のときのように、下記のコマンドでインストールできているか確認する。
yarn --version
できていれば以下のようにバージョンが表示される。
0.16.1
プロジェクトの作成
では、実際に Flow を利用したプロジェクトを作成していきます。
手順はだいたい Flow 公式サイト の流れに沿って進めていきます。 まずは下記のようにプロジェクトディレクトリを作成します。
$ mkdir -p get_started $ cd get_started
次に、yarn init を使ってプロジェクトディレクトリ以下に package.json を作成します。
表示されるダイアログにはひとまずすべてエンターでOK。
$ yarn init
すると、下記のような package.json が作成される。
{ "name": "get_started", "version": "1.0.0", "main": "index.js", "license": "MIT" }
この package.json は yarn とは別の JavaScript パッケージマネージャー npm で使われているプロジェクトの情報が記載されているファイルです。ここに、使用している依存パッケージの情報が書き込まれていきます。こうすることで、違う環境下で yarn install を実行すると依存ライブラリをインストールできます。
次に、Flow で使用するための設定ファイルを下記のコマンドで生成します。
$ flow init
すると、.flowconfig というファイルが生成されているのでそのファイルの[ignore]の部分に下記のように記述を追加します。
[ignore] .*/node_modules/.* [include] [libs] [options]
これは、Flow の静的型チェックが node_modules 以下に及ばないようにするための設定です。
ここまでできたら、もうほぼできたも同然です。下記のように index.js を作成しましょう。
// @flow var str: string = 'hello world!'; console.log(str);
この // @flow が Flow のチェック対象となるファイルを表しています。
そして、このうち、str の後ろにある : string が str は文字列型ですよ、ということを表している。
このファイルを保存して下記コマンドで型チェック。
$ flow
初回起動時は Flow のサーバが起動するため、コンソールに色々と表示されるが、最下部の No erros! が表示されていれば、きちんと静的型付けチェックが通っている。
Launching Flow server for /Users/bokken/temp/get_started Spawned flow server (pid=68555) Logs will go to /private/tmp/flow/zSUserszSryozStempzSgomi.log No errors!
ここで、さきほどの index.js の str を : string から : number にする。
// @flow var str: number = 'hello world!'; console.log(str);
この状態で、
$ flow
を実行すると、下記のように型が違うよ、というエラーが表示される。
index.js:3
3: var str: number = 'hello world!';
^^^^^^^^^^^^^^ string. This type is incompatible with
3: var str: number = 'hello world!';
^^^^^^ number
Found 1 error
ここまでで、Flow の静的型チェックは終わりです。
最後に、 : number を : string に直しておいてください。
実行可能な JavaScript へトランスパイルして実行
上記の index.js は Flow の余計な型情報が付加されているため、そのまま node で実行しようとしても実行できません。
Flow で記述されたコードは実行可能な JavaScript にトランスパイル(変換)しなければいけません。それを babel というトランスパイラで実行していきます。
下記のコマンドで babel と Flow 用のプラグインをインストールして、変換のための設定ファイル (.babelrc) も作成していきます。
$ yarn add --dev babel-cli
$ yarn add --dev babel-plugin-transform-flow-strip-types
$ echo '{"plugins": ["transform-flow-strip-types"]}' > .babelrc
上記の設定が終わるとあとは、下記のコマンドを実行すると
$ babel-node index.js
下記の出力が表示されるはずです。
hello world!
トランスパイルされたファイルを生成したければ、下記のコマンドを実行するとトランスパイルされたファイルが生成されます。
$ babel index.js -o transpiled-index.js
以上が、Flow のチュートリアルでした。
Flow には型ファイルが TypeScript ほど多くないので、そういった面ではまだまだみたいです。 (型なき世界のためのflowtype入門)
けれども、Flow や yarn を開発したりと、JavaScript 関係に力を入れている Facebook は今後何かしてくれるんじゃないかなぁと個人的に思っています。
来たる Flow の時代のために、みなさんもぜひ一度お試しあれ。
