「Angular 4 の最新動向と、2017年再注目のDart、そしてAngular Dart 」Dart の部 1/3 on 2017.3.6

1. 15分でわかった気になる
Dart
「Angular 4 の最新動向と、2017年再注目のDart、そしてAngular Dart 」
Dart の部 1/3
HRMOS事業部 小林 達
at BizReach on 2017.3.6

2. 自己紹介
✓ 小林 達 (こばやしさとし)
✓ HRMOS[ハーモス]プロダクト開発部
✓ マネージャ兼エンジニア。最初の開発者
✓ 仕事では Scala (というよりJIRAとかGoogle Sheetとか)
✓ Dart は趣味です。。
● ウォッチ歴数週間
● 学習歴数日

3. Dart を取り巻く状況

4. Dartってどんな言語？
✓ 2011年にGoogleが発表
✓ Java、JSに似たシンタックスの動的型付け言語
● JITコンパイルされ、DartVM上で動作する
● dart2jsでJSに変換できるのでブラウザでも動く
✓ ECMA-408で標準化されている
※ 出典(Dart/Flutter入門(2017.2.27))

5. 触ってみた感触としては
✓ Java、JavaScript等がかければすんなり書ける
✓ 型を書いても書かなくてもいい
✓ async/await, class周りのサポート
✓ パッケージマネージャー、IDEサポートの充実
✓ "ちょうどいい" 言語
● Javaのレガシーさを取り除いている
● Goほど記述量は多くない
● Scalaほど難しくない
※ 出典(Dart/Flutter入門) + 少し改変

6. 黒歴史
✓ 当初はブラウザ上で動作し、JavaScriptを置き換える目的
● 各ブラウザがDartVMを搭載する必要がある
● やっぱりそれは無理なのであきらめた
● (dart2jsでJSに変換して動かすことはできる)
※ 出典(Dart/Flutter入門)

7. 2017年、Dart 復権の兆し
✓ TIOBE Indexによると2016年に
”0.95%増加したDartは 〜 26位から17位へ急上昇”
✓ AdSense/AdWordsは、全面的にAngular Dartでリプレイス

8. 2017年、Dart 復権の兆し
Google AdSense のリニューアル
The new Google AdSense user interface: built with AngularDart
(2016/10 の意訳)
✓ 初版は2003年リリース。Google Web Toolkit (GWT) で作られていた
✓ 開発者は全体で100人近く、およそ25%がDartを使っていた
✓ Dart部分は、16万行
✓ 開発始めて2.5年、Dartを使って1.5年、Material Design化を8ヶ月
✓ コンパイルは8倍、開発時のページ読み込みは6-7倍、生産性は全体で2倍

9. 2017年、Dart 復権の兆し
Google AdWords のリニューアル
The new AdWords UI uses Dart — we asked why
(2016/3 の抜粋)
✓ Q: Why not Closure lib? GWT? TypeScript? Vanilla JS?
✓ (前略) 〜 巨大でミッションクリティカルなアプリケーションを作れる能力があるかど
うか、つまり、よいUXで、低遅延で、機能追加も継続的にできること。UXデザイナー
に十分な柔軟性を与えられるかどうか 〜 ワールドクラスの低遅延を実現できるか
どうか。多くの顧客が一日中、膨大なデータを処理するので速いことは超重要〜
(後略)

10. Dart 言語

11. 公式サイトのウリ
✓ ライブラリやツールの堅固な基盤
コアなライブリラリやツールなしではプログラミング言語は意味がない。Dartは今まで何年も巨大なアプリケーションを支
えてきた
✓ 一般的なプログラミング作業を簡単に
アプリケーション開発には、普遍的に見られる問題とエラーがある。Dartは、それらの問題により簡単に退治でき、それ
らのエラーをより簡単にキャッチできる。async/await や generators、 string interpolation やエラー検知などはそのため
にある。
✓ プログラマーを驚かさない
何をタイピングするかと何が起こるかの間はとてもストレートであるべき。魔法 (自動的な型の強制、変数の巻き上げ、
グローバルのヘルパー、、、) は大きなアプリケーションとは相性がよくない
✓ 安定して実用的な解を
Dartは、ときどき退屈かもしれない。私たちは生産的で安定的である方を好む。私たちは長く走り続けられるために、大
規模なアプリケーションを開発するコアなカスタマーらと密に作業している

12. Terse
タァース。昨年のカンファレン
スでよく聞いたキーワード。
最近のDartを象徴的に表す
ワード。

13. 発表から6年経つが、活発な開発
February 14, 2017 Dart 1.22: Faster tools, assert messages, covariant overrides
December 07, 2016 Dart 1.21: Generic Method Syntax
October 17, 2016 Good-bye symlinks (1.20.0)
August 26, 2016 Dart 1.19: Improved developer experiences
July 28, 2016 Dart 1.18: Laying foundations
April 26, 2016 Dart 1.16: Faster tools, updated HTML APIs
March 09, 2016 Dart 1.15: Updated Dartium and improved live code analysis
January 29, 2016 Dart 1.14 continues to improve core APIs and tools
November 18, 2015 Dart 1.13 brings improved JavaScript interoperability and more
Jun 25, 2015 Dart 1.12 Released, with Null-Aware Operators and more
May 28, 2015 1.11.0, March 26, 2015 1.10.0
November 28, 2014 Dart 1.9: The release you’ve been await-ing for
October 15, 2014 Dart 1.8: library improvements and experimental support for enums
August 27, 2014 Dart 1.7: easily share and use command-line applications built with Dart
April 09, 2014 Dart 1.4 Brings Deep Visibility to Run Applications
June 26, 2014 Dart 1.6 adds support for deferred loading
May 21, 2014 Dart 1.5 makes it easier to develop for the mobile web
August 31, 2015 Dart 1.3 dramatically improves server-side performance
February 26, 2014 Dart 1.2 continues to improve developer experience
January 16, 2014 Dart 1.1 features up to 25% faster Javascript
November 14, 2013 Dart 1.0: A stable SDK for structured web apps

14. DartPad で試す
DartPad は、オンラインエディタ
https://dartpad.dartlang.org/
✓ JSFiddleとかと似ている。コンソール出力だけでなくHTMLも
✓ Shareすると永続化できる。埋め込みできる
✓ Strong Mode (後述)

15. Dart のインストール
Macの方は brew で。ドキュメントはこちら
※ IntelliJ で、Dartium 使います
brew install dart --with-content-shell --with-dartium

16. IntelliJ・WebStorm
✓ JetBrainsの公式プラグインをインストールする
✓ Atom、Sublime VS Code、Vimなどにもプラグインあり

17. Dart のコードを少し

18. 数値、文字列、真偽、、
✓ すべてオブジェクト (クラス名が小文字始まりでも)
✓ int などは初期化しないと null
✓ bool は true 以外 (の 1、'str', obj など) は、すべて false
✓ 過去のしがらみがないためか分かりやすい
var name = 'Bob';
String name2 = 'Bob';
final String name3 = 'Bob';
const bar = 1000000;
var foo = const [];
int count;
assert(count == null);
3.14159.toStringAsFixed(2) == '3.14';
var v1 = "y";
assert(x is ${v1.toUpperCase()} ' == x is Y);

19. Map
✓ JavaScriptと違って、Object と Map は全く別物
✓ Mapのメソッドは、forEach, putIfAbsent, contains, isEmpty など
✓ dart:collectionパッケージには、(Javaみたく)多くのコレクションあり
var gifts1 = {
'first' : 'partridge',
'second' : 'turtledoves'
};
var gifts2 = new Map<String, String>()
..putIfAbsent('first', () => 'partridge')
..putIfAbsent('second', () => 'turtledoves');

20. Iterable (List、Set)
✓ 最近の他言語にある扱いやすいメソッドは揃っている
✓ map, sort, every, firstWhere, lastWhere, indexOf, jojin take, skip
var teas = ['green', 'black', 'chamomile', 'earl grey'];
var loudTeaList = teas
.map((tea) => tea.toUpperCase())
.where((tea) => tea != 'chamomile')
.toList();
List<String> loudTeaList2 = teas
.map<String>((String tea) => tea.toUpperCase())
.where((String tea) => tea != 'chamomile')
.toList();

21. 高階関数 も適度に使える
✓ map, fold, where, reduce, every, sort ...
✓ シュガーもあるので、冗長にならない
bool isDecaffeinated(String tea) => tea == 'chamomile';
teas.where(isDecaffeinated) ;
teas.every(isDecaffeinated) ;
var nameJoiner = (pre, cur) => pre + " " + cur;
teas.fold("Tea names are", nameJoiner);
teas.reduce((left, right) =>
left.length >= right.length ? left : right) == 'chamomile';

22. 型推論はもうちょい
✓ ただ、型推論はもう少し頑張って欲しい
● IntelliJ で補完いまいち
var teas = <String>['green', … , 'earl grey'];
var loudTeaList = teas
.map((tea) => tea.toUpperCase())
.where((tea) => tea != 'chamomile')
.toList();

23. Future, async, await
✓ あまり何も考えずに簡単に使える
✓ await + async で等価でより簡潔
に書ける
※ Stream は、 Angularのパートで。
Future<String> runUsingFuture() {
return findEntrypoint().then((entryPoint) {
return runExecutable(entryPoint , 'x');
}).then(flushThenExit) ;
}
Future<String> runUsingAsyncAwait() async {
var entryPoint = await findEntrypoint();
var exitCode = await runExecutable(entryPoint , 'x');
await flushThenExit(exitCode) ;
}

24. シンタックス
シュガーなど
class Point {
num x; num y;
num _privateNum; //アンダースコアで、(パッケージ)プライベート
Point(this.x, this.y); //コンストラクタ
num get numPlus => _privateNum + 1; //ゲッター
set numPlus(num x) => _privateNum = x - 1; //セッター
void doSome(){} void doAnother(){}
}
main() {
var p = new Point(1, 2);
var p2 = p..doSome()
..doAnother(); //「..」(ドット2個)で、void を返すメソッドをビルダー化
int i1 = null;
int i2 = i1 ?? 1; // 「a ?? b」 は、a が null なら b
String s3 = i1?.toString(); // i1 != null ? i1.toString() : null
var isDecaffe1 = (String tea) => tea == 'chamomile'; // 1行関数
Function isDecaffe2 = (String tea) => tea == 'chamomile'; // 1行関数

25. 充実した標準ライブラリ
結構、簡単にいろいろ作れそうという感触。
dart:async Future、Stream などの非同期処理用
dart:collection 様々な追加のコレクション、 HashMap、LinkedList、、、
dart:convert エンコード、デコードなど
dart:io ファイル、HTTPなどのネットワーク。サーバ処理用
dart:html DOM操作などのウェブアプリケーション (フロント)用
dart:js JavaScriptとの相互運用用
dart:math 数式計算関連
dart:mirrors リレクション操作のためのライブラリ

26. Sound Dart 〜 より強い型チェック
最近の世の流れに合わせて型付けを強化する方向。Strong Mode とも言う。反対は便
宜的に、Classic Dart と呼ぶらしい。歴史的に、型がオプションである位置づけから Dart
は始まったが、静的型付けを好む最近の流れに合わせてきた。
✓ コンパイル時の型チェックが強化される
✓ 実際は、List と Map に型を加えるだけでコンパイルが通ることが多い
✓ Classic Dart だと、実際にはList<dynamic>として定義され、List<int>などにキャスト
される
✓ IntelliJなどのIDEにも優しい
✓ ジェネリック型でも、親子関係(共変)うまく扱える？

27. Sound Dart 〜 より強い型チェック
Classic Dart
void fn(List<int> a) {
print(a);
}
main() {
var list = [];
list.add(1);
list.add("2");
fn(list);
}
void fn(List<int> a) {
print(a);
}
void main() {
var list = <int>[] ;
list.add(1);
list.add(2);
fn(list);
}
Sound Dart

28. 公式ドキュメントが充実
さすがGoogle様 (ただし英語に限る)。
✓ A Tour of the Dart Language … クイックツアー
✓ Effective Dart … Effective Java とまではいかないがコーディングガイド
✓ コアライブラリのドキュメントも豊富

29. まとめ

30. まとめ
✓ 書きやすい！
● すんなり学ぶことができた
● シュガーも適度にある
✓ IDEとの相性はすごくいい
● 型の恩恵を受けられないところの勘所はもう少し使わないとわからない
✓ なおStrong Modeは、DDC(Dart Dev Compiler)の登場を待つ必要がある
● コンパイラとは別に dartanalyzer が提供されているのが現在
● dart-lang/sdk は開発がとても活発なので期待