SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

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

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

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

図5 フォーカスが外れたタイミングの検証サンプル(P006-forms-blur)
図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 サブミットしたタイミングの検証サンプル(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ページ
図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.15.2)で案内されています。

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

まとめ

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

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

参考資料

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
次世代Webアプリケーションフレームワーク「Angular」の活用連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10689 2018/03/13 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング