なぜAngularDartに挫折するのか？どうやって入門できたのか？

みなさん，AngularDart難しいですよね？そうですよね？私にはとても難しかったです．やっとプロダクトを作ることができました．

その体験から，なぜ挫折するのか？という点について考えてみました．Typescript版のAngularにも共通するところがあるかもしれませんが，そちらは使用していないため詳しくはわかっていませんし，今のところWeb Appを作るのにAngularDartとFirebase, Google Cloud Platformでいいかな？と思っているので他のものも追求していません．

まず，難しさというのはどこからくるのか？ということです．

1. 開発環境のセットアップが難しい（ビルド含む）
2. 使用言語の仕様が難しい
3. 言語・ライブラリ・フレームワークの使い方がわからない

の点が私にとっての大抵の障壁です．どこかでつまづくとやめてしまうことが多いように思います．そもそも10年前はWeb Appはネットに繋がらないと無力，LocalのGUIがあればいい，そもそもMarkup LanguageでApplicationを作るというのはどうか？と考えていたのでほぼゼロからのスタートです．（先見の明がない点が非常にお恥ずかしい．）Ruby-GtkやJavaのSwing，C#と.Net Framwork，iPhone OS 2.0–3.0でののObjective-CでGUI Appを作ってました．10年ぶりにプロダクトを作るようになりまた新たに始めた次第です．（ちゃんと技術のアップデートしておけば良かったと後悔．初期研修医や外科医をやってました．）

まず1について．開発環境のセットアップです．この難しさとは自分の開発環境に導入できない，ビルドがこけやすい，ノウハウがいる，ビルドが時間がかるということが難しさだと思います．その点AngularDartは本家のドキュメントにインストール方法が簡潔に書いてありDartはHomebrewでもAPTでも割と簡単にインストールできました．webdevもstagehandも簡単でこの点は難しくなかったです．開発環境もVisual Studio Codeなら手厚いですし簡単です．私はVimが好きなので，Vimとvim-lspあたりでやっていますが，Dartのpluginも作っていただいていますし，Dart Language Serverもすこぶる快適です．何よりもdartfmtがあるのでスタイルを気にせずバシッと直してもらえるのが嬉しい．開発者の皆様，ありがとうございます．ビルドもパッケージの導入もここで詰まったことはありません。hot-reload, live-reloadも速かったです。ここは挫折しない。

Dartならなんとか頑張れるかも，Javaっぽい構文だからいけそうとなったので本家のチュートリアルを始めました．そこで2の使用言語の問題．やはり新たに言語を覚えるのは難しさの一つではあります．Dartは構文もとっつきやすくチュートリアルと簡単な説明を見ればなんとなく書けそうとなりました．Async/Awaitはよくわかってなかったのでそこが不安ではありました．ここはあまりくじけないポイントかなと思います．

問題は3のところ．これはAngularの部分そのものかもしれません．stagehandで雛形は作れたのでそこはなんとかなりましたが，わからなかったことは次の通りです．

1. Two way bindingって何？
2. Dependency Injectionってどゆこと？
3. Directiveってなんのこと？
4. Async/Await/Stream…なんかすごそう…

です．そもそもこれないと作れないの？なんなのこれ？でつまづきました．使い方がわからん，ここが挫折ポイントではないのかなと思います．そのためにドキュメントをみつつtutorialとして名高いTour of Heroesを2周しました．そうすると理解できました．

1について．なぜ難しいのか．それはTwo wayは何と何のTwo wayなのか，ということだと思います．私の理解ではDOM(HTML, Template)とModel(DartのCode)の”2"だと理解しています．これって要するにGUIのパーツとControllerをやり取りするためのきまりだとわかるまで時間がかかりました．そう考えるとどちらか片方へのbindingもあるととても便利ですし，必要です．これはチュートリアル読んで，あーなるほどと3回目で理解しました．わかると使えるようになるわけです．

2について，これいるの？となっていましたがFirebaseとあれこれやり取りする部分を作って気がつきました．あーこれ必要，ないと厳しいと．何かしらの設定にしろModelにしろApplicationで共通で持ちたいものありますよね？それがむしろこれだけで実現できるAngularすごい！と、てのひらクルクル案件な訳です．あれ，簡潔すぎるのが逆によくわからない人間を惑わせているのでは？という八つ当たりもしたくなります（笑）．

3について．実は最初この部分をよく忘れていて，なんで画面に表示されないの？？とずーっと悩んでました．そりゃこんだけ特別な方法でHTML, DartコードをJavascriptにコンパイルしたもの，CSSを扱うわけですからこれひとまとめですよー，パーツみたいに扱ってくださいねーと言わないとわからないよねーとなって理解しました．これもよく出来過ぎなところが困った（ひどい）．

4について．Javascriptでの非同期のあたりをよく理解せず悲しい思いをしていたのでDartのドキュメントを読み続けました．Cloud Firestoreとのやり取りでわかってきました．あーこれ必要だわー便利だわーと．

やはり実際にものを作ってみると，あーはいはいそれ大事ーとなるわけで，私がオブジェクト指向を理解したときに似ていました．チュートリアルがよくできているので3回くらいやればいい理解になると今は思っています．手を動かすとわかるのでわからないまま飛び込むということが一番の解決法かなと思います．できればmBaaSとやり取りするチュートリアルがあるといいかもしれません．

実はTypescriptにも手を出したのですが，Javascriptの知識経験が薄いゆえにNPMでのビルドでつまり，VimでのLinerやLSPでつまり，ReactiveXの理解でつまり…と諦めてしまいました．なんとか乗り越えたい．

しかしながら何よりも本家のドキュメントが充実していること．英語ですが読みやすいです．もしこれが障壁となっている方がいるのであればなんとか翻訳してみたい．（すみません今は余裕がないですが）．大切なことが必要十分に書いていますしAPI Docとともに何度も読み返させていただいています．

そして強い人がいるということ．Twitterでよくわからない，辛い…と呟くと@ntaooさんが解説した上でブログで記事にしてくださるので本当に助かりました．こういう方がいないとくじけやすいのは大いにあると思います．彼のような強い人になりたい．

AngularDartに限らないですが，「難しい」ということは

1. 技術的に辛い
2. 時間的に辛い
3. 自分自身の理解が追いつかない

のいずれかではないかと思います．それぞれ明らかにして一つづつ乗り越えていけば「なんて便利なんだー」となると思います．チュートリアルとドキュメントを何度もドリルのようにやり続ければ解決できることもあると思います．おそらく数年後にはFlutter Webの方がメインになると思いますが，今動いてとても便利なAngularDart，みなさまいかがですか？

追記:長くなり総論的でわかりにくいので、初心者が理解するに至った過程を細かく記載していきたいと思います。