flow による型のある世界入門

Copyright © DeNA Co.,Ltd. All Rights Reserved.
flow による型のある世界入
門
株式会社 DeNA Games Osaka
技術部人西聖樹
masaki.hitonishi@dena.com

自己紹介
 人西聖樹（ひとにしまさき）
 Twitter: @sairoutine
 株式会社 DeNA Games Osaka
 Webアプリケーションエンジニア

今日話すこと
 型とは
 なぜ静的型付けが必要か
 flow とは
 flow と TypeScript の比較

型

「型システムとは、プログラムの各部
分を、それが計算する値の種類に沿っ
て分類することにより、プログラムが
ある種の振る舞いを起こさないことを
保証する、計算量的に扱いやすい構文
的手法である。」
Pierce, B. C. (2013) 『型システム入門 −プログラミング言語と型の
理論−』住井英二郎 (監訳), 遠藤他(訳), オーム社.

例えば Java (型のある言語)とかだと
int a = 1; // ←ここでの int が型
static int square(int param) // ←返り値に int 型を宣言、引数に int 型の
param を宣言
{
int value; // ←ローカル変数に int 型の value を宣言。
value = param * param;
return value;
}

静的型付けと動的型付け
 静的型付け
⁃ コンパイル時に型をチェックする
⁃ 型がおかしいとそもそも実行すらできない
⁃ Java、C、C# などの言語
 動的型付け
⁃ プログラム実行時にチェックする
⁃ 型がおかしくてもプログラムが実行されるまでわからな
い
⁃ JavaScript、Python、Ruby、Perl などの言語

JavaScript で使われるデータ型一覧
 数値
 文字列
 論理値
 null
 undefined
 オブジェクト

JavaScript は動的型付け
 動的型付けなので変数にはどんな型を入れてもよ
い
 関数の引数や返り値も柔軟に修正／変更できる
 簡単！
 静的型付けの言語では、変数にいれるデータの型
は決まっている
 関数の引数や返り値の型を変更すると、関数の呼
び出し側も修正しなければならない
 大変……

JavaScript は動的型付けのメリットを
選択したプログラミング言語

しかし、今日では JavaScript に
静的型付けの必要性が叫ばれています。
今回お話する flow も JavaScript に
静的型付けを導入するツールです

なぜか

大規模なフロントエンド開発、
開発したフロントエンドシステムの
長期的保守が必要になってきた。

 長期的に保守されるシステム
 大規模で複雑なシステム
 継続的にリファクタしていくシステム
 ミッションクリティカルなシステム
 保守するエンジニアが入れ替わっていくシステム
→動的型付け言語のメリットが活かせない

フロントエンドにも静的型付けが
必要。ただし現状フロントエンドを
実装できる言語は JavaScript の一択

JavaScript に静的型付けを導入したい

flow

Flow
 JavaScript のコードに型定義(annotation)を追加
できるようになる
 By Facebook
 型のチェックのみしてくれる
 コンパイラというより型チェッカー
 本番コードでは、Babel 等の仕組みで型定義を
コードから削除する
 日本では flowtype という呼称が一般的ですが、本
スライド内では flow で呼称を統一します。

Google Trend
「flowtype」で検索(2017/03/14 現在)

静的型付けのメリット
 コードがより読みやすくなる
⁃ 型定義を読むことで関数を使う際にどんな引数が必要で、ど
んな値が返ってくるか想像をつけることができる
⁃ 引数や返り値の型が決まっているので、予想外の値が引数や
返り値に含まれることを想像しなくてよい
 コードのバグを事前に発見しやすくなる
⁃ 型定義の誤りはコンパイル時にわかる
⁃ 運用して初めて型の誤りによるバグに気づくということが減
る
 IDEのサポートを受けやすくなる
⁃ エディタの補完などが便利に
 リファクタしやすくなる
⁃ リファクタによって、関数の引数や返り値のデータ構造を破
壊してしまっても、コンパイル時に気づくことができる

静的型付けが有利なシステムとは
 長期間保守されることが想定されるシステム
⁃ コードが後から読みやすいメリット
⁃ コードは書かれる時間より読まれる時間の方が圧倒的に多い
 大規模なシステム
⁃ 複数人で開発する場合
⁃ クラスや関数のインターフェイスを型定義により明確にできる
 継続的にリファクタされるシステム
⁃ リファクタによるデータ定義の破壊に気づくことができる
 ミッションクリティカルなシステム
⁃ 型定義の違いによるバグはコンパイル時に発見できる
⁃ 型というルールを設けることでバグを減らせる
 システムに関わる人が入れ替わるシステム
⁃ 人が入れ替わっても型定義はコードに残る
⁃ 関数の引数や戻り値を、コードを読み解いて調べなくても良い

実際のコード例

flow を使う準備
# babel の準備
npm install -g browserify
npm install --save-dev babelify@7.2.0 babel-preset-es2015
# flow の準備
npm install --save-dev flow-bin babel-plugin-transform-flow-
strip-types
echo '{"presets": ["es2015"],"plugins": ["babel-plugin-
transform-flow-strip-types"]}' > .babelrc
flow-bin がチェッカー本体で、
babel-plugin-transform-flow-strip-typesが、
Babel によるトランスパイル時にコード上の型定義を
除去してくれるプラグイン

flow を使う準備
"scripts": {
"flow": "$(npm bin)/flow",
},
package.json に flow チェッカーを追加
[ignore]
.*/node_modules/.*
[include]
[libs]
[options]
.flowconfig を作成して node_modules 配下を無視する設定を追加

サンプルコード
// @flow
(function() {
function foo(x) {
return x * 10;
}
foo('Hello, world!');
});
文字列「Hello, World!」に
掛け算をおこなっている、いかにも怪しいコード
// @flow を追加することで、flow のチェック対象となる

$ npm run flow
5: return x * 10;
^ string. The operand of an arithmetic
operation must be a number.
特にまだ型定義は追加していないが、
flow がエラーを吐いてくれる。
→引数に String を渡しているにも関わらず、
関数内で数値として扱っているのを
Flow が発見してエラーにしている。
→ flow の型推論機能

// @flow
(function() {
function foo(x: string, y: number): number {
return x.length * y;
}
foo('Hello', 42);
});
関数の引数に型定義を追加するパターン

// @flow
function total(numbers: Array<number>) {
var result = 0;
for (var i = 0; i < numbers.length; i++) {
result += numbers[i];
}
return result;
}
total([1, 2, 3, 4]);
配列の型定義

// @flow
// 独自の型
type Comment = {
author: string;
text: string;
};
const comment: Comment = {
author: "sai",
text: "hello, world!",
};
function create_text (comment : Comment) : string {
return comment.author + " says " + comment.text;
}
console.log(create_text(comment));
独自の型定義も可能

// @flow
(function() {
function length(x) {
return x.length;
}
var total = length('Hello') + length(null);
})
Null が入る場合

$ npm run flow
7: return x.length;
^ property `length`. Property cannot be accessed on
possibly null value
7: return x.length;
^ null
Null が入る可能性があるため、エラーになる。
flow は Null 安全

// @flow
(function() {
function length(x) {
if (x !== null) {
return x.length;
} else {
return 0;
}
}
});
Null であることをきちんとチェックすればOK

React や Flux, Redux との連携
 容易にできるらしい
 React 周りに詳しくないので詳細は別の方の資料にお任せ
します。
 【Electron + react + flowtype】TweetDeckライクな
pixivクライアントPixivDeckをつくった
 http://qiita.com/akameco/items/fa80b9a325e3d1e8fd
5b
 Type-Safe Flux Using Flowtype
 https://speakerdeck.com/joere/type-safe-flux-using-
flowtype

JavaScript に静的型付けを導入するには、
TypeScript を使う選択肢もある

TypeScript
 AltJS
 By Microsoft
 ES6 ベース
 型定義を追加することができる
 コンパイラが型定義をチェックしてくれる
 JavaScript というより TypeScript という言語
 WebStorm や Visual Studio Code などの IDE によるサ
ポートがある
 Null 安全でない(TypeScript 2.0 から strictNullChecks オ
プションで Null 安全に)
 静的型付けの恩恵を受けたい場合、TypeScript を採用する
手もある

flow と TypeScript の比較
 flow
⁃ 既存の JavaScript コードにも適用できる
⁃ 一部のコードにだけ静的型付けを適用することもできる
⁃ JavaScript + 型定義なので、学習コスト低
⁃ あくまで型チェッカー。それ以上のことはしない
 TypeScript
⁃ 型定義以外の恩恵(クラス定義構文など)が受けられる
⁃ 導入するとなると、全コードを TypeScript に置き換える覚悟
⁃ TypeScript の文法などの学習が必要
⁃ IDEのサポートが豊富(Visual Studio Code や WebStorm など)

まとめ
 フロントエンド開発の大規模化、長期的な保守に伴い、静
的型付けの重要性が認識されてきた
 JavaScript に静的型付けを導入するには、flow と
TypeScript のおおまかに二種類が存在する。
 flow は既存のシステムに追加する場合に、TypeScript は
新規のシステムに追加する場合に便利
 両者とも型定義は非常に似通っている。
 Null 安全についての扱いが両者は異なる
 プロジェクトやチームにとって最適な選択で、静的型付け
を導入しよう

ご清聴ありがとうございました

flow による型のある世界入門

More Related Content

What's hot

Similar to flow による型のある世界入門

More from sairoutine

flow による型のある世界入門