Flow は今どうなっているか

2026/07/24 に TSKaigi Mashup Kansai #2 で発表した資料です。

Transcript

1. Flow は 今どうなっているか id:mizdra 2026/07/24 TSKaigi Mashup Kansai #2 1
2. 自己紹介 • mizdra (みずどら) • インターネット大好き • 株式会社はてな ◦ フロントエンドエキスパート ◦ フロントエンド会 (社内組織) の運営 2
3. 今日のテーマ Flow 3
4. Flow とは • Meta 製のJavaScript 向け型チェッカー ◦ TypeScript みたいなやつ • 2014 年に公開 4
5. コード例 // @flow function greet(name: string, age: number): string { return `Hello, ${name} (${age})`; } type User = { name: string, age: number }; const user: User = { name: "mizdra", age: 20 }; greet(user.name, user.age); greet(42, "oops"); // Error! 5
6. 歴史 • かつては TypeScript の対抗馬的存在 ◦ 2016 年頃より TypeScript が覇権を握り始める • Flow は次第に採用されなくなる 6
7. 今の Flow • Meta 社内では使われている • 今も開発が続き、進化してる • 実は TypeScript にも影響を与えてる どのように進化しているのかについて話します 7
8. Flow の基礎知識 8
9. Flow の型 • TypeScript と大体同じ ◦ 基本型 (boolean, number, string, null, ...) ◦ keyof T, as const, T[K], A & B, x as T ◦ ユーテリティ型 (Pick, Omit, ...) • 型注釈書く場所も同じ 9
10. 特筆すべき相違点 • void, empty • Exact object • Nominal classes • object/interface/class の subtyping 関係 10
11. void, empty • void: TS の undefined のこと • empty: TS の never のこと 11
12. Exact object • {x: number} 型はプロパティ x のみ含む型 type A = {x: number}; const obj = {x: 1, y: 2}; const a: A = obj; // ERROR 12
13. Exact object • 追加のプロパティを許可するには... ◦ {x: number, ...} と書く type A = {x: number, ...}; const obj = {x: 1, y: 2}; const a: A = obj; // OK 13
14. Nominal classes • class は nominal type として扱われる class Foo { a: number = 1; } class Bar { a: number = 1; } const foo: Foo = new Bar(); // ERROR 14
15. object/interface/class の subtyping 関係 15
16. まとめると • 基本的には TypeScript と同じ機能がある • より強力な静的保証を優先するため... ◦ 細かな違いがある 16
17. 近年の Flow の変化 17
18. 近年の Flow の変化 • モジュール境界の型注釈の必須化 (2020) • TypeScript との互換性の向上 (2023〜) • 拡張構文 (2024〜) • 型チェッカーの Rust 化 (2026) 18
19. モジュール境界の型注釈の必須化 (2020) • export するやつは明示的な型注釈が必要 (※1) // NG export function add(a: number, b: number) { return a + b; } // OK export function add(a: number, b: number): number { return a + b; } ※1: 厳密には、`export const VAL = 100;` のような ASTをパースすれば 型が分かるものは型注釈省略可能 19
20. 何故このような厳しい制約があるのか • 型チェックのパフォーマンスのため • もっと言うと... ◦ Meta 社内の大規模なコードベースに耐えられるようにするため • この制約があると型チェックの並列化が容易 ◦ 型チェック速度の向上に貢献 20
21. 実は TypeScript に輸出されてる • モジュール境界の型注釈の必須化は... ◦ TypeScript の --isolatedDeclarations に相当 • 実装者が公演で「Flowを参考にした」と言ってる ◦ https://gitnation.com/contents/faster-typescriptbuilds-with-isolateddeclarations 21
22. TypeScript との互換性の向上 (2023〜) • かつては異なる構文・型名だったものを変更してる ◦ (x: T) → x as T ◦ mixed → unknown ◦ $ReadOnly<T> → Readonly<T> ◦… 22
23. 機能の輸入もしてる • Type Guard • Mapped Type • Conditional Types • リテラル型, as const, const 型パラメーター 23
24. 拡張構文 (2024〜) • JavaScript にはない構文がいくつか実装されてる 24
25. ① component 構文 component Profile(name: string, age: number) { return <div>{name}({age}歳)</div>; } • パラメーター部分を短く書ける ◦ TS だと ({name, age}: {name: string, age: number}) 25
26. ② hook 構文 hook useWindowWidth(): number { // ... return width; } • 型で hook と通常の関数を区別するためのもの ◦ より多くの問題を静的に検出できる ◦ function が hook になってるだけ 26
27. ③ match 式 const message = match (result) { {type: 'ok', const value} => `成功: ${value}`, {type: 'error', const error} => `失敗: ${error.message}`, {type: 'loading'} => '読み込み中...', }; 27
28. 何故拡張構文を追加しているのか • 近年 TypeScript では拡張構文を実装しない方針 • 一方 Flow は... ◦ 2021 年に拡張構文を許容するように (※2) ◦ Meta 社内のニーズに応じて構文の拡張も検討する • TypeScript と正反対で面白い ※2: https://medium.com/flow-type/clarity-on-flows-direction-and-open-source-engage ment-e721a4eb4d8b 28
29. 型チェッカーの Rust 化 (2026) • 型チェッカーが OCaml => Rust に ◦ 型チェックが概ね2倍速に • TS のように Go への移植も検討されたが... ◦ SWC や oxlint といったツールへの結合も検討したい ◦ 移植は大変なので、二度と後悔しない言語選択をしたい ◦ => Rust を選択することに 29
30. まとめ • Meta 社内以外では殆ど使われなくなったが... ◦ Flow は今も進化してる • 野心的な変更が次々行われてる ◦ TypeScript との互換性向上 ◦ 型チェックのパフォーマンス向上 ◦ 拡張構文 • 今後の進化にも是非注目しよう 30