メインコンテンツへスキップ

使用方法

Flowをインストールしたら、基本的なレベルでFlowの使用方法を理解することが重要です。ほとんどの新しいFlowプロジェクトでは、次の一般的なパターンに従います。

プロジェクトの初期化​

プロジェクトをFlowに対応させるには、1つのコマンドのみが必要です。

flow init

プロジェクトの最上位レベルでこのコマンドを実行して、.flowconfigという空のファイルを作成します。最も基本的なレベルでは、.flowconfigはFlowバックグラウンドプロセスに、エラーチェックを開始する場所のルートを指示します。

これで完了です。プロジェクトはFlow対応になりました。

プロジェクトに空の.flowconfigファイルを用意することが一般的です。ただし、Flowの設定とカスタマイズは、.flowconfigに追加できるオプションを通じて、さまざまな方法で行うことができます。

Flowバックグラウンドプロセスの実行​

Flowの主な利点は、コードのエラーを迅速にチェックできることです。プロジェクトをFlowに対応させたら、コードを段階的に、高速にチェックできるプロセスを開始できます。

flow status

このコマンドはまず、すべてのFlowファイルのエラーをチェックするバックグラウンドプロセスを開始します。バックグラウンドプロセスは実行を継続し、コードの変更を監視し、それらの変更を段階的にエラーについてチェックします。

flowと入力しても同じ効果が得られます。これは、flowバイナリのデフォルトフラグがstatusであるためです。

一度に実行できるバックグラウンドプロセスは1つだけです。そのため、flow statusを複数回実行しても、同じプロセスが使用されます。

バックグラウンドプロセスを停止するには、flow stopを実行します。

Flowのためのコードの準備​

Flowバックグラウンドプロセスは、すべてのFlowファイルを監視します。しかし、どのファイルがFlowファイルであり、チェックする必要があるかをどのように判断するのでしょうか？JavaScriptファイルの先頭（**コードの前に**）に次の記述を追加することで、プロセスはその質問への答えを得ます。

1// @flow

このフラグは、@flowでアノテーションされた通常のJavaScriptコメント形式です。Flowバックグラウンドプロセスはこのフラグが付いたすべてのファイルを収集し、これらのファイルから利用可能な型情報を使用して、一貫性とエラーのないプログラミングを確保します。

フラグには/* @flow */形式も使用できます。

このフラグのないプロジェクト内のファイルについては、Flowバックグラウンドプロセスはコードをスキップして無視します（flow check --allを呼び出す場合を除きますが、これは基本的な使用方法の範囲外です）。

Flowコードの記述​

すべての設定と初期化が完了したら、実際のFlowコードを記述する準備が整いました。// @flowでフラグを立てた各ファイルについて、Flowとその型チェックの機能をフルに活用できます。Flowファイルの例を以下に示します。

1function foo(x: ?number): string {2  if (x) {3    return x;
            
4  }5  return "default string";6}
3:12-3:12: Cannot return `x` because number [1] is incompatible with string [2]. [incompatible-return]

関数の引数と関数の末尾の戻り値の型に注目してください。このコードを見ると、関数はnumberも返すことができるため、戻り値の型にエラーがあることがわかります。ただし、コードを視覚的に検査する必要はありません。Flowバックグラウンドプロセスは、コードをチェックするときにこのエラーを検出します。

コードの確認​

Flowの素晴らしい点は、コードの状態に関するほぼリアルタイムのフィードバックを得ることができることです。エラーをチェックしたい場合は、いつでも次のコマンドを実行します。

# equivalent to `flow status`
flow

初めて実行すると、Flowバックグラウンドプロセスが生成され、すべてのFlowファイルがチェックされます。その後、プロジェクトの反復を続けると、バックグラウンドプロセスはコードを継続的に監視するため、再度flowを実行したときの更新された結果はほぼ瞬時です。

上記のコードの場合、flowを実行すると、以下が出力されます。

3:12-3:12: Cannot return `x` because number is incompatible with string. [incompatible-return]