flowtype による型安全 javascript プログラミング(チュートリアル)

概要

node.js で静的型チェックをするための実例を紹介します。

本記事の実装は以下の repository にあります。
https://github.com/algas/flow-example

flowtype とは？

flowtype は JavaScript 用の静的型チェッカーです。
JavaScript に type annotation を記述することで型チェックできるようになります。

メリット

• 実行前に静的に型をチェックできる
• JavaScript での厄介なバグを生みやすい、暗黙的型変換やnull参照、undefined is not a functionがチェックできる
• 必要な箇所だけ型チェックを適用することもできる

デメリット

• type annotation は通常の javascript の文法とは異なるので直接 javascript として実行する場合にはファイルから型情報を取り除く必要がある
  (コメントにすることで回避できる)
• サードパーティのライブラリにも型チェックを適用するには、ライブラリごとに型情報ファイルを用意する必要がある
  (flow-typedで既に用意されているファイルを使える)

実装例

underscore.js を使った簡単な例を見てみましょう。

単純に _.first を呼び出して console.log に表示するだけのプログラムです。

// @flow
/* flow-include import _ from 'underscore' */
(function(){
  var _ = require('underscore');
  /* :: declare var xs: Array<number>;  */
  var xs = [3,2,1];
  console.log(xs);
  var fs /* : number[] */ = _.first(xs, 2);
  console.log(fs);
  var x /* : number */ = _.first(xs);
  console.log(x);
})();

1行目は flow のファイルであることを宣言する記述です。
// @flow
2行目は flow-typed から underscore の型宣言を _ に呼び出しています。
import _ from 'underscore'
ただし、これだけでは4行目と同じ _ を使っているためにコンパイルエラーになります。それを避けるために flow-include コメントを使っています。
/* flow-include ... */
上記では3種類の flow コメントを使っています。

1. /* : */
2. /* :: */
3. /* flow-include */

本実装における flow の記述はすべてコメントにしているので javascript として実行しても問題ありません。

使い方

セットアップ

npm install -g yarn
yarn install
$(yarn bin)/flow-typed install -f v0.42.0 underscore@1.8.3

ビルド

src 以下にある flow ファイルから flow 構文を除去した標準の JavaScript を build 以下に出力します。
ここでは flow-remove-types を使っています。

$(yarn bin)/flow-remove-types src/ --out-dir build/

テスト

flow による静的型チェックを行います。

$(yarn bin)/flow check

実行

ビルドせずに直接 flow のコードを実行します。

$(yarn bin)/flow-node src/index.js

まとめ

https://github.com/algas/flow-example
flow を使うことで動的型付け言語である JavaScript に静的型チェックを取り入れることができます。
本記事を参考にしていただくことで JavaScript を書くみなさんの負担を少しでも軽減することができたら幸いです。

参考文献

https://flowtype.org/
http://qiita.com/kuy/items/90fe63a9cc6710815c09