15分でわかった気になるDart

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

HRMOS事業部 小林 達at BizReach on 2017.3.6

自己紹介

✓ 小林 達 (こばやしさとし)

✓ HRMOS[ハーモス]プロダクト開発部

✓ マネージャ兼エンジニア。最初の開発者

✓ 仕事では Scala (というよりJIRAとかGoogle Sheetとか)

✓ Dart は趣味です。。

● ウォッチ歴数週間

● 学習歴数日

Dart を取り巻く状況

Dartってどんな言語？

✓ 2011年にGoogleが発表

✓ Java、JSに似たシンタックスの動的型付け言語

● JITコンパイルされ、DartVM上で動作する

● dart2jsでJSに変換できるのでブラウザでも動く

✓ ECMA-408で標準化されている

※ 出典(Dart/Flutter入門(2017.2.27))

触ってみた感触としては

✓ Java、JavaScript等がかければすんなり書ける

✓ 型を書いても書かなくてもいい

✓ async/await, class周りのサポート

✓ パッケージマネージャー、IDEサポートの充実

✓ "ちょうどいい" 言語

● Javaのレガシーさを取り除いている

● Goほど記述量は多くない

● Scalaほど難しくない

※ 出典(Dart/Flutter入門) + 少し改変

黒歴史

✓ 当初はブラウザ上で動作し、JavaScriptを置き換える目的

● 各ブラウザがDartVMを搭載する必要がある

● やっぱりそれは無理なのであきらめた

● (dart2jsでJSに変換して動かすことはできる)

※ 出典(Dart/Flutter入門)

2017年、Dart 復権の兆し

✓ TIOBE Indexによると2016年に

”0.95%増加したDartは 〜 26位から17位へ急上昇”

✓ AdSense/AdWordsは、全面的にAngular Dartでリプレイス

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倍

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デザイナー

に十分な柔軟性を与えられるかどうか 〜 ワールドクラスの低遅延を実現できるか

どうか。多くの顧客が一日中、膨大なデータを処理するので速いことは超重要〜

(後略)

Dart 言語

公式サイトのウリ

✓ ライブラリやツールの堅固な基盤コアなライブリラリやツールなしではプログラミング言語は意味がない。Dartは今まで何年も巨大なアプリケーションを支

えてきた

✓ 一般的なプログラミング作業を簡単にアプリケーション開発には、普遍的に見られる問題とエラーがある。Dartは、それらの問題により簡単に退治でき、それ

らのエラーをより簡単にキャッチできる。async/await や generators、 string interpolation やエラー検知などはそのため

にある。

✓ プログラマーを驚かさない何をタイピングするかと何が起こるかの間はとてもストレートであるべき。魔法 (自動的な型の強制、変数の巻き上げ、

グローバルのヘルパー、、、) は大きなアプリケーションとは相性がよくない

✓ 安定して実用的な解をDartは、ときどき退屈かもしれない。私たちは生産的で安定的である方を好む。私たちは長く走り続けられるために、大

規模なアプリケーションを開発するコアなカスタマーらと密に作業している

Terse

タァース。昨年のカンファレン

スでよく聞いたキーワード。

最近のDartを象徴的に表す

ワード。

発表から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

DartPad で試す

DartPad は、オンラインエディタ

https://dartpad.dartlang.org/

✓ JSFiddleとかと似ている。コンソール出力だけでなくHTMLも

✓ Shareすると永続化できる。埋め込みできる

✓ Strong Mode (後述)

Dart のインストール

Macの方は brew で。ドキュメントはこちら

※ IntelliJ で、Dartium 使います

brew install dart --with-content-shell --with-dartium

IntelliJ・WebStorm

✓ JetBrainsの公式プラグインをインストールする

✓ Atom、Sublime VS Code、Vimなどにもプラグインあり

Dart のコードを少し

数値、文字列、真偽、、

✓ すべてオブジェクト (クラス名が小文字始まりでも)

✓ 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);

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' );

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();

高階関数 も適度に使える

✓ 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' ;

型推論はもうちょい

✓ ただ、型推論はもう少し頑張って欲しい

● IntelliJ で補完いまいち

var teas = <String>[ 'green', … , 'earl grey'];

var loudTeaList = teas

.map((tea) => tea.toUpperCase())

.where((tea) => tea != 'chamomile')

.toList() ;

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) ;

}

シンタックスシュガーなど

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行関数

充実した標準ライブラリ

結構、簡単にいろいろ作れそうという感触。

dart:async Future、Stream などの非同期処理用

dart:collection 様々な追加のコレクション、 HashMap、LinkedList、、、

dart:convert エンコード、デコードなど

dart:io ファイル、HTTPなどのネットワーク。サーバ処理用

dart:html DOM操作などのウェブアプリケーション (フロント)用

dart:js JavaScriptとの相互運用用

dart:math 数式計算関連

dart:mirrors リレクション操作のためのライブラリ

Sound Dart 〜 より強い型チェック

最近の世の流れに合わせて型付けを強化する方向。Strong Mode とも言う。反対は便

宜的に、Classic Dart と呼ぶらしい。歴史的に、型がオプションである位置づけから Dart

は始まったが、静的型付けを好む最近の流れに合わせてきた。

✓ コンパイル時の型チェックが強化される

✓ 実際は、List と Map に型を加えるだけでコンパイルが通ることが多い

✓ Classic Dart だと、実際にはList<dynamic>として定義され、List<int>などにキャスト

される

✓ IntelliJなどのIDEにも優しい

✓ ジェネリック型でも、親子関係(共変)うまく扱える？

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

公式ドキュメントが充実

さすがGoogle様 (ただし英語に限る)。

✓ A Tour of the Dart Language … クイックツアー

✓ Effective Dart … Effective Java とまではいかないがコーディングガイド

✓ コアライブラリのドキュメントも豊富

まとめ

まとめ

✓ 書きやすい！

● すんなり学ぶことができた

● シュガーも適度にある

✓ IDEとの相性はすごくいい

● 型の恩恵を受けられないところの勘所はもう少し使わないとわからない

✓ なおStrong Modeは、DDC(Dart Dev Compiler)の登場を待つ必要がある

● コンパイラとは別に dartanalyzer が提供されているのが現在

● dart-lang/sdk は開発がとても活発なので期待