読者です 読者をやめる 読者になる 読者になる

botchy note

TypeScript、Ruby、Golang とか Macとかの備忘録です.間違いがあるとご指摘くださると嬉しいです.

Flow を導入してみる

Flow JavaScript

f:id:bokken31:20161201230354p:plain

最近話題になっている FacebookJavaScript の静的型チェックツール 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 の後ろにある : stringstr は文字列型ですよ、ということを表している。

このファイルを保存して下記コマンドで型チェック。

$ 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.jsstr: 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入門)

けれども、Flowyarn を開発したりと、JavaScript 関係に力を入れている Facebook は今後何かしてくれるんじゃないかなぁと個人的に思っています。

来たる Flow の時代のために、みなさんもぜひ一度お試しあれ。

広告を非表示にする