この記事は全部俺 Advent Calendar 2018の18日目の記事です。
作ったもの
捕まえたポケモンのチェックリストを作成しました。
pokeapiを使用して、REST API経由でデータを取得しています。
AngularDart Pokemon pic.twitter.com/U8PuJGtgHL
— tez (@te22eret) 2018年12月18日
実際のサイトはこちらからどうぞ
ソースコードはここに置いてあります。
この記事では、ソースコードについて詳細を記載したりはしません。
Flutterを結構触っている人間として、AngularDartを触ってみた感想と相違点を記載します。
同じような方で、AngularDartに触ろうかな？と考えている方の参考になれば幸いです。
AngularDartとはなにか？
打倒JavaScriptを謳っていた時代からの流れをくむDartのWeb Application Framework。
ただし、途中で方向転換したため、今のAngularDartは最終的にJavaScriptを出力します。AltJSの一種という言い方もできますね。
マーケットを奪いそうな一番身近な存在はFlutterのHummingbird（Flutterのコンパイル対象にWebを含めようとするプロジェクト。Flutter Live2018で発表されました。）と言えそうですが、まだHummingbirdは一般利用可能ではなく、ソースコードも公開されていないため世界観の近そうなAngularDartに触ってみることにしました。
学んだこと/要素技術
- AngularDartにおけるDI
- AngularDartの独自HTMLタグと独自HTML記法（
*ngIf="xxxlist.isNotEmpty"など） - Component/Service/プレーンDartクラスの責任分割とその設計
実際に使ってみてどうだったか
正直なところ、Flutterに慣れていても学習コストはかなり高めだと思います。。
（おそらくAngularJSに慣れている方はむしろ書きやすいのだと思いますが、）Flutterとは全然違う書き方をしなければならないところが多くて辛かったです。
（REST APIを使用するために、サービスのエンドポイントとなるmain.dartにBrowserClientを@GenerateInjectorとして注入してあげないといけなかったり、await/asyncの使い方に癖があったり、material-checkboxなどの独自のHTMLタグがあったり。。）
結局のところ、Flutterとは違ってhtmlやcssも（一部独自タグを使いつつ）普通に書く必要があり、JavaScriptを使うのと何が違うの？何が嬉しいの？と言われるとかなり困ってしまいます。JavaScriptやTypeScriptよりは固い印象を受けるとはいえ、Dartも結局は動的型付けなので型によるメリットも薄いですしね。。
BLoCパターンを使ってすでにFlutterアプリを作成している場合は、ビジネスロジックレイヤーを共通化できるのが一番大きな利点かもしれません。
ただし、FlutterのHummingbirdが一般利用可能になった場合、Flutterに慣れている方はそちらを使用した方が良いと思います。
この記事によると、HummingbirdではCSSを直接書くことを極力避けるように設計されているようなので、ネイティブアプリを書くのと同じように記載できるのでは？と期待しています。
総じて、Hummingbirdへの移行期間中にAngularDartを併用することもあるかもしれない、くらいの感覚だと思いました。
(Flutter + AngularDartでBLoCパターンで作成 → Flutterだけで運用に徐々に切り替えていくイメージ。)
個人的にはもう少し触ってみたいものの、今後どうなっていくかは未知数と言えると思います。
ただし、さすがGoogleというべきか、公式ドキュメントの充実っぷりはすごいので、AngularDartに慣れるとまた違った感想を抱くかもしれません。
同意していただける方・違った意見をお持ちの方のご意見・ご指摘は大歓迎です！お気軽にコメント下さいm(_ _)m