初心者がAngular2(4)を使って気づいたこと

詳しいコードの話はしません。Angular初心者の方がどんなところで学んだり、ハマるのかを紹介する記事です。

最初に感想

普段は Ruby on Rials のプロダクトを触っています。
フロントエンドの知識と経験を付けるために、まずは Angular と React でしょうってことで今回は Angular の簡単な質問投稿と回答ができるアプリを作ってみました。
製作期間は初めて Angular２ を触ったので1ヶ月ぐらいかかりました。
Angular はコードのルールがかっちりしていていろいろなエラーにハマっていました。ググっても Angular２ のエラーは検索数が少なくて結局 Google の公式のリファレンスを読みに行ったりと苦戦しました。不幸は続き、製作中に Angular4 がリリースされたのでアップグレードしたが、UIコンポーネントの PrimeNg が動かなくなるという悲しい事態になりました。
更に、今回は Rails5 の API モードを使って初めてクロスドメインでやったので Rails 側でも少し苦戦しました。
やってみた感想は　Angular はルールが厳しいが、そのルールも変わっていく可能性があるということ。つまり、まだまだ成長中のフレームワークだと感じました。フロント周りはごっそり Angular でいろいろできるから、自分でガチガチに作り込みたい人は Angular はとても良いフレームワークだと思います。

前置きが長くなりましたが、どんなことをやったのか具体的に紹介していきます。

やったこと

Angular Tutorial

まずは Angular2 を学ばなければ始まりません。教材は Angular Tutorial をやりました。

https://angular.io/docs/ts/latest/tutorial/

ここでは以下のことが学べました。

• Angular の大雑把な使い方
• component, service のイメージ

Angular２ はフロントエンドに関してとても強力なフレームワークです。描画、データ通信、ルーティングとフロント周りに必要なライブラリーが全て揃っていると感じました。
僕は時間がかかったので2週間ぐらいここに時間取られました。早い人は２，３日で終る内容だったと思います。しかし、僕は初心者。ここは十分に時間をかけてやる価値が合ったと思います。後に自分でアプリを自作する際にコードを理解しているとチュートリアルの応用で事が済むので特に難しいこと考えずにパズルのようにコードが書けるようになります。
ここでハマるとすれば英語の問題だと思います。僕も「ここ何言ってんだ！？」って箇所がありました。英語である上に、初めての Angular２ となっては、詰まる要素が多すぎて何度か心が折れかけました。しかし、書いて有ることはJSなので困ったら自分でチョコチョコいじったりしてどんな風に動くか確認しながら勉強しました。

1. 英語のチュートリアルで流れを掴む
2. 詳細部は少し変えてみて帰納法的に理解する

こんな感じで、チュートリアルを突破しました。
英語が苦手な人はここではそんなに深く理解する必要はないと思います。「こんな感じで動く」ってイメージや法則を掴むことに注力するのでも十分だと思います。そのことによって、「チュートリアルを攻略してる感」と「ものを作ってる感」が得られて楽しく勉強できると思います。

Angular２でアプリを作る

質問投稿と回答ができる３ページぐらいのアプリを作ってみました。

https://github.com/atsushi0623itoh/angular_on_rails_frontend
https://github.com/atsushi0623itoh/angular_on_rails_backend

Angular はフロントエンドのフレームワークとしては、とても広い範囲カバーしていると思います。なので、バックエンドはDBとやり取りするAPIを提供するだけの機能で十分だと思いました。よって、今回はフルスタックフレームワークである Ruby on Rails の中に組み込むことはせずに、Rails5 で新しく使える様になったAPIモードを使ってフロントエンドとバックエンドを完全に切り分けました。
やはり自分でものを作るのがものすごい勉強になりました。この段階では以下のことが学べました。

• component, service の詳細な役割
• app.module.ts の役割
• ルーティングの仕方
• Angular の設計方法

Angular２ は component, service を使う回数が多くこれらを使いまわしてアプリを作っていきます。そのことによって、component, service の理解度はとても上がったと思います。この２つを上手く使いこなすことによって、責任の分担ができるのでコードとしてとても見通しの良いものになったと思います。
また、component, service がアプリの一部なら　app.module.ts　はアプリの全部だと感じました。チュートリアルが終わった段階では具体的な使い所がピンときていませんでしたが、自分でアプリを全体的に操作したい service を作り出す時や、アプリ全体の設定をしたい時に　app.module.ts の有用性を実感できました。
ルーティングはちょっとだけハマりました。 Rails では action の単位でルーティングされているのに対し、Angular は component 単位でルーティングされます。その認識のズレが最初のミスの原因でした。しかし、この感覚差をなくせたら、ほぼほぼ Rails のルーティング知識で乗り越えられました。
Angular は React の Redux のようにこれだという設計方法がありません。多くの人は　RXJS を使ってデータの流れを掴んでるだけなのではないかと思います。最初、Angular を勉強する前に、設計方法がないのはコードは人によってバラつきがあるものになってしまうと思っていました。
しかし、最初から言っているように Angular はフレームワークのルールがすごいかっちりしています。 TypeScript が使われていて型が制御されていたり、 component, service のような明確に責任を分割していたりとルールが僕のコードのバラつきを防いでくれたと思います。イメージとしては Angular の中に既に設計方法が組み込まれているイメージを持ちました。（これは全然プログラミング歴がないので確かではありません）
なので、 RXJS を使ってデータを流れだと理解することにより、小さいですが僕はアプリを作ることができました。（RXJSはまだまだ勉強が必要です...）

初心者（僕）はここで何度も心が折れました。作っていたらめちゃめちゃエラー吐きます。そして、いろいろ調べてみると、 : がないとか、 [], {} を入れろとか、ほんの些細なことでした。 Rails を感覚で使っていた僕には驚くようなエラーばかりで疲れました。
ほんとに Angular はルールが多い！！！

UI コンポーネントを使う

SPIを作ったら使ってみたいのがUIコンポーネント！！
上手く使えばCSS書かなくて良くなりそうってことでUIコンポーネント使ってみました。今回はググって出てきた PrimeNg を使いました。

https://www.primefaces.org/primeng/#/

これを使うことで Angular の意外なことも学べました。笑

• *ngIf, *ngFor などのディレクティブの詳細
• Angular は移ろうもの

PrimeNg を使うにあたっていろいろなサンプルを見ました。「どうしてこのコードが動くんだ！？」と疑問ばかりでした。
なので、実際に PrimeNg のUIコンポーネントのコードを見に行ったりして、「このコードがこういう風に展開されるのか」と学ぶことが多かったです。よくよく調べてみると、当たり前の用に使っていた *ngIf, *ngFor もシンタクスシュガーで展開される理論は同じものが多かったです。

ここからが僕の意外な学びです。
最初は快適にUIコンポーネントを使っていました。しかし、Angular４ がリリースされたのです。記事には早くなっただけだと書いてあったので早速バージョンアップしました。そしたら、なんと PrimeNg 動かなくなりました。いろいろ調べてみると、Angular４ から animation が別の module に切り離されたらしいです。その影響で animation に依存しいたUIコンポーネントは動かくなりました。どうやったら、直せるのかググっても全然出てこなくて結局、諦めました。動かないUIコンポーネントは取り除いてCSSを簡単に書きました。Angular２ の時はもちょっとかっこいいUIだったんですけど、見せるのが恥ずかしいものになってしました。あと、真剣にWEBデザイン、CSSを勉強しようと思いました。
何が言いたかったかと言うと、 Angular はまだまだ開発途上だということです。１ヶ月の間に Angular がバージョンアップし、それに伴い、 Angular-cli, PrimeNg　もバージョンアップしました。いろいろツールを使って開発しているとバージョンアップの嵐だと思います。更には、半年後にまた Angular5 を出すつもりらしいです。どんだけ初心者にきびしいのだよ...
しかし、Angular２ から Angular４ への変更は animation が別の module に切り離されたことを除いてはほぼほぼ変化なしです。つまり、component, service , ルーティングのような基幹部分の変更はありませんでした。このことから、他のUIコンポーネントなどに頼らず Angular のパワーをフルに使いこなし、使い切れるならとても強力なフレームワークだと感じました。自分の力がついたら Angular でプロダクト作ってみたいですね。笑

開発環境

参考までに今回の開発環境を以下に記します
- vim
- Ruby on Rail(API モード) 5.0.1
- node 6.9.5
- Angular2 -> Angular4
- angular-cli 1.0.0 (Command Line Interface)
- PrimeNg 2.0.6 (UI Component)