AngularDartでDart入門

自己紹介 ● 林 尚之（はやし たかゆき） @t_hyssh ● 株式会社ユーザベース ○ SPEEDA事業CTO ● Agile（XP）、ペアプロ、TDD、DDD等が好き ● 最近使ってる言語はKotlin、Ocaml、Dartあたり ○ Dartに初めて触れたのはおそらく 2013年くらいだったはず

前提 今日は下記のような人達を想定して話をさせてもらおうと考えています ● Dart以外に第一言語を持っている ● その上でDartに興味がある ● AngularDartはよく知らない

今日は「Learn Languages」の枠における 「AngularDartでDart入門」 なのでAngularDartよりもDart自体に関して言及すべ きかなと思っているのですが

AngularDartについてほとんど知らない人も多いかと 思うので・・・

AngularDart ● AngularJSにインスパイアされたDart版Angularを開発（2014年くらい） ● AngularJSの2系（現Angular）の開発はTSにて開発し、Dart版もTSからトランスパイルする事が決定 ● 頑張って2系の開発をしていたが、Angular自体の開発者は3つの言語（TypeScript、JavaScript、Dart） に精通していなければならないため、なかなか開発が思うように進まない（ Bridge用のクラスとかも大量 に用意しないといけなかった） ● TS版とDart版は別々の道を進み、それぞれの言語の特性に合わせて開発を進める事が決定（ 2017 年）。これによりTS版およびDart版それぞれで不要なクラスを削除したり、適切なパフォーマンスチューニ ングが可能になり現在に至る。 ● 現在においてはTS版Angularとは思想は同じだがまったく別のフレームワーク（仕様）といった感じ

AngularDartを始めるには 1. Dart SDKをダウンロードしてPATHを通す 2. pubコマンドを実行してwebdevをインストール a. pub global activate webdev 3. Intellijとかで雛形作成 4. 2でインストールしたwebdevを使って起動 a. webdev serve （開発モードで起動） b. webdev serve --auto restart （Live reloadを有効化）

Flutterもそうですが、AngularDartもサンプルを実行 するまでの手順で迷うことがない（良い意味で選択肢 が無い）

なのでDartを学んでみたい人にとって敷居は高くない と思うので気軽に試せると思います

話す事 ● アノテーション ● Generics ● Mixin ● async / await ● Null-Aware Operator ● その他 「Learn Languages」なので可能な限り言語仕様の紹介を AngularDartでやってみます。

AngularDartでアノテーション

アノテーション ● 記法と使い方はJavaやKotlin等と同じ ● 独自アノテーションの定義も可能 ● ただし実行時にアノテーションを読み取る には”リフレクション(mirrorパッケージ)”が 必要 ● 現時点では実行時のコードにてリフレク ションを使用するのは推奨されていない ● 理由はトランスパイル後の JSファイルが肥 大化する上、実行速度に影響が出るため

AngularDartでGenerics

Generics ● 定義方法はほぼJava、Kotlinと同じ ● のように上限境界が指定可能 ● のように複数の上限境 界は指定出来ない ● 下限境界は指定出来ない ● GenericsはJavaのような非変（nonvariant）では なく共変（covariant） ● 実行時でもGenericsの情報は持っている ○ 下記のようなチェックが可能

AngularDartでMixin

Mixin ● mixinキーワードか、abstract classで定義したもの をwithでMixin可能 ● 共通の振る舞いをmixinに切り出してComponent の柔軟性を高めることが可能 ● abstract classの場合はそのabstract classが親ク ラスを継承していない事が前提 ● 以前はextendsを書かなければwithが出来なかっ たが現在は省略可能

AngularDartで async / await

async / await ● 使い方はTypeScriptと同じ ● 非同期処理をあたかも同期処理のように記述可能 ● サーバーとの通信処理の部分等でよく使う ● ←をasync / awaitを使わずに書くと↓ thenの部分で複数行の処理があったり、その結果を 基にさらに非同期処理が必要な場合に可読性が落ち る可能性がある

Null-Aware Operator

Null-Aware Operator ● Nullの可能性のあるオブジェクトに対して Null チェックの処理が不要 （いわゆるNull安全ではない）

その他

おまけ - その① AngularDartに関して ● DIとChange Detection（コンポーネントの状態変更検知の機能）を上手く組み合わせる事で凄く自然に 単方向データフロー且つClean Architectureを実現可能。 ○ BLoCパターンを使わなくても Flutterとのロジック共有が可能（ Flutter側ではScoped ModelかProviderを使う） ↓は以前に自分が発表した資料です https://speakerdeck.com/takayukihayashi/fluttertoangulardartwo-ditoclean-architecturede-iigan-zinisuru ● アプリケーション開発者の生産性を意識して開発が進んでいる。 ○ Live reloadや、テンプレート側でのコード保管、ビルドのスピード等 ● マテリアルデザインを実現する angular-componentsという公式ライブラリがある ○ Datepicker等は素晴らしいが Datatableがまだない ● 参考サイト ○ https://angulardart.dev/tutorial (公式のチュートリアル、ただし英語 )

おまけ - その② 今後のDartに関して ● Non Null By Defaultが検討中 ○ 少しずつ段階的に取り込んでいく予定 ○ 開発者がモードを選択出来るようにする ○ 時期は未定 ● 言語仕様だったり今後の動向が気になる人は下記リポジトリを見ておくと楽しめると思います ○ https://github.com/dart-lang/language ■ なぜ仕様の変更をするのか、同様の事を他の言語ではどのように実現しているか、どうやって実現する かが詳しくまとまっているので楽しめるんじゃないかと思います。

最後に ● AngularDartやFlutterは動かして試すまでに迷いがないので試しやすいと思います。 ● Dartのコアチームも周辺ツールを充実させる事が大事だという考えで開発をしているので、必要なライブ ラリー等は公式チームがほとんど揃えてくれているのも試す上で重要なポイントかなと。 ● 個人的にはサーバーサイドのプログラムを書く事がほとんどの人とかにおすすめです。 ● 逆にすでにTSとかでフロントをゴリゴリ書いてますという人にはおすすめしないです。 ○ Dartでしか出来ない事とか、 Dart独自の言語仕様とかはあんまりないので。