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