flowで始める型のあるJavaScript

ﬂowで始める
型のあるJavaScript
@sota1235
2017/6/10
PHPカンファレンス福岡2017

View Slide

console.log(me);
• Sota Sugiura
• @sota1235
• JavaScript PHP
• Mercari, Inc.

View Slide

Why using JavaScript?

View Slide

Why?
• 私たちはPHPエンジニア
• Webと関わる⼈人も多い
• Webは⽇日々進化を続けている

View Slide

最古のWebサイト
• 1990年年11⽉月
• ペライチのHTML
• ⽂文章配布のためのWeb

View Slide

最新のWebサイト
• インタラクティブなUI
• ⾼高頻度のAjax通信
• リッチなブラウザアプリケーション

View Slide


View Slide

Web Audio API

View Slide

Web Audio API
.PSF
.PSF

View Slide

Web Audio API
.PSF
.PSF
.PSF
.PSF
.PSF
.PSF

View Slide

Web Audio API
.PSF
.PSF
.PSF
.PSF
.PSF
.PSF
.PSF
.PSF
.PSF
.PSF
.PSF
.PSF
.PSF

View Slide

• WebVR
• WebGL
• Web Audio API
• Single Page Application
• WebRTC (P2P)
• PWA
• and more, more, more…

View Slide

どう実現するのか？
• HTML, CSSでは役不不⾜足
• そもそも作られた⽬目的が違う

View Slide

どう実現するのか？
• HTML, CSSでは役不不⾜足
• そもそも作られた⽬目的が違う
• JavaScriptこそが鍵

View Slide

With JavaScript
• 数々のブラウザのAPI
• インタラクティブなUI
• ⾮非同期なHTTP通信
• デバイス(カメラ、マイク、etc)へのアクセス

View Slide

Not only on Website
• Smartphone App (React Native)
• Server Side JavaScript (Node.js)

View Slide

Why using JavaScript?
• ⽂文書配布のためのWebはとっくのとうに終
わってる
• ちょっとリッチなWebサイトって時代ももう
終わってる
• JavaScriptは多様な夢を実現する⼿手段として地
位を確⽴立しつつある

View Slide

JavaScript無くして
次世代のWebは来ない

View Slide

But…
• 歴史的経緯に基づくツライ⾔言語仕様
• あまりに多い実⾏行行環境の多さ
• 終わらないベンダー戦争
• 速すぎるとも⾔言える進化と成⻑⾧長

View Slide

And more…
ツラミと戦うために…

View Slide

Today’s theme
今⽇日の話はそんな数ある解決策のうちの1つ、ﬂowの話

View Slide

About ﬂow

View Slide

ﬂow
• JavaScriptのための静的
型解析ツール
• Facebook製
• OCamlで書かれている

View Slide

ﬂow is not AltJS
• あくまで静的型解析ツール
https://ﬂow.org/en/

View Slide

Goal of flow
Flow is a static type checker for JavaScript that we
built at Facebook. The overall mission of Flow is to
deliver an immersive coding experience for JavaScript
developers—a fast edit-refresh cycle—even as the
codebase evolves and grows. In engineering terms,
we identify two concrete goals that are important to
this mission: precision and speed. These goals
pervasively drive the design and implementation.
https://flow.org/en/docs/lang/#toc-flow-goals

View Slide

Goal of flow
• コードの成⻑⾧長に負けない開発スピードを保ちたい
• flowはその⼿手助けをする
• そのためにflowは精度と速度を重視する

View Slide

Precision / 精度
• JavaScriptのバグは⾒見見逃してはいけない
• でもエラーを報告しすぎるツールは
• 必要最低限のクリティカルなバグを報告する
• 精度をあげることで開発ツールの構築も可能
• 例例. IDEによる型補完
https://ﬂow.org/en/docs/lang/#toc-precision

View Slide

Speed / 速度
• 速度は精度と相反する
• 速度の低下で開発サイクルを遅らせることは
JavaScriptの魅⼒力力を損なうことに他ならない
• コードを実⾏行行することなく精度の⾼高くバグを
を⾒見見つけることがベスト
https://ﬂow.org/en/docs/lang/#toc-speed

View Slide

function add(a, b) {
return a + b;
}
add("1", 2);
Normal JavaScript

View Slide

function add(a, b) {
return a + b;
}
add("1", 2);
Normal JavaScript
⾔言語仕様的には問題ないが…

View Slide

Bug? Or not?
QP%JTQOGEQPUQNG

View Slide

Bug? Or not?
ほんとは”3”が欲しかった…
QP%JTQOGEQPUQNG

View Slide

with ﬂow annotation
• サンプルコード
// @flow
function add(a: number, b: number): number {
return a + b;
}
add("1", 2);

View Slide

// @flow
return a + b;
}
add("1", 2);
ﬂowの解析対象の⽬目印

View Slide

// @flow
return a + b;
}
add("1", 2); 引数の
明示的型宣⾔言

View Slide

// @flow
return a + b;
}
add("1", 2);
関数の返り値の
明示的型宣⾔言

View Slide

// @flow
return a + b;
}
add("1", 2);
Is it OK…?

View Slide

Error report by ﬂow

View Slide

Error report by ﬂow
number型引数に
stringを渡さないでね

View Slide

Work for not only annotation
console.log("1" * 1);
function printResponse(data) {
console.log(data.res);
}
printResponse('string response');

View Slide

console.log("1" * 1); // Error!
}
printResponse('string response');

View Slide

console.log("1" * 1); // Error!
}
printResponse('string response'); // Error!

View Slide

サポートする機能
• 関数の引数、返り値、変数の明示的型宣⾔言
• Interface
• Generic Type
• Comment Type
• and so on :)

View Slide

How to use?
• ﬂow-binをインストール
• flow initしてconﬁg⽣生成
• 解析対象ファイルに // @flow
• flowコマンド実⾏行行

View Slide

スモールスタートなら5分で使える

View Slide

When should we use ﬂow?

View Slide

こんなことで困ってませんか？
• コードベースが巨⼤大
• テスト不不能
• でも負債返済の時間は⼗十分にない

View Slide

こんなことで困ってませんか？
• コードベースが巨⼤大
• テスト不不能
• でも負債返済の時間は⼗十分にない
ﬂowはこういう場⾯面で
威⼒力力を発揮できる

View Slide

ﬂowのいいところ(1) 導⼊入が簡単
• 解析するだけなら何もいらない
• 必要なのはﬂowコマンドとJSファイルだけ
• babelが導⼊入済みであればannotationも瞬時に
導⼊入可能
• 1ファイルずつ導⼊入できる

View Slide

flowのいいところ(2) 捨てやすさ
• flowはランタイム、コンパイルに関与しない
• 捨てるときはflowコマンドの実⾏行行をやめるだけ
• アノテーションを消したければflow-remove-
typesを使う
• https://flow.org/en/docs/tools/flow-remove-types/

View Slide

ﬂowが有効でない場⾯面
• ⼩小規模プロジェクトの場合
• 本当に型必要？
• 1ファイルが巨⼤大過ぎる場合
• 新規プロジェクトの場合
• 有効だがTypeScriptの使⽤用も視野に

View Slide

Let’s use ﬂow

View Slide

実際にﬂowを使ってみよう
• サンプルコードにﬂowを導⼊入していく
• 今回はシンプルに値を渡すとObjectを返す関
数をいじっていく

View Slide

Sample code
function makeMemo(title, text) {
const memo = {
title: title,
text: text,
};
return memo;
}

View Slide

復復習(1) ﬂowの始め⽅方
• ﬂowは全てのファイルを解析しない
• // @flowが書いてあるファイルのみ解析する

View Slide

Start ﬂow
// @flow
const memo = {
title: title,
text: text,
};
return memo;
}

View Slide

Start ﬂow
// @flow
const memo = {
title: title,
text: text,
};
return memo;
}
ﬂow導⼊入の
第⼀一歩

View Slide

復復習(2) 明示的型宣⾔言
• ﬂowでは引数、返り値の明示的型宣⾔言ができる
• nullable型もサポートしている

View Slide

Declare type
// @flow
function makeMemo(title: string, text: ?string): Object {
const memo = {
title: title,
text: text,
};
return memo;
}

View Slide

Declare type
// @flow
const memo = {
title: title,
text: text,
};
return memo;
}
引数の型宣⾔言

View Slide

Declare type
// @flow
const memo = {
title: title,
text: text,
};
return memo;
}
引数の型宣⾔言
返り値の型宣⾔言

View Slide

天の声その1
• ここで仕様変更更
• 上司「memoの本⽂文の頭にタイトルをくっつけてくれ」

View Slide

Fix
// @flow
const memo = {
title: title,
text: `${title}\n${text}`,
};
return memo;
}
textの⼿手前に改⾏行行を挟んで
タイトルを挿⼊入

View Slide

Error occurred

View Slide

Error occurred
nullを⽂文字列列連結するな
undeﬁnedを⽂文字列列連結するな

View Slide

修正ポイントを探す
// @flow
const memo = {
title: title,
text: `${title}\n${text}`,
};
return memo;
}
Oh, text is nullable!

View Slide

Check argument
// @flow
let content = text;
if (text) {
content = `${title}\n${text}`;
}
const memo = {
title: title,
text: content,
};
return memo;
}
textがnull, undeﬁnedで
ないことをチェックする

View Slide

Works!

View Slide

天の声その2
• ここでまたまた仕様変更更
• 上司「memoの公開/⾮非公開/下書きステータスを持たせて
くれ」

View Slide

仕様検討
• オブジェクトにstatusキーを追加する
• statusにはpublic, private, draftのいずれかが⼊入る

View Slide

Add argument
// @flow
function makeMemo(title: string, status: string, text: ?string): Object {
let content = text;
if (text) {
}
const memo = {
title: title,
text: content,
status: status,
};
return memo;
}
引数追加
オブジェクトに反映

View Slide

Add argument
// @flow
function makeMemo(title: string, status: string, text: ?string): Object {
let content = text;
if (text) {
}
const memo = {
title: title,
text: content,
status: status,
};
return memo;
}
しかしここに意図しない⽂文字
列列が⼊入っても気がつけない…

View Slide

あーーーー
特定の⽂文字列列しか受け取らなくて
意図しない値が来たらエラーでコケるような
素敵な仕組みないかなーーーーーーーー

View Slide

ENUM

View Slide

ﬂowでENUM
• ﬂowでは固定値を型として宣⾔言できる
• また、複数の型をOR形式で宣⾔言できる
• これを組み合わせるとENUMができる

View Slide

Original type
// @flow
type Fukuoka = 'mentaiko';

View Slide

Original type
// @flow
type syntaxで
新たな型を定義できる

View Slide

Original type
// @flow
const omiyage: Fukuoka = 'mentaiko';
const nisemono: Fukuoka = 'takoyaki';

View Slide

Original type
// @flow
const omiyage: Fukuoka = 'mentaiko'; // Works!
const nisemono: Fukuoka = 'takoyaki'; // Error

View Slide

ENUM
// @flow
// Use or statement for type
type MemoStatus = 'public' | 'private' | 'draft';

View Slide

ENUM
// @flow
// Use or statement for type
type MemoStatus = 'public' | 'private' | 'draft';
どれか1つに当てはまれば
MemoStatusとして識別される

View Slide

Use ENUM
// @flow
type MemoStatus = 'public'|'private'|'draft';
function makeMemo(title: string, status: MemoStatus, text: ?string): Object {
let content = text;
if (text) {
}
const memo = {
title: title,
text: content,
status: status,
};
return memo;
}

View Slide

Use ENUM
// @flow
let content = text;
if (text) {
}
const memo = {
title: title,
text: content,
status: status,
};
return memo;
}
期待する値の型を宣⾔言

View Slide

Use ENUM
// @flow
let content = text;
if (text) {
}
const memo = {
title: title,
text: content,
status: status,
};
return memo;
}
期待する値の型を宣⾔言
引数に型宣⾔言

View Slide

天の声その3
• なんとユーザからのバグ報告
• 上司「別のメソッドが返すオブジェクトと構造がバラバ
ラだからなんとかして」

View Slide

コードとにらめっこ
// @flow
let content = text;
if (text) {
}
const memo = {
title: title,
text: content,
status: status,
};
return memo;
}

View Slide

コードとにらめっこ
// @flow
let content = text;
if (text) {
}
const memo = {
title: title,
text: content,
status: status,
};
return memo;
}
ここの型が曖昧すぎる

View Slide

Object type
• Objectの構造を型として定義できる
• キーをnullableとして定義できる
• 余計なキーが⼊入らないように定義することも
可能

View Slide

Object type
// @flow
type Item = {
id: number,
name: string,
description?: string,
}

View Slide

Object type
// @flow
type Item = {
id: number,
name: string,
}
const validItem: Item = {
id: 32,
name: 'item_name',
}; // Works
validItem.description = 'description'; // Works

View Slide

Object type
// @flow
type Item = {
id: number,
name: string,
}
id: 32,
name: 'item_name',
}; // Works
validItem.id = '32'; // Error

View Slide

Object type
// @flow
type Item = {
id: number,
name: string,
}
id: 32,
name: 'item_name',
}; // Works
validItem.id = '32'; // Error
型違反

View Slide

Don’t allow extra key
// @flow
type Item = {|
id: number,
name: string,
|}

View Slide

// @flow
type Item = {|
id: number,
name: string,
|}
定義していないキーを
許容しない

View Slide

// @flow
type Item = {|
id: number,
name: string,
|}
id: 32,
name: 'item_name',
extraProp: 'extra!',
};

View Slide

// @flow
type Item = {|
id: number,
name: string,
|}
id: 32,
name: 'item_name',
extraProp: 'extra!', // Error
};
型宣⾔言していないキーが
エラーになる

View Slide

It’s time to ﬁx!
// @flow
let content = text;
if (text) {
}
const memo = {
title: title,
text: content,
status: status,
};
return memo;
}
このObject,
型として宣⾔言できそう

View Slide

// @flow
let content = text;
if (text) {
}
const memo = {
title: title,
text: content,
status: status,
};
return memo;
}
// @flow
type Memo = {|
title: string,
text: ?string,
status: MemoStatus,
|}

View Slide

// @flow
type Memo = {|
title: string,
text: ?string,
status: MemoStatus,
|}
function makeMemo(title: string, status: MemoStatus, text: ?string): Memo {
let content = text;
if (text) {
}
const memo: Memo = {
title: title,
text: content,
status: status,
};
return memo;
}

View Slide

It’s ﬂow!
• 型を宣⾔言することでコードが⾃自然と型安全に
なっていく
• ⼯工夫次第で堅牢で保守性の⾼高いJavaScriptを書
くことが可能

View Slide

Without ﬂow
function makeMemo(title, status, text) {
let content = text;
if (text) {
}
const memo = {
title: title,
text: content,
status: status,
};
return memo;
}

View Slide

Without ﬂow
let content = text;
if (text) {
}
const memo = {
title: title,
text: content,
status: status,
};
return memo;
}
ҙਤ͠ͳ͍ܕɺ஋͕
౉͞Εͯ΋ؾ͚ͮͳ͍

View Slide

Without ﬂow
let content = text;
if (text) {
}
const memo = {
title: title,
text: content,
status: status,
};
return memo;
}
౉͞Εͯ΋ؾ͚ͮͳ͍
0CKFDUͷߏ଄͕
มΘͬͯ΋࡯஌Ͱ͖ͳ͍

View Slide

With ﬂow
// @flow
type Memo = {|
title: string,
text: ?string,
status: MemoStatus,
|}
let content = text;
if (text) {
}
title: title,
text: content,
status: status,
};
return memo;
}

View Slide

With ﬂow
// @flow
type Memo = {|
title: string,
text: ?string,
status: MemoStatus,
|}
let content = text;
if (text) {
}
title: title,
text: content,
status: status,
};
return memo;
}
౉͞ΕͨΒqPX͕ڭ͑ͯ͘ΕΔ

View Slide

With ﬂow
// @flow
type Memo = {|
title: string,
text: ?string,
status: MemoStatus,
|}
let content = text;
if (text) {
}
title: title,
text: content,
status: status,
};
return memo;
}
ಠࣗఆٛͷܕએݴʹΑΓ
0CKFDUͷߏ଄͕໌֬ʹ

View Slide

With ﬂow
// @flow
type Memo = {|
title: string,
text: ?string,
status: MemoStatus,
|}
let content = text;
if (text) {
}
title: title,
text: content,
status: status,
};
return memo;
}
ಠࣗఆٛͷܕએݴʹΑΓ
0CKFDUͷߏ଄͕໌֬ʹ
ಠࣗͷܕఆٛͰ
ΑΓݎ࿚ͳίʔσΟϯάΛ

View Slide

more and more
• 今回話したのはﬂowのほんのほんの⼀一部
• ⼯工夫と発想次第でより表現豊かなコーディング
ができる
• 特にObject型の定義はJavaScriptと相性が抜群

View Slide

終わりに

View Slide

終わりに
• ﬂowは静的型解析ツール
• ゆえに既存コードへの反映が⾮非常に簡単
• 1ファイルずつ導⼊入ができる、かつ捨てるのも
⼀一瞬
• 型プログラミングで堅牢で型安全なJavaScript
を実現できる

View Slide

Thank you!

View Slide

flowで始める型のあるJavaScript

flowで始める型のあるJavaScript

Sota Sugiura

More Decks by Sota Sugiura

Other Decks in Technology

Featured

Transcript