少し前の出来事になるのですが、2026/07/24 に TSKaigi Mashup Kansai #2 というイベントに参加してきました。アウトプットの仕方や姿勢の話、Effect の話、TSKaigi のイベント運営の裏話といった発表がありました。どれも興味深い話で面白かったです。
かくいう僕も「Flow は今どうなっているか」というタイトルで発表しました。
Flow はもはや新規開発で避けられる技術となっていますが、今も開発が続き、進化しています。その進化は実は TypeScript にも影響を与えているのです。Flow で今どういった変化が起きているのか、それを伝える発表となってます。
本当は TSKaigi 本編で話したかった内容なのですが、
id:mizdra の見込みでは 20 分のトークで、一方 TSKaigi は 10分/30分枠しか募集してない...という理由でプロポーザルを出すのを諦めたネタなのでした。とはいえ TSKaigi Mashup Kansai #2 向けに頑張って圧縮したら 10 分に収まりました。本編に 10 分枠でプロポーザル出しておけば良かったですね。後悔してます。
スライドで触れられなかったこぼれ話
せっかくなので、時間が無くて話せなかったことについていくつか書いておきます。
Flow と TypeScript の違いを詳しく知りたい
スライドでも Flow と TypeScript の違いについてざっと説明しましたが、もっと詳しく知りたい方は公式ドキュメントを読んでみてください。「Flow for TypeScript Users」というページがあり、そこに"全て"が書いてあります。
全体的に、Flow は TypeScript よりも厳密な型システムを志向しており、それが TypeScript との挙動の違いとして現れてます。例えば mutable array は TypeScript では covariant ですが、Flow では invariant です。
Flow は厳密な型システムが好きな人にオススメです *1。
Flow 向けのLinter
Linter は flow コンパイラ本体に組み込まれて、flow start --lints "untyped-type-import=error" などで実行できます。ルールはそれほど多くなく、公式ドキュメントで紹介されているものだけで 27 個です *2。
- https://flow.org/en/docs/linting/rule-reference/
- https://flow.org/en/docs/linting/strict-import-export-lints/
flow コンパイラ本体組み込みの Linter は Flow 向けのカスタムルールを書けませんが、ESLint を使うと書けるようです。hermes-eslint で ESLint で Flow コードを扱えるように拡張し、ESLint のカスタムルールを書く、という手順を踏めば良いようです。また、eslint-plugin-ft-flow という公式の plugin でいくつかのルールも提供してるようです。
Flow 向けの Formatter
Flow 向けの Formatter は Prettier です。@prettier/plugin-hermes という Prettier プラグインとセットで使います。
Flow 向けの Language Server
Language Server は flow lspコマンドで起動できます。VS Code では Flow の拡張機能をインストールすると、拡張機能側でそのコマンドを使って Language Server を起動してくれます。
一点注意があります。それは Flow 記法で書かれた *.js を、エディタが JavaScript の Language Server で処理してしまうことです。JavaScript の Language Server は当然 Flow 記法は理解できないので、「const a: number = 1; は不正な構文だぜ！」などと言ってきます。
対策として、Flow が使われるプロジェクトではエディタ組み込みの JavaScript の Language Server を無効化する必要があります。VS Code であれば "javascript.validate.enable": false を settings.json に書きます。マジかよって思うかもしれませんが、Flow 拡張機能のドキュメントで推奨されてる方法です。
余談ですが、TypeScript では *.ts という異なる拡張子を選択してるので、こうした問題とは無縁です。*.js に型注釈記法を持ち込んだ Flow 特有の問題です。
.flowconfig 面白オプション集
.flowconfig は tsconfig.json みたいなやつです。型チェックやトランスパイルの挙動をカスタマイズできる設定ファイルです。いくつか変わったオプションがあるので紹介します。
jest_integrationjest.mock(...)などに渡すモジュール名のチェックが有効になる
relay_integration- Relay (Meta が開発してる GraphQL クライアント) を使っているプロジェクト向けのオプション
useFragmentという API の型引数が省略可能になる
module.missing_module_generators- モジュールの型定義が見つからない時に、エラーメッセージに実行すべきコマンドのヒントを追加できる
- 何かしらのコード生成ツールで型定義ファイルを生成してるプロジェクトでの利用を想定
- 例えば
module.missing_module_generators='.*\.module.css$' -> 'cmk'と書くと、Cannot resolve module `./Button.module.css`. Try running the command `cmk` to generate the missing module.というエラーメッセージに変更できる
react.custom_jsx_typing- react の内部コードのために作られたオプション
- 詳細は以下参照
.flowconfig のコメント
.flowconfig のコメント開始記号は#、;、そして💩。そのように公式ドキュメントにも書いてあります。
# This is a comment ; This is a comment 💩 This is a comment
Flow は 💩 が好きな人にもオススメです。
