SHOEISHA iD

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

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

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

ツールが充実してさらに便利に! 「Angular」バージョン6の新機能

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


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

Angular Materialを利用した実装のテンプレートを生成

 Angular Materialは、Googleが提唱したデザイン「Material Design」に対応したコンポーネントです。Angular 6では、Angular Materialを利用した表2のテンプレートを、Angular CLIのコマンドで生成して利用できます。開発者は生成したテンプレートをもとに、機能を実装できます(テンプレートにはメニュー選択時などの実際の処理は含まれません)。

表2 Angular 6で提供されるAngular Material実装のテンプレート
名前 主な機能
Material Sidenav レスポンシブ対応のメニューリストと詳細を表示
Material Dashboard サブメニューを備えた複数のカードを並べて表示
Material Data Table 表示数切り替えとページングのUIがあるテーブルを表示

 本記事では、図9のMaterial Sidenavを例に、コマンドの利用方法を紹介します。

図9 Material Sidenavを表示するサンプル(P004-material-nav)
図9 Material Sidenavを表示するサンプル(P004-material-nav)

 Material Sidenavを追加するには、前述した「ng add @angular/material」コマンドでAngular Materialの機能を追加後、リスト8のコマンドを実行します。--nameオプションに指定された「my-nav」がタグ名で、アプリを実行すると<my-nav>タグの部分にMaterial Sidenavが表示されます。

[リスト8]Material Sidenavの実装を追加するコマンド
ng generate @angular/material:material-nav --name=my-nav

 リスト8のコマンドを実行すると、プロジェクトのsrc/app/my-navフォルダーに、Material Sidenavに対応するコンポーネントのコード一式が生成されます。

図10 生成されたMaterial Sidenavコンポーネントのコード(P004-material-nav/src/app/my-nav/my-nav.component.html)
図10 生成されたMaterial Sidenavコンポーネントのコード(P004-material-nav/src/app/my-nav/my-nav.component.html)

 ダウンロードできるサンプルにはMaterial Dashboard(P005-material-dashboard)とMaterial Data Table(P006-material-table)の例を含めています。これらのテンプレートを利用するコマンドの詳細は、公式ブログ記事を参照してください。

そのほかの変更点

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

サービスの記述方法変更によるアプリサイズ削減

 従来はモジュール定義ファイル(app.module.tsなど)のproviders属性に、リスト9のようにサービスを指定していました。

[リスト9]Angular 5以前でモジュールにサービスを指定する記述
@NgModule({
(略)
  providers: [MyService] // モジュールでサービスを指定
})
export class AppModule { }

 Angular 6からはproviders属性にサービスを記述せず、リスト10の通りprovidedIn属性をサービスに記述して、対象モジュールを指定するようになりました。「root」は、最上位のインジェクターにサービスを登録して、ルートモジュールで依存性注入できるようにする指定です。

[リスト10]Angular 6でサービスにprovidedIn属性を指定する記述
@Injectable({
  providedIn: 'root' // ルートモジュールで依存性注入できるよう指定
})
export class MyService { }

 この変更により、実際には利用されないサービスのコードをコード解析(Tree Shaking)で削除して、アプリのサイズを削減できるようになりました。

[補足]Tree Shakingの原理

 Tree Shakingでは、import/exportで参照されないコードを削除します。Angular 5以前(リスト9)では、モジュール定義ファイルでMyServiceを必ずimportする必要があるので、実際に利用しない場合でも、Tree ShakingでMyServiceのコードを削除できません。

 一方、Angular 6以降の記述法では、モジュール定義ファイルとサービスで互いをimportする必要がないため、Tree Shakingが有効に機能します。

アニメーションのPolyfillが不要に

 アニメーション処理に利用していたWeb Animations APIのPolyfill(互換ライブラリー)が不要になりました。

RxJSのアップデート

 Angularが依存するRxJSライブラリーがバージョン5から6にアップデートされました。従来との互換性を確保するライブラリー(rxjs-compat)が利用できます。

Angular MaterialとCDKの改良

 Angular Materialと、その一部機能を単独利用できるように分離したCDK(Component Dev Kit)に改良が加えられました。ツリービューや、iOSアプリのアイコンに表示されるようなbadge、画面下からせりあがるbottom-sheetコントロールが利用できるようになり、画面にオーバーレイを表示するoverlayに、新しい位置設定処理が追加されました。

サポート期間の変更

 従来はバージョン4と6のみがLTS(Long Term Support、長期間サポート)の対象でしたが、今後はバージョン5を含めたすべてのバージョンにLTSが提供されます。LTSでは、リリース後6カ月間の新機能アップデートと、その後12カ月のバグフィックスやセキュリティフィックスが提供されます。

[補足]新描画エンジンIvyは次バージョンに持ち越し

 Angularの次世代描画エンジンとして開発されている「Ivy」は、Angular 6には含まれませんでした。開発は続いており、将来バージョンでの採用が見込まれます。

まとめ

 本記事では、2018年5月にリリースされたAngular 6について、主な変更点や追加機能を説明しました。

 Angular CLIや周辺ライブラリーの新機能を活用すると、開発者はプログラムの本質的な実装により集中できるようになります。一方で、Angular Elementsの機能追加やIvyなど、進歩の余地も残されており、さらなる改善も期待できます。

 次回は、Angular CLIのコマンドでWebページ全体のテストを実行する、e2e(End-to-End)テストについて説明していきます。

参考資料

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

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

もっと読む

この記事の著者

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

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング