【初心者向け】Angular2と一緒に使う有名なサードパーティを見回してみる

2016年12月8日

こんにちは、榊原@rdlaboです。
 
9月にAngular2がリリースされて、早3ヶ月弱。
さすが人気フレームワークだったAngularJSの後継だけあって、Angular2のパッケージ外でも多くの有志によっていろいろなサードパーティがつくられています。そこで、Angular2をはじめるにあたって便利なものをご紹介します。
この記事はAngular Advent Calendarの8日目の記事です。
 

CLI

公式サイトをみて「よし、Angularをはじめよう」とチュートリアル通りに進めていくと、systemjsの設定ファイルが入ってるものを落としてうんぬんかんぬんとか。「まずは、タスクランナーを書きます」みたいな環境構築から入るブログなどありますが、実案件で環境構築から入ると心が折れますので、CLIを使った構築をおすすめしています。
CLIでまず代表的なのは、公式がサポートしているangular-cli。「Angular CLIによるAngular2入門 / Angular2アプリを爆速開発」で詳しく紹介されています。そして、サードパーティでは次の3つが代表的かなと思います。

universal-cli

angular-cLIから派生して開発が行われている、angular-universalを簡単に実現することができるCLIです。AngularUniversalとかサーバーサイドレンダリングって何という方はちょっと古い記事ですが「Angular2のServer Side Renderingに触れてみる」がわかりやすいと思います。

Ionic CLI

Ionic CLIは、Ionic2というAngular2のUIフレームワークを使用するためのものです。Ionic2は「Ionic2を通してAngular2を操作する」という思想があって、普通のUIフレームワークだったら着せ替えのようにあとで変更することもできますが、Ionic2は最初から最後までIonic2を使うことを前提にしています。
なので、Ionic2を採用する場合、最初のプロジェクト作成からIonic CLIを使って構築しないとあとで辛い目にあいます。
 
ただ代わりに、とても強力なUIフレームであり、CLIもangular-cliよりもLiveReloadが早かったりと決して劣るものではないので、Angularを採択すると決めた時に「Angularをネイティブで使うか、Ionic2を使うか」も一緒に検討しておくことをおすすめします。

Monaca CLI

MonacaCLIは、OnsenUI2の公式webサイトで紹介されているCLIです。OnsenUI2はアシアル株式会社が作っている国産品で、すべて日本語でドキュメントが書かれている唯一のAngular2 UIフレームワークです。ですので、ここからAngular2を使ってみようという方もいると思うのできっちり言っておきます。
 
Monaca CLIは使ってはいけません。
 
というのも、Monaca CLIはAoT(Ahead of Time)非対応です。AoTって何という方は「Angular AoTガイド」が詳しいですが、簡単にいうと事前にコンパイルしておくことによってAngularの処理がとても軽快になります。ほんと、なります。
で、Monaca CLIはこのAoTに対応していないですし、あとIonic2と違って「CLIから使わないと辛い目にあう」UIフレームワークでもないので、OnsenUI2を使う場合はangular-cliを使うことをおすすめします。
ここらへんのやり方は、「Onsen UI Advent Calendar 2016」で誰か書かないかな。
 
[2016年12月13日]
書きました。「monaca-cliはやめよう!OnsenUI2を使うにはangular-cliではじめた方がいい理由と使い方」
 

UIフレームワーク

さて、続いてUIフレームワークです。CSSフレームワークのAngular2向け版だと思ってください。

Material Design for Angular 2

まずは公式。MaterialDesignをAngular2上で使うことができます。ただ、注意してほしいのは、まだalpha版です(2016年12月7日現在)。具体的には、1/3以上は未実装で、実装済みの機能にもまだまだバグが残っています。
ですので、プライベートなブログなどで利用するのはともかくとして、プロダクトとして採用するのは先送りにした方がいいでしょう。

Ionic2

こちら、CLIでも紹介したIonic2です。Ionicのドキュメントをずーっと下にスクロールしていくと、どんなデザインでどんな機能が実装されているかわかりやすいのでぜひ目を通してみてください。
もともとは、ハイブリッドアプリ向けだったのですが、近年のWebアプリの機運の高まりから、普通にWebサイトを制作するのにも便利な機能がどんどん追加されています。まだRC.3なのですが、完成度も高く、おすすめのフレームワークです。
 
詳しくは、「Ionic2(Angular2 UIフレームワーク)をはじめるにあたっての注意点まとめ」をご覧ください。

OnsenUI2

上で紹介しました、国産UIフレームワークです。OnsenUI(1)の時代には、Ionic2と同じように「Angular専用」だったのですが、OnsenUI2になり、多くのJavaScriptフレームワークに対応した共通フレームワークになりました。「React/Angular2時代のUIフレームワーク考──Ionic2、Onsen UI2を語る」の記事が詳しいです。
 
また、「【Angular2】 そろそろ Onsen UI 2 と Ionic2 を開発面からみて比較しようと思う。」も参考になるのではないでしょうか。何よりもの売りは日本語対応であり、Twitterで日本語で「わからないー!!」と悲鳴をあげると開発者が拾ってくれたりもしますので、「英語は嫌い。だけど、Angularはさわってみたい」という方におすすめです。
 

CSSフレームワークを使う

ちなみに、使い慣れたCSSフレームワークもAngular2で使うことができます。もちろんCSSだけだと何も考えずにCDNでも読み込んできたら使えるのですが、モーダルなどのJavaScriptを用いた挙動をしようとすると一手間かける必要があります。
例えば、BootstrapをAngularで読み込むためには、ng2-bootstrapが有名です。「angular-cliで作ったAngular2プロジェクトにng2-bootstrapを導入する」などをご参考いただければと思います。
 

Store

Angular2でアプリをつくってると、アプリ内のデータ保存場所が欲しくなります。もちろん、webストレージなどを使えば実現できることも多いのですが、リアルタイム性と状態の保持を考えるとStoreを使うのが一般的です。もうちょっと細かく書き出すと、FluxとかReduxとかいうキーワードになるので、興味がある方は「10分で実装するFlux」を読んでいただければと思います(ちょっとむずかしくなるので、本稿では単に「Store」と書きます)
Angular2で使われるライブラリとしての有名どころは次の2つです。

@ngrx/store

Angular2では、デフォルトでrxjsというパッケージが利用されているのですが、そのrxjsで有名な方がつくったStore。(とどっかで読んだ記憶があるのですがうろ覚えです。後ほど追記するかも)。英語しかありませんが、使い方はわかりやすいのでさくっと使い始めることができます。

Walts

@armorik83 さんが開発したStore(Fluxライブラリ)。こちらも国産なので、ドキュメントが日本語で書かれており、とっつきやすいと思います。印象的には、@ngrx/storeよりも規則性を求めるので、大規模なものに向いているイメージです。実際にさわって、確かめてもらえれば。
「Walts – Angular 2向けFluxライブラリを作った」
「どうしてWaltsを開発したのか – そして昨今のFlux」

認証・Bass

Auth0

認証基盤サービス。ログインって当たり前のように実装を求められますが、メールアドレスだけでも「パスワードを忘れた時」「メールアドレスの変更」「パスワードの変更」とか一通りのパターンを開発するのはなかなか大変。その上に、Social Loginが求められる世の中です。そこで、そこらへんの面倒なものを全部統一してAPIで提供してあげるよ、というサービスです。microサービスとかと一緒に語られることが多いです。
Auth0は、Angular2専用に「angular2-jwt」というパッケージを用意して、Angular2での利用をサポートしています。Angular2がalpha時代からずっと追随していたのでかなりAngular2に力を入れてる模様。
使い方など、くわしくは「Auth0 + Angularで認証機能をお手軽に実装しよう」をご参考ください。

Firebase

「いやいや、認証だけではない。データの格納も全部APIがほしいし、アクセス解析も一緒に提供してほしい」という人向けのGoogleのサービス。Bassのひとつで、そこらへんをすべてサポートしてくれます。また、これもAuth0同様にAngular2向けに「AngularFire」というAPIを提供していますので、Angular2を使ってる方は一度は試してみたという方は多いのではないでしょうか。
 
「FirebaseとAngular2を使ってリアルタイムでデータのやり取り【導入編】」が概念の理解としてはわかりやすいですが、コードがAngular2 beta時代のもので今では動きませんのでご注意ください。このアドベントカレンダーの11日にAngularFireについて書くという方がいらっしゃいますので、それを待つのがよさそうです。
 

まとめ

以上、ざっとAngular2周辺のサードパーティについてみていきました。
もちろん、本稿でご紹介したサードパーティは極々一部ですが、このように「実案件でAngular2を使うことをサポートする環境」は続々と整ってきていますので、ぜひとも一度Angular2にチャレンジしてみていただければと思います。
 
それでは、また。