SHOEISHA iD

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

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

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

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

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


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

 本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回は、Angular CLIのコマンドで実行できる単体テストについて説明しました。今回は、2018年5月にリリースされたAngularの最新版バージョン6を取り上げて、変更点や新機能を紹介します。

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

はじめに

 Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS(AngularJS 1)と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。

 2017年3月のバージョン4、同11月のバージョン5に続き、2018年5月にAngularの最新版となるバージョン6がリリースされました。バージョンでは、ツールや周辺ライブラリーを中心に、さまざまな改良が行われました。

図1 バージョン6のリリースを告知する公式ブログ記事(https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4)
図1 バージョン6のリリースを告知する公式ブログ記事

 本記事では、Angularのバージョン6(以下「Angular 6」)で変更された点や新機能を、サンプルとともに説明していきます。

対象読者

  • Angularをより深く使いこなしていきたい方
  • Angularの新しい機能や変更点を確認したい方
  • できるだけツールに頼って楽をしたい方

必要な環境

 Angularの開発ではTypeScript(変換してJavaScriptを生成する、いわゆるAltJS言語)を利用する場合が多く、本記事のサンプルコードもTypeScriptで記述しています。

 今回は以下の環境で動作を確認しています。

  • Windows 10 64bit版
    • Angular 6.0.2
    • Angular CLI 6.0.1
    • Node.js v8.11.2 64bit版
    • Microsoft Edge 42.17134.1.0

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve --aot --open」コマンドを実行します。--aotは、実行前にスクリプトの変換処理をまとめて行うオプション、--openは、ブラウザーを自動的に起動するオプションです。

[補足]Angularと関連ツール・ライブラリーのバージョン番号統一

 従来、Angularのバージョン5.2に対応するAngular CLIがバージョン1.7.4といったように、バージョン番号が統一されていませんでしたが、今回のアップデートからAngularとAngular CLI、後述するAngular Material+CDKのメジャーバージョンが6に統一されました。マイナーバージョンは統一されず、プロジェクトごとに個別に増えていきます。

Angular CLIの改善

 Angularでは、Angularアプリの開発を支援するCLIツール「Angular CLI」が利用できます。以下では、Angular 6で追加された機能を紹介します。

パッケージを更新するupdateコマンド

 「ng update <パッケージ名>」コマンドは、指定したパッケージと依存パッケージを更新して、さらに必要となる修正をソースコードに適用します。例えば、「ng update @angular/cli」コマンドは、従来のプロジェクトをAngular 6から導入されたワークスペースに変換します(ワークスペースについては後述します)。

 Angular CLI自体を先にアップデートする必要があるため、まずシステム全体にインストールされたAngular CLIと、プロジェクトに含まれるAngular CLIを両方ともアップデートします(第12回を参照)。次に、リスト1のコマンドを実行します。

[リスト1]AngularアプリをAngular 6にアップデートするコマンド
ng update @angular/cli   # プロジェクトをワークスペースに変換 ...(1)
ng update @angular/core  # Angularをアップデート ...(2)
ng update                # ほかのライブラリーに更新がないか確認 ...(3)

 (1)は、Angular CLIをアップデートするコマンドです。実行時点でAngular CLI自体はすでに最新になっていますが、プロジェクトをワークスペースに変換するために実行します。(2)で、Angular本体と依存パッケージをアップデートします。(3)は、ほかにアップデートが必要なパッケージを確認するためのコマンドです。アップデートが必要なパッケージが表示されたら、必要に応じてng updateコマンドで更新します。

 Angular CLI 1.7.4で生成したAngular 5.2のAngularアプリを、リスト1のコマンドでAngular 6にアップデートすると、図2のようにパッケージのバージョンが更新されます。

図2 アップデート前(写真=上)とアップデート後(写真=下)のpackage.json
図2 アップデート前(写真=上)とアップデート後(写真=下)のpackage.json

 アップデート前(P001-update)とアップデート後(P001-update_Angular6)のソースコードをサンプルに含めているので参考にしてください。

[補足]Angular Update Guideページで案内されるAngular CLIの更新方法

 Angularアプリのコードをアップデートする方法は、Angular Update Guideで案内されています。

図3 Angular Update GuideのWebページ
図3 Angular Update GuideのWebページ

 WebページでAngularバージョンなどの条件を指定すると、アップデート方法を表示できます。

図4 Angular Update Guideで表示されるアップデート方法の例
図4 Angular Update Guideで表示されるアップデート方法の例

 Angular Update Guideでは、Angular CLIを更新するリスト2のコマンドが表示されますが、アップデート前のAngular CLIのバージョンによっては正しく更新できない場合があります。その場合、前述の方法でAngular CLIを更新してください。

[リスト2]Angular Update Guideで表示されるAngular CLIの更新コマンド
npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli

Angularアプリに機能を追加するaddコマンド

 「ng add <パッケージ名>」コマンドで、Angularアプリに特定の機能を追加できます。公式ブログ記事では、表1の機能が案内されています。

表1 ng addコマンドで追加できる機能
パッケージ名 追加される機能
@angular/pwa PWA(Progressive Web App)
@ng-bootstrap/schematics ng-bootstrap(Bootstrap UIコンポーネント)
@angular/material Angular Material(後述)
@clr/angular@next Clarity(VMwareのUIコンポーネント)
@angular/elements Angular Elements(後述)

[補足]PWA(Progressive Web App)

 PWAは、Webページにアプリアイコンなどを設定するファイル(Web App Manifest)、オフライン表示やバックグラウンド処理を実現するService Workerなどを利用して、ネイティブアプリのような使い勝手を提供するモバイルWebページです。

 Angular MaterialとAngular Elementsは、本記事の後半で利用例を紹介します。

次のページ
複数のプロジェクトをまとめて管理できるワークスペース

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

  • 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/10850 2018/07/05 11:46

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング