Rのつく財団入り口スマートフォン用の表示で見るRのつく財団入り口ITエンジニア界隈で本やイベント、技術系の話などを書いています。変化が激しくて自分的には追いつけていないWebフロントエンドの最先端、JavaScriptのフレームワーク群。2017年秋現在、おおまかに最有力なのはGoogleが推しているこのAngular(アンギュラー、アングラー)とFacebook製のReactの2強、3番手がVue.jsあたりな感じなのでしょうか。(最前線の方、違ったらスミマセン)最新のAngular4に対応してがっつり解説している『Angularアプリケーションプログラミング』。2017/8/4に出たばかりの新刊です。僕は仕事で直近で触るわけではないのですが、将来ひょっこり出てくるかもしれないので参考のために読んでみました。Rails4アプリケーションプログラミング』、『改訂新版JavScript本格入門』や『独習~』シリーズを始め著者多数、そういう意味でも安心できる本です。Amazonの評価もかなり高いですね。大型本512頁と分厚く、手厚くしっかりと最新フレームワークを解説しています。Googleの一文も眩しい赤い盾にAのマークのAngularはAngularJSとして2012年6月にバージョン1。2016年9月に後方互換性を捨ててアーキテクチャを一新してバージョン2、名前の末尾の赤文字のJSが消えてAngularとなっています。今年の2017年3月、内部の進んだ機能のバージョン番号コンフリクトを避けるために3を通りこしてバージョン4がリリース。ググったりするときにangularと入れるとよく末尾にjsが勝手に補完されて違うコンテンツが出てきたりするので注意が必要ですね。今後もなんと6ヶ月単位でメジャーバージョンアップ......ということでもうAngular5が間近なのだから動きが速くてすごいというか恐ろしい。計算すると2017年9月-10月になるはずですがまだアナウンスは出ていないようですね。以下、読んで学んだことの整理も兼ねて紹介を。イントロダクションJavaScript界隈の最新状況やAngularのさわりなど。Googleが推しているフルスタックなフレームワークだけあって、ほぼAngularが1位とのこと。独特なフォルダ構成、動かし方、ファイルの中身や設定ファイル類の話。非常に大雑把にいうと、1つのAngularアプリケーションの中はAngularの構成要素をまとめるモジュールが複数。モジュールの中に、Angularが用意している機能があったり画面を構成するコンポーネントがまた複数。1画面を構成するのは親がルートコンポーネント1つで、その下にコンポーネントが幾つでも置ける。ような拡張子tsのTypeScriptファイル1つが1コンポーネント。先頭にAngular独特の書き方でインポート文的なやつとか指定を記述。{{name}}</h1>`,})のように、selectorでAngularのコンポーネントがこのカスタムタグの中に入るというのを指定。HTMLの中では<my-app>と書くことになります。タグの中身のHTMLの実体や値が可変な部分をAngularの書式で書く。これが「テンプレート」で、アーキテクチャパターンでいうところのViewに相当。'Angular';}のように処理を書く。これが「コンポーネント(クラス)」で、アーキテクチャパターンのViewModelに相当。テンプレートとコンポーネントクラスの組でひとつの「コンポーネント」単位が完成。......という、MVCパターンに慣れた身だとこのへんの書き方からして、もう新しい世界が始まっています。データバインディングAngularを特徴づけるバインディングは4種類。これもざっとまとめると以下のようになるかと思います。■Interpolation(補間)コンポーネントクラス側(=プログラム側、ViewModel側)から、テンプレート(=View側)に値を渡せる。MVCパターンで言うとHTMLテンプレート内の置き換え記号の箇所に、Controller層とかのクラスから値をはめ込むのと同じ。プロパティ/属性/クラス/スタイルバインディングAngularはそれだけでなく、タグの色替えとかclass指定、Style指定なども柔軟に渡せる。HTMLタグの属性は初期値、プロパティは現在値と定義されている。イベントバインディングテンプレート側(=View)でイベントが起こると、コンポーネントクラス側(=ViewModel)のイベントハンドラーに処理を渡せる。/>でやっていたようなこと。イベント名がJSと微妙に違うのに注意。双方向バインディングそしてAngularではさらに、テンプレート~コンポーネントクラス双方で、データの変更を検知してもう一方に渡す動きができる。ようにUNIX/Linux系ではお馴染みのパイプ構文的に書くと、値段をカンマ区切りにしたり通貨記号を付けたりyyyy/mm/dd形式にするなどの文字列操作をしてくれる「パイプ」の仕組みの話。テンプレート内、HTMLに近いところに書けます。これも従来のMVCフレームワークだと画面表示の前にController層やその前のロジック側で調整して画面側に渡したりする場合もあるので、新しいですね。Angularの先頭の"An"だと不定冠詞と間違うからか、2文字目3文字目の"ng"を使うようです。goodと言うそうなので問題ないのでしょうか。このの繰り返し処理ははtrackBy関数を使ってキーになる値を指定しておくと、配列の中で新しくなった1行だけを更新してくれるそうです。うーんもう画面をリフレッシュしての再検索すらいらなくなるんですね。フォーム開発Web開発で必須のフォーム周りの話。これらのWebフォームでよく使うタグ要素がAngularで拡張されており、バリデーション処理などが指定できるようになっています。ラジオボタンやチェックボックス、セレクトボックスなどもAngular拡張の書き方をします。ファイルアップロードの手法は、コンポーネントクラス内でhttp.postで組み込み関数を使う、AjaxやjQueryの非同期通信でよく見るのと同じような書き方で通信メソッドを記述するもの。通信先のサーバサイドは本書ではPHPを例にしており、upload.phpとしてよくあるいつもの処理をしていました。ほか、バリデーション処理をコンポーネントでなくコンポーネントクラス側に外だしするやり方も。大規模なアプリだとこちらになるのかなと思います。コンポーネント開発コンポーネントのさらに詳細、入れ子にする方法など。.tsファイルの先頭にimport文、@NgModule文を書いていくのですが色々指定があります。コンポーネントのライフサイクルとして、コンポーネントクラスが生成されてから消えるまでのngOnChanges等々各サイクルについて。これは他のフレームワーク類でも基底クラスの解説などでよく出てきますね。他、コンポーネントのスタイル指定方法やアニメーション、META情報を操作する方法など。サービス開発ここで一気に話が広がります。Angularのコンポ―ネントクラスはメンバ変数で「サービス」のレイヤーに属するサービスクラスのインスタンスを持ち、this.bookservice.getBooks()のように、本来はテンプレート→コンポーネント→その先のサービスを呼んでビジネスロジックを処理する。本書で明言されてはいませんがM-V-VMパターンのModelに相当するのがサービスとその先なのでしょう。付けると依存性注入が行え、最初からDIの考え方が入っています。JavaならSpringフレームワークのように生成するクラスを自動で管理するDIコンテナの役割を、Angular自体がやってくれるイメージです。僕はジツはふだん他言語でDIを活用していないのでDIのよさがあまり実感できていないのですが(w)、最初からこういう仕組みが入っているのはやはりモダンな今風のフレームワークだなと思いました。便利なのはやはり、固定値を返したりする別のモックなサービスを注入して単体テストを自動化する際でしょう。このAngular上のサービスは自分でも作れますが、Angularが用意しているサービスもいろいろあります。その名もそのまんまのHttpサービスを使うとサーバサイドとの非同期通信に。書く辺りは従来のAjaxぽいですね。Padding)が使えるJsonpサービスもあります。Extensions)を解説するコラムなど。Angularはフルスタックなフレームワークと謳われていたので最初はサーバサイドの処理もAngularでやるのかなと誤解していたのですが、そうではなくてAPI的な通信先は従来のMVCパターンのサーバサイドとだいたい同じなんですね。本書ではサーバサイドの通信先にはPHPを例にとり、サーバ側では$_POSTや$_GETでリクエストの中身を取得するお馴染みのよくあるコードがサンプルになっています。他、WebAPIをエミュレートできる便利なライブラリの紹介やセキュリティ関係。クロス・サイト・リクエスト・フォージェリは情報セキュリティの本だと略称"C"SRFだったりしますが本書だともう"X"SRFになっています。他にも<script>要素の工夫でJSONデータを盗めるクロス・サイト・スクリプト・インクルージョン(XSSI)とその対応方法もあり、セキュリティ関係は変化が速く、そしてAngularは最新状況に対応し続けているんだなと感じました。ルーティングMVCパターンのモダンなWebアプリケーションフレームワークがだいたい備えているURLルーティングと同じような機能。パスに対応するのが画面を表示するコントローラクラスだったりするところが、Angularの場合はコンポーネントに変わります。遷移のリダイレクトやパラメータ渡し、#までの指定、前方一致や遷移をガードする方法など、ルーティング回りでよく必要になる機能は一通り揃っている印象。データを全部取得してから初めてコンポーネントを描画するResolverという仕組みもあります。他、コラムでコラムでコードスタイルガイドや関連ツールなども。いうおまけ情報も充実しています。最初の例は文字列の前後をTrimする機能から、各種自作方法について。属性ディレクティブや構造ディレクティブの作り方も解説されています。テストAngular界隈にもテスティングフレームワークが各種あるそうですが、標準がJasmine。Rubyで有名なRSpecと似ていて英文に近い構文が書けます。テスト実行ツールはKarmaを使うことが多いとのことで、このJasmine+KarmaのセットがAngularのデフォルトとのこと。JasmineのテストコードのMatcherメソッドの構文例が載っていますが、toBeXyz...()のような名称で面白いですね。xUnit脳だと結果を真偽値型に持って単純にassertTrue()とかassertFalse()とかつい書いてしまうのですが、JasmineだとtoBeTruthy()やtoBeFalsy()と書くんですね。ような独特の書き方をします。テスト対象が依存するコードを置き換えるダミーコードを「テストダブル」と呼ぶ考え方があり、テストダブルの種類にはダミー、フェイク、スタブ、モック、スパイがあります。テスト対象のコードに割り込んで回数などを記録するオブジェクトを「スパイ」と呼ぶのはちょっと面白かったです。これはAngualar独自の概念かと思いきや、他のテスティングフレームワークやテスト駆動開発界隈でも前からある考え方のようです。End)テストと呼び、こちらはProtractorというテストランナーを使用。Driverが入っており、ボタン押したり要素の値を取ったりと色々できるようです。テスト回りもAngular自体に自動化の仕組みが最初から色々取り入れられているのは、流石モダンでフルスタックなフレームワークだなと感じました。Googleで出しているAngular製のプロダクトなんかはこのへんを徹底して自動化したりしてそうです。CLIアプリの構造を視覚化するAuguryは、Chromeの拡張機能で用意アプリを事前コンパイルするAoTコンパイルが解説されています。CLIはrailsなどのコマンドみたいな感じですが、本書では大きくは取り上げられていませんが実際にはよく使いそうです。TypeScript簡易リファレンスJavaScriptに型を追加して拡張したAltJSの代表、TypeScriptの解説つき。この付録が役に立ちます。以下のサイトで実際に試せます。www.typescriptlang.org変数宣言は:の後に型指定。このへんはKotlinに近い。テンプレート文字列のデータ型は${}で、PHPのSmartyエンジンなんかと同じ。アロー関数で匿名関数がシンプルに。関数のオーバロードで型にany型というのをつけられる。ように型を複数持てるのが便利そう。外側からメンバ変数名を指定すると、実際には対応メソッドが呼ばれるget/setアクセサがある。このへんはC#やPythonの仕組みと似ている。インターフェースはいらないけど型は明確にしたい場合に、オブジェクト型リテラルがある等の特徴があります。信頼できる本だけあって各章とも丁寧に、分かりやすく解説してあります。Anguar自体はけっこう難しいと感じたのですが(笑)、その敷居が少しでも下がるかと思います。章の下の節(でいいのかな)が細かい単位で分かれているため、内容が高度で難しくても切れ目が多く、挫折しそうになっても頭を切り替えて読み進めることができます。図表も多く、注釈もしっかり書いてあるので理解の助けになります。オールJavaScript(正確にはTypeScriptですが)、SPAのフレームワークは根本の考え方や概念、アーキテクチャからまったく違うので図で理解するのは大事ですね。サンプルコードも豊富で、どれもHTML的にはカスタムの<my-app>タグをテンプレートで埋め込むという形で例を載せており、理解の助けになります。これこれはこういう省略系も使えるけどこうきちんと宣言した方がよい、なぜなら~という感じで、実際に動かして使って苦労したりしたのであろう、実践テクニックも随所に見られます。Angular自体の感想:なかなかむずい!よくAngularはWebフロントエンドJavaSciptのフレームワーク群の中では比較的習得難易度が高い、習得にコストが掛かるなどとネットでも言われていますが、だいたい同じような感想を持ちました。本書は非常によく作られていると思うのですが、うーんけっこう難しそうですね。カッコ類の独特の使い方などが。なんというか、PHPやRubyやPythonなんかの構文が理解できました!なととは別の次元、別の種類の難しさのようなものを感じます。アーキテクチャやファイル構成、概念からして新しいからでしょうか。Applicationだと1画面に集約してコンポーネント単位になる訳ですから全く話が違ってきます。親のHTMLの1画面の中でどこにコンポーネントを配置するかの整理、コンポーネントの階層構造、コンポーネントの粒度を事前にしっかり定義して取り掛からないとチーム開発では簡単にめちゃくちゃになってしまいそうだなと感じました。同様に本書ではサーバサイドのAPI的な口の例はPHPで書かれていますが、こちらのAPIの数や粒度についても方針を立てておかないとサーバ側で別れて複数人で開発した時に連携が崩れてしまいそうだなと思いました。Angularに限らずなんでもそうですが、コードを書く前の設計は大事だねということですね。実際の例として本書では、イイネが0件/1件/2件以上~で分岐して表示を変えたりするコンポーネント、テキストエリアで入力中に残り文字数を計算して動的に表示するコンポーネントなど、Webの最前線で見るような仕組みも取り上げられており、「こうやって作るのか!」と実感できたりします。なんにせよ本書のおかげで新世界の実体が大まかにでも分かりました。習得のハードルがやや高く、そしてバージョンアップの変化も速い、日本語の情報もまだ多くはない、Qiitaや技術ブログ系で一番進んでいる人たちが取り組んでる感じ......とハードルが何重にもありますが、それを乗り越えて採用して開発してプロダクトを作り上げると......今のWebの本当の最前線、すごい動きをしちゃうWebアプリが作れそうだなあと思いました。Angular4を扱った本というとこちらの『はじめてのAngular4』もより先に出ていますが、ネットの反応やカバー範囲を見ると1冊選ぶとしたら本書なのかなという感じです。単行本この商品を含むブログを見るAngular2が2016年2月、そしてこの『Angular2によるモダンWeb開発』が出たのが2017年2月です。本屋でも割と見かけますね。アプリケーションプログラミング』が2015年8月。当時評判も良かったようですが2017年からするともう時代遅れということになります。これがJavaの本だったら2015年の本なんてまだまだ通用するのになあ。~モダンスタイルによる基礎から現場での応用まで』。最近のJavaScript本も幾つかありますが、この本は特に評価が高いですね。最近話題になることも多いJSフレームワーク群。GWも終わって平常運転再開です。»プロフィールなのだid:iwasiman引退した元TRPGゲーマー。COBOLですらなくPL/Iの金融系レガシー紙駆動開発から脱出→国産メーカー系SIerな企業のITエンジニア&アーキテクト。SEだけど仕事はほぼソフトウェアエンジニアとして、Web開発でコードを書いたり技術を追ったり時々イベントに行ったり、楽しいエンジニアリングを目指しています。.NETPythonpixivJavaThink<書くことは考えること>TRPGRubyHTMLリンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!iwasimanさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。