これは Angular Advent Calendar 2017 8日目の記事です。
この記事では、「SPA開発未経験者がAngularを半年間やってみてわかったポイントとハマりどころ」というテーマで、この半年間Angularを学ぶ上でポイントになった機能やキーワード、ハマりどころなどを紹介します。
初心者目線で、これからAngularを始めたい方や初心者の方向けに項目ごとに参考リンクなどを交えながら紹介していこうと思います。
Angularのググラビリティ
Angularに関する情報を得る手段として、Webが一番手軽で有効な手段かと思います。
これに関しては、Angularを正しく学習するためのガイドラインというAngluar User Groupのブログ記事で紹介されていますが、Angularを始めた頃の自分にとってこの内容は、知っておいてよかったと思える内容でした。
また、前バージョンのangularjsの記事を除外してググるTipsとして、マイナス記号を付けて検索するのが便利です。
Angular ngIf -angularjs
今後も、半年ごとのメジャーアップデートが予定されているようなので、今後もバージョンの差異による資料の見極めが必要になってくるかと思います。
参考リンク
Angular CLI
Angluarを始めるにあたりまずはじめに何をやったかと思い返すと、AngluarCLIのインストールです。
プロジェクトの作成を始め、コンポーネント、サービス、パイプ、などAngluarアプリにおけるほとんどの構成要素の雛形作成から、開発サーバーの起動、テストまで行うことが出来るので、使わない手はありませんでした。
Angularの公式チュートリアルでもAngular CLIを使った手順が紹介されています。
参考リンク
-
Angular CLI(Wiki) -GitHub
- Angular CLIのWikiはオプションを調べるのによく見ることになるかと思います
-
Angular CLIがわかる本 -Leanpub
- 最近になって読みましたが、知らない機能に気付かされました
コンポーネント間のデータ共有
Angular CLIを使って自由にコンポーネントをつくり、配置できるようになってくると、コンポーネント同士でデータのやり取りを行う必要が出てくるかと思います。Angularの公式チュートリアルでは、@Input()デコレータを使った親コンポーネント→子コンポーネントへのデータのデータの受け渡し方までを扱っていますが、その逆をやろうとした際に少しハマった記憶があります。
参考リンク
-
コンポーネント間のデータ授受メモ -Qiita
- 日本語ではこの記事がよくまとまっており度々お世話になりました
REST APIとの連携
多くのAngularアプリケーションでは、REST APIと連携したCRUD操作が必要になってくると思います。
Angularには、HttpClientModuleというHTTP通信を行うためのモジュールが用意されており、基本的な使い方はAngularの公式チュートリアルでも紹介されています。
一点注意を挙げておくと、4.2.xまでは@angular/httpに含まれていたHttpModuleを使っていましたが、4.3.xからはこれが非推奨になり、@angular/common/httpに含まれるHttpClientModuleを使うようになっています。少し古めのプロジェクトを参考にする際などは、注意が必要です。
参考リンク
-
Angular 4.3で追加されたHttpClientModuleについてのメモ
- HttpClientModuleの使い方についてはこちらの記事を参考にさせてもらいまいｓた
Observable(RxJS)
はじめにObservableやRxJSの各種オペレータを使ったコードを見た時、何をしているのか全然わからなかった記憶があります。
AngularのHttpClientModuleがObservableを返すため、上で挙げたREST APIとの連携を行う上でもObservableを使うことは欠かせません。サンプルや自分で書いたコードを実際に動かしてみることで、慣れていくのがいいのではないかと思います。(最近はやっと慣れてきました)
参考リンク
-
RxSwift の Observable とは何か -Qiita
- ReactiveXのSwift実装であるRxSwiftのObservableを説明した記事ですが、Observerパターンの噛み砕いた説明がわかりや使った
CSSつらい問題
これは、開発体制やWeb開発の経験などにもよると思いますが、SPA開発未経験の自分は「こんなにCSSを書かないといけないのかぁ...」と感じました。
これは、Angularに限った話ではありませんが、Web開発の経験が浅いエンジニアの場合、このように感じる方は多いはず(？)
Angluar CLIではプロジェクト作成時に--styleフラグを使って、CSSの代わりにSCSSやSASSを使うことも出来るの、それらを使うことで少しでもつらみが解消できるかと思います。
$ ng new angular-with-scss --style=scss
Angular Material
Angularで使えるUIコンポーネントライブラリというと、Angular Materialが真っ先に挙がってくるかと思います。上で挙げたつらみを解消する手段としても有効ですし、はじめに導入するAngularの外部モジュールとしてもネットに資料が多くよいかと思います。
@angular/flex-layout
自分のようにCSSをなるべく書きたくない人間にとってはすごく嬉しいパッケージなので、挙げておきます。
flex-layoutもAngular公式パッケージで、Flexboxをでのレイアウト、レスポンシブなUIをCSSを書かずに実現できます。
AngluarMaterialではこのパッケージに依存していますが、flex-layoutのAPIを直接使うためには、別途インストールが必要になります。
ただ、まだBeta番だからということもあってか、バージョンアップのタイミングで画面が崩れるなどの問題が発生したこともあり、使う際にはバージョンに注意が必要です。
$ npm install --save @angular/flex-layout@latest
参考リンク
-
flex-layout -GitHub
- こちらのプロジェクトはWikiが充実しているので、まずはここを見るのがよいかと
状態管理
ここで言う状態とは、「サイドナビが開いているor閉じている」といった画面の状態や、サーバーサイドと通信した結果キャッシュしているJSONなどを指しています。
一番簡単な例では、親子関係のない2つのコンポーネント間で1つの値を共有したいといったケースです。
簡単に行うならば、RxJSのSubjectを使ったサービスを各コンポーネントで共有するという方法があります。
AngularでもReduxしたい!という場合には、ngrxという状態管理ライブラリが存在します。
このトピックは最近自分の中でも注目しており、どんな方法が良いか模索中。
このアドベントカレンダーでもngrx関連の記事が予定されているらしいので、楽しみにしています。
参考リンク
コンポーネントの分割
ヘッダーやサイドナビなどの重要な部品を除き、まずは、ng generate componentで作成した1つのコンポーネントに全機能を実装した後、他のコンポーネントにでも同様の機能を使いたい場面があれば、新たに機能を切り出したコンポーネントを作るといった進め方をしています。
あくまで自分のやり方なので、他にいい方法や指針になる基準などがありましたら教えていただきたいです。
モジュールの分割
AngularのRouterのルーターを使うとLazyLoadを簡単に実現することができますが、その時必須になるのがモジュールの分割です。
プロジェクトの規模が大きくなることが予想されている場合、最初からページごとにモジュール分割を行っておくのがよいと思います。
参考リンク
日本語の資料少ない問題
Angularを始めた頃、日本語の情報が本当に少なくて心が折れそうなりました。
とりあえずチュートリアルやってみたけど、次は何しよう?といったた
特に、入門~中級の間を埋めるようなノウハウ(REST APIとの連携やプロジェクトの構成など)は日本語の記事が特に少ないように感じました。
現在は、angular.ioの日本語化が進められているようですし、今後使う人が増えていけば有用な記事が増えていくと期待しています。
参考リンク
* angular.jp -GitHub
終わりに
ここまで書いてみると、リンクまとめ集のような感じになっていることに気づきました...
とは言え、自分がAngularを始める際に大変参考にさせてもらったものばかりなので、今回このような形でまとめてみることにしました。
少しでもこれからAngluarを学び始める人の手助けになればと思います。
Angular Advent Calendar 2017 9日目の明日は、@sassy_watsonさんです。