進化を続けるJavaScriptフレームワーク「Angular」バージョン5の変更点

次世代Webアプリケーションフレームワーク「Angular」の活用 第11回

フォームの新しい検証タイミング

　従来、Angularのフォームは入力内容が変更されるごとに検証が行われていましたが、Angular 5ではフォーカスが外れたタイミングや、サブミットしたタイミングで検証を行えるようになりました。

フォーカスが外れたタイミングの検証

　フォーカスが外れたタイミングでの検証について、図5のサンプルで説明します。2個のテキストボックスは両方とも、4文字以上入力しないと検証エラーになりますが、上のテキストボックスはフォーカスが外れるまでは検証が実行されず、エラーが表示されません。下のテキストボックスは内容が変更されるごとに検証され、エラーが表示されます。

図5　フォーカスが外れたタイミングの検証サンプル（P006-forms-blur）

　図5の上のテキストボックスに対応するinputタグはリスト10です。（1）のngModelOptions属性に「updateOn:'blur'」を指定すると、フォーカスが外れたタイミングで検証を実行するようになります。

リスト10　フォーカスが外れたタイミングで検証する実装（P006-forms-blur/src/app/app.component.html）

<input class="form-control" type="text" name="name1"
  ngModel minlength="4" #name1="ngModel"
  [ngModelOptions]="{updateOn: 'blur'}"><!-- （1） -->

サブミットしたタイミングの検証

　サブミットしたタイミングでの検証について、図6のサンプルで説明します。テキストボックスに4文字以上入力しないと検証エラーになりますが、上のフォームではサブミットボタンを押すまで検証が実行されません。下のフォームではテキストボックスの内容が変更されるごとに検証され、エラーが表示されます。

図6　サブミットしたタイミングの検証サンプル（P007-forms-submit）

　図6の上のフォームに対応するformタグはリスト11です。（1）のngFormOptions属性に「updateOn:'submit'」を指定すると、サブミットしたタイミングで検証を実行するようになります。

リスト11　サブミットしたタイミングで検証する実装（P007-forms-submit/src/app/app.component.html）

<form [ngFormOptions]="{updateOn: 'submit'}"><!-- （1） -->

そのほかの変更点

　Angular 5では、ほかにも以下の変更が行われました。

ルーターのライフサイクルイベントが追加

　遷移するかどうかの判定開始から、遷移後画面の表示完了までの処理を追跡できる、新しいライフサイクルイベントが追加されました。処理中表示やパフォーマンス測定に利用できます。

Angular Universalの改善

　サーバーサイドでAngularを動作させるAngular Universalで、アプリケーション状態をサーバー側とクライアント側で共有する実装を、より簡単に実現できるようになりました。

exportAsの複数指定

　コンポーネントやディレクティブをエクスポートする名前を指定するexportAs属性に、カンマ区切りで複数の名前が指定できるようになりました。過去互換性を確保しながら名前を変えることができます。

プロジェクトをAngular 5対応に更新する方法

　既存のプロジェクトをAngular 5に更新する方法は、Angular Update Guideで案内されています。アップデート前後のAngularバージョンとアプリの複雑さなどを指定すると、アップデート方法が表示されます。

図7　Angular Update GuideのWebページ

　Angular Update Guideで案内される、アプリの複雑さが単純（Basic）なアプリのアップデート方法を説明します。Angular 5で非推奨になった「template」タグを、Angular 4で導入された「ng-template」に変更して、上述のPipesに関する調整を行ったあと、リスト12のコマンドでAngularとTypeScriptを更新します。更新後、上述のHttpClientへ対応する修正を行います。

リスト12　AngularとTypeScriptを更新するコマンド

npm install @angular/animations@'^5.0.0' @angular/common@'^5.0.0' @angular/compiler@'^5.0.0' @angular/compiler-cli@'^5.0.0' @angular/core@'^5.0.0' @angular/forms@'^5.0.0' @angular/http@'^5.0.0' @angular/platform-browser@'^5.0.0' @angular/platform-browser-dynamic@'^5.0.0' @angular/platform-server@'^5.0.0' @angular/router@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2'

npm install typescript@2.4.2 --save-exact

Angular 5以降の見通し

　Angular 5は2017年11月にリリース後、マイナーアップデートが行われて、2018年2月現在はバージョン5.2になっています。変更の詳細はAngular公式ブログ（5.1／5.2）で案内されています。

　次のメジャーアップデートとなるバージョン6（Angular 6）も開発が進んでいます。2018年2月現在はベータ版の状態で、そう遠くないうちにリリースされる見込みです。

まとめ

　本記事では、2017年11月にリリースされたAngular 5について、主な変更点や追加機能を説明しました。速度改善やサイズ縮小を実現する修正や、便利な機能追加が行われました。今後も定期的なメジャーアップデートが行われる見込みです。

　次回は、Angularアプリの作成に欠かせなくなったコマンドラインツール「Angular CLI」について説明していきます。

参考資料

• Angular
• AngularJS