Rのつく財団入り口

ITエンジニア関連の様々な話題を書いているはずのブログです。

【感想】Angularアプリケーションプログラミング

JavaScriptフレームワーク Angular 最新版の徹底解説本

 変化が激しくて自分的には追いつけていないWebフロントエンドの最先端、JavaScriptフレームワーク群。2017年秋現在、おおまかに最有力なのはGoogleが推しているこのAngular(アンギュラー、アングラー)とFacebook製のReactの2強、3番手がVue.jsあたりな感じなのでしょうか。(最前線の方、違ったらスミマセン)
 最新のAngular4に対応してがっつり解説している『Angularアプリケーションプログラミング』。2017/8/4に出たばかりの新刊です。僕は仕事で直近で触るわけではないのですが、将来ひょっこり出てくるかもしれないので参考のために読んでみました。
 著者の山田 祥寛さんはAngularのバージョン1の頃の『AngularJSアプリケーションプログラミング』やあの『Ruby on Rails4アプリケーションプログラミング』、『改訂新版JavScript本格入門』や『独習~』シリーズを始め著者多数、そういう意味でも安心できる本です。Amazonの評価もかなり高いですね。大型本512頁と分厚く、手厚くしっかりと最新フレームワークを解説しています。

 by Googleの一文も眩しい赤い盾にAのマークのAngularはAngularJSとして2012年6月にバージョン1。そして2016年9月に後方互換性を捨ててアーキテクチャを一新してバージョン2、名前の末尾の赤文字のJSが消えてAngularとなっています。そして今年の2017年3月、内部の進んだ機能のバージョン番号コンフリクトを避けるために3を通りこしてバージョン4がリリース。ググったりするときにangularと入れるとよく末尾にjsが勝手に補完されて違うコンテンツが出てきたりするので注意が必要ですね。
 今後もなんと6ヶ月単位でメジャーバージョンアップ……ということでもうAngular5が間近なのだから動きが速くてすごいというか恐ろしい。計算すると2017年9月-10月になるはずですがまだアナウンスは出ていないようですね。

Angularアプリケーションプログラミング

Angularアプリケーションプログラミング

各章の主な内容

 以下、読んで学んだことの整理も兼ねて紹介を。

第1章 イントロダクション

 JavaScript界隈の最新状況やAngularのさわりなど。Googleが推しているフルスタックなフレームワークだけあって、ほぼAngularが1位とのこと。

第2章 Angularの基本

 独特なフォルダ構成、動かし方、ファイルの中身や設定ファイル類の話。 非常に大雑把にいうと、1つのAngularアプリケーションの中はAngularの構成要素をまとめるモジュールが複数。モジュールの中に、Angularが用意している機能があったり画面を構成するコンポーネントがまた複数。
 1画面を構成するのは親がルートコンポーネント1つで、その下にコンポーネントが幾つでも置ける。
 実際のファイル的には app.component.ts のような拡張子tsのTypeScriptファイル1つが1コンポーネント
先頭にAngular独特の書き方でインポート文的なやつとか指定を記述。

@Component({})の中に

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})

のように、selectorでAngularのコンポーネントがこのカスタムタグの中に入るというのを指定。HTMLの中では<my-app>と書くことになります。
その下にtemplate: でタグの中身のHTMLの実体や値が可変な部分をAngularの書式で書く。これが「テンプレート」で、アーキテクチャパターンでいうところのViewに相当。

その下に対応するTypeScript言語のクラスとして、

export class AppComponent {
  name = 'Angular';
}

のように処理を書く。これが「コンポーネント(クラス)」で、アーキテクチャパターンのViewModelに相当。テンプレートとコンポーネントクラスの組でひとつの「コンポーネント」単位が完成。

……という、MVCパターンに慣れた身だとこのへんの書き方からして、もう新しい世界が始まっています。

第3章 データバインディング

 Angularを特徴づけるバインディングは4種類。これもざっとまとめると以下のようになるかと思います。

■Interpolation(補間)

コンポーネントクラス側(=プログラム側、ViewModel側)から、テンプレート(=View側)に値を渡せる。MVCパターンで言うとHTMLテンプレート内の置き換え記号の箇所に、Controller層とかのクラスから値をはめ込むのと同じ。

プロパティ/属性/クラス/スタイルバインディング

Angularはそれだけでなく、タグの色替えとかclass指定、Style指定なども柔軟に渡せる。HTMLタグの属性は初期値、プロパティは現在値と定義されている。

イベントバインディング

テンプレート側(=View)でイベントが起こると、コンポーネントクラス側(=ViewModel)のイベントハンドラーに処理を渡せる。従来のHTML+JavaScriptだと<input .. onChange="javascript:changeXX()" />でやっていたようなこと。イベント名がJSと微妙に違うのに注意。

双方向バインディング

そしてAngularではさらに、テンプレート~コンポーネントクラス双方で、データの変更を検知してもう一方に渡す動きができる。スゴイ!

第4章 標準パイプ/ディレクティブ

 price | currency のようにUNIX/Linux系ではお馴染みのパイプ構文的に書くと、値段をカンマ区切りにしたり通貨記号を付けたりyyyy/mm/dd形式にするなどの文字列操作をしてくれる「パイプ」の仕組みの話。テンプレート内、HTMLに近いところに書けます。
 これも従来のMVCフレームワークだと画面表示の前にController層やその前のロジック側で調整して画面側に渡したりする場合もあるので、新しいですね。

 そしてAngularではHTMLタグ要素のカスタム属性を「ディレクティブ」と呼び、よくある検索結果一覧表示なんかでは <ngFor> を使ったりします。Angularの先頭の"An"だと不定冠詞と間違うからか、2文字目3文字目の"ng"を使うようです。
 日本人からするとOK/NGのngをつい連想してしまうのですがこれは和製英語で、英語だとngは略さずにno goodと言うそうなので問題ないのでしょうか。
 このの繰り返し処理ははtrackBy関数を使ってキーになる値を指定しておくと、配列の中で新しくなった1行だけを更新してくれるそうです。うーんもう画面をリフレッシュしての再検索すらいらなくなるんですね。

第5章 フォーム開発

 Web開発で必須のフォーム周りの話。コンポーネント宣言のtemplate:の中に書くお馴染みの <form>~</form>要素や <input>など。これらのWebフォームでよく使うタグ要素がAngularで拡張されており、バリデーション処理などが指定できるようになっています。ラジオボタンチェックボックス、セレクトボックスなどもAngular拡張の書き方をします。
 ファイルアップロードの手法は、コンポーネントクラス内でhttp.postで組み込み関数を使う、AjaxjQueryの非同期通信でよく見るのと同じような書き方で通信メソッドを記述するもの。
 通信先のサーバサイドは本書ではPHPを例にしており、upload.phpとしてよくあるいつもの処理をしていました。
 ほか、バリデーション処理をコンポーネントでなくコンポーネントクラス側に外だしするやり方も。大規模なアプリだとこちらになるのかなと思います。

第6章 コンポーネント開発

 コンポーネントのさらに詳細、入れ子にする方法など。.tsファイルの先頭にimport文、@NgModule文を書いていくのですが色々指定があります。
 コンポーネントのライフサイクルとして、コンポーネントクラスが生成されてから消えるまでのngOnChanges等々各サイクルについて。これは他のフレームワーク類でも基底クラスの解説などでよく出てきますね。
 他、コンポーネントのスタイル指定方法やアニメーション、META情報を操作する方法など。

第7章 サービス開発

 ここで一気に話が広がります。Angularのコンポ―ネントクラスはメンバ変数で「サービス」のレイヤーに属するサービスクラスのインスタンスを持ち、

this.bookservice.getBooks()

のように、本来はテンプレート→コンポーネント→その先のサービスを呼んでビジネスロジックを処理する。本書で明言されてはいませんがM-V-VMパターンのModelに相当するのがサービスとその先なのでしょう。
 サービス定義には@Injectable() を付けると依存性注入が行え、最初からDIの考え方が入っています。JavaならSpringフレームワークのように生成するクラスを自動で管理するDIコンテナの役割を、Angular自体がやってくれるイメージです。

 僕はジツはふだん他言語でDIを活用していないのでDIのよさがあまり実感できていないのですが(w)、最初からこういう仕組みが入っているのはやはりモダンな今風のフレームワークだなと思いました。一番便利なのはやはり、固定値を返したりする別のモックなサービスを注入して単体テストを自動化する際でしょう。

 このAngular上のサービスは自分でも作れますが、Angularが用意しているサービスもいろいろあります。その名もそのまんまのHttpサービスを使うとサーバサイドとの非同期通信に。この構文で => を書く辺りは従来のAjaxぽいですね。
JSON形式でなくJavaScriptのオブジェクト形式で通信できるJSONP(JSON with Padding)が使えるJsonpサービスもあります。
 ほか、名前は時々聞く非同期通信でストリームの途中にもアクセスできるRx(Reactive Extensions)を解説するコラムなど。

 Angularはフルスタックなフレームワークと謳われていたので最初はサーバサイドの処理もAngularでやるのかなと誤解していたのですが、そうではなくてAPI的な通信先は従来のMVCパターンのサーバサイドとだいたい同じなんですね。
本書ではサーバサイドの通信先にはPHPを例にとり、サーバ側では$_POST$_GETでリクエストの中身を取得するお馴染みのよくあるコードがサンプルになっています。

 他、WebAPIをエミュレートできる便利なライブラリの紹介やセキュリティ関係。
クロス・サイト・リクエスト・フォージェリは情報セキュリティの本だと略称"C"SRFだったりしますが本書だともう"X"SRFになっています。他にも<script>要素の工夫でJSONデータを盗めるクロス・サイト・スクリプトインクルージョン(XSSI)とその対応方法もあり、セキュリティ関係は変化が速く、そしてAngularは最新状況に対応し続けているんだなと感じました。

第8章 ルーティング

 MVCパターンのモダンなWebアプリケーションフレームワークがだいたい備えているURLルーティングと同じような機能。パスに対応するのが画面を表示するコントローラクラスだったりするところが、Angularの場合はコンポーネントに変わります。
 遷移のリダイレクトやパラメータ渡し、#までの指定、前方一致や遷移をガードする方法など、ルーティング回りでよく必要になる機能は一通り揃っている印象。データを全部取得してから初めてコンポーネントを描画するResolverという仕組みもあります。
 他、コラムでコラムでコードスタイルガイドや関連ツールなども。こういうおまけ情報も充実しています。

第9章 パイプ/ディレクティブの自作

 最初の例は文字列の前後をTrimする機能から、各種自作方法について。
属性ディレクティブや構造ディレクティブの作り方も解説されています。

10章 テスト

 Angular界隈にもテスティングフレームワークが各種あるそうですが、標準がJasmine。Rubyで有名なRSpecと似ていて英文に近い構文が書けます。そしてテスト実行ツールはKarmaを使うことが多いとのことで、このJasmine+KarmaのセットがAngularのデフォルトとのこと。

 JasmineのテストコードのMatcherメソッドの構文例が載っていますが、toBeXyz...()のような名称で面白いですね。xUnit脳だと結果を真偽値型に持って単純にassertTrue()とかassertFalse()とかつい書いてしまうのですが、JasmineだとtoBeTruthy()toBeFalsy()と書くんですね。

 テストクラスは ('コメント')=>({ のような独特の書き方をします。
そしてテスト対象が依存するコードを置き換えるダミーコードを「テストダブル」と呼ぶ考え方があり、テストダブルの種類にはダミー、フェイク、スタブ、モック、スパイがあります。テスト対象のコードに割り込んで回数などを記録するオブジェクトを「スパイ」と呼ぶのはちょっと面白かったです。
これはAngualar独自の概念かと思いきや、他のテスティングフレームワークテスト駆動開発界隈でも前からある考え方のようです。

 そしていわゆる結合テストをe2e(End to End)テストと呼び、こちらはProtractorというテストランナーを使用。内部にはあの必殺のSelenium Web Driverが入っており、ボタン押したり要素の値を取ったりと色々できるようです。

 総じて、テスト回りもAngular自体に自動化の仕組みが最初から色々取り入れられているのは、流石モダンでフルスタックなフレームワークだなと感じました。
Googleで出しているAngular製のプロダクトなんかはこのへんを徹底して自動化したりしてそうです。

11章 関連ライブラリ/ツール
  • 見た目を綺麗にするbootstrap
  • バリデーションを拡張するng2-validation
  • 国際化対応ページを作るng-xi18nは、言語ごとに翻訳ファイルを作るいつもの方式
  • アプリのひな型を自動生成してくれるAngular CLI
  • アプリの構造を視覚化するAuguryは、Chrome拡張機能で用意
  • アプリを事前コンパイルするAoTコンパイル

が解説されています。Angular CLIrailsなどのコマンドみたいな感じですが、本書では大きくは取り上げられていませんが実際にはよく使いそうです。

Appendix TypeScript簡易リファレンス

 JavaScriptに型を追加して拡張したAltJSの代表、TypeScriptの解説つき。この付録が役に立ちます。以下のサイトで実際に試せます。 www.typescriptlang.org

  • 変数宣言は:の後に型指定。このへんはKotlinに近い。
  • テンプレート文字列のデータ型は${}で、PHPSmartyエンジンなんかと同じ。
  • 省略可能な引数に ?をつけられる。
  • アロー関数で匿名関数がシンプルに。
  • 関数のオーバロードで型にany型というのをつけられる。
  • 共用型といってstart: numer|string のように型を複数持てるのが便利そう。
  • 外側からメンバ変数名を指定すると、実際には対応メソッドが呼ばれるget/setアクセサがある。このへんはC#Pythonの仕組みと似ている。
  • インターフェースはいらないけど型は明確にしたい場合に、オブジェクト型リテラルがある

等の特徴があります。

本自体の感想

  • 信頼できる本だけあって各章とも丁寧に、分かりやすく解説してあります。Anguar自体はけっこう難しいと感じたのですが(笑)、その敷居が少しでも下がるかと思います。
  • 章の下の節(でいいのかな)が細かい単位で分かれているため、内容が高度で難しくても切れ目が多く、挫折しそうになっても頭を切り替えて読み進めることができます。
  • 図表も多く、注釈もしっかり書いてあるので理解の助けになります。特にオールJavaScript(正確にはTypeScriptですが)、SPAのフレームワークは根本の考え方や概念、アーキテクチャからまったく違うので図で理解するのは大事ですね。
  • サンプルコードも豊富で、どれもHTML的にはカスタムの<my-app>タグをテンプレートで埋め込むという形で例を載せており、理解の助けになります。
  • これこれはこういう省略系も使えるけどこうきちんと宣言した方がよい、なぜなら~という感じで、実際に動かして使って苦労したりしたのであろう、実践テクニックも随所に見られます。現場の実戦本ですね。

Angular自体の感想:なかなかむずい!

 よくAngularはWebフロントエンドJavaSciptのフレームワーク群の中では比較的習得難易度が高い、習得にコストが掛かるなどとネットでも言われていますが、だいたい同じような感想を持ちました。
 本書は非常によく作られていると思うのですが、うーんけっこう難しそうですね。
TypeScript自体は、巻末のリファレンス通りでいろんな言語にも似ているしなかなか便利そうだなとスッと頭に入る感じなのですが、コンポーネント周りのAngular独特の書き方周りや <{[ などのカッコ類の独特の使い方などが。
 なんというか、PHPRubyPythonなんかの構文が理解できました!なととは別の次元、別の種類の難しさのようなものを感じます。やっぱりアーキテクチャやファイル構成、概念からして新しいからでしょうか。

 僕は本業はSIer寄りなのでWebシステムというとまずは機能数や画面数でボリュームを出したり概算で見積もったり、スケジュールを立てたり人をアサインしたりするのですが、これがSingle Page Applicationだと1画面に集約してコンポーネント単位になる訳ですから全く話が違ってきます。
 親のHTMLの1画面の中でどこにコンポーネントを配置するかの整理、コンポーネントの階層構造、コンポーネントの粒度を事前にしっかり定義して取り掛からないとチーム開発では簡単にめちゃくちゃになってしまいそうだなと感じました。
 同様に本書ではサーバサイドのAPI的な口の例はPHPで書かれていますが、こちらのAPIの数や粒度についても方針を立てておかないとサーバ側で別れて複数人で開発した時に連携が崩れてしまいそうだなと思いました。Angularに限らずなんでもそうですが、コードを書く前の設計は大事だねということですね。

 実際の例として本書では、イイネが0件/1件/2件以上~で分岐して表示を変えたりするコンポーネント、テキストエリアで入力中に残り文字数を計算して動的に表示するコンポーネントなど、Webの最前線で見るような仕組みも取り上げられており、「こうやって作るのか!」と実感できたりします。

 まあなんにせよ本書のおかげで新世界の実体が大まかにでも分かりました。
 習得のハードルがやや高く、そしてバージョンアップの変化も速い、日本語の情報もまだ多くはない、Qiitaや技術ブログ系で一番進んでいる人たちが取り組んでる感じ……とハードルが何重にもありますが、それを乗り越えて採用して開発してプロダクトを作り上げると……今のWebの本当の最前線、すごい動きをしちゃうWebアプリが作れそうだなあと思いました。

codezine.jp dke-msy-node.hatenablog.com

Angular関連書籍

 同じくAngular4を扱った本というとこちらの『はじめてのAngular4』もより先に出ていますが、ネットの反応やカバー範囲を見ると1冊選ぶとしたら本書なのかなという感じです。

はじめてのAngular4 (I・O BOOKS)

はじめてのAngular4 (I・O BOOKS)

 Angular2が2016年2月、そしてこの『Angular2によるモダンWeb開発』が出たのが2017年2月です。本屋でも割と見かけますね。

Angular2によるモダンWeb開発

Angular2によるモダンWeb開発

 本書と同じ作者さんによる『AngularJS アプリケーションプログラミング』が2015年8月。当時評判も良かったようですが2017年からするともう時代遅れということになります。これがJavaの本だったら2015年の本なんてまだまだ通用するのになあ。
 そしてこの本は『Ruby on Rails * アプリケーションプログラミング』と表紙デザインが若干似ているので注意ですw

AngularJS アプリケーションプログラミング

AngularJS アプリケーションプログラミング

 同じ作者さんによる、TypeScript本の『速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ! 速習シリーズ』。

 同じ作者さんによるJS入門本『改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで』。最近のJavaScript本も幾つかありますが、この本は特に評価が高いですね。