フレームワークとツールの両面で完成度アップ！ 「Angular」バージョン7の新機能
次世代Webアプリケーションフレームワーク「Angular」の活用 第18回
ダウンロード サンプルファイル (791.0 KB)
本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回はAngularのPWA（Progressive Web Apps）機能でWebプッシュ通知を実装する方法を紹介しました。今回は2018年10月にリリースされたAngularのバージョン7を取り上げ、新機能を紹介していきます。
はじめに
Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS（AngularJS 1）と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。
2018年5月のバージョン6に続き、2018年10月にバージョン7がリリースされました。バージョン6に引き続きツール類の充実、速度向上や新機能追加などが行われました。
本記事では、Angularのバージョン7（以下「Angular 7」）の主要な変更点や新機能を、サンプルとともに説明していきます。
対象読者
- 常にAngularの最新動向を把握しておきたい方
- Angularをより深く使いこなしていきたい方
- できるだけツールに頼って楽をしたい方
必要な環境
Angularの開発ではTypeScript（変換してJavaScriptを生成する、いわゆるAltJS言語）を利用する場合が多く、本記事のサンプルコードもTypeScriptで記述しています。
今回は以下の環境で動作を確認しています。
-
Windows 10 64bit版
- Angular 7.2.0
- Angular CLI 7.2.1
- Node.js v10.15.0 64bit版
- Microsoft Edge 44.17763.1.0
- Google Chrome 71.0.3578.98（一部サンプルで利用）
サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve --open」コマンドを実行します。--openは、ブラウザーを自動的に起動するオプションです。
Angular 7へアップデートする方法
プロジェクトのAngular 7へのアップデートは、多くの場合、リスト1のコマンドで実行できます。
ng update @angular/cli @angular/core
プロジェクトによっては追加の手順が必要になる場合があります。詳細は「Angular Update Guide」で確認できます。
Angular CLIの対話入力でプロジェクトをカスタマイズ
Angularでは、コマンドラインでAngularプロジェクトの生成や実行などができるCLIツール「Angular CLI」が利用できます。Angular 7に対応したAngular CLIでは、「ng new」コマンドでプロジェクト生成時に、コマンドラインの対話入力でプロジェクトをカスタマイズできるようになりました。
プロジェクト生成時の対話入力では、表1の項目を指定できます。
| No. | カスタマイズ項目 | デフォルト |
|---|---|---|
| 1 | ルーティング機能 | 利用しない |
| 2 | スタイルシートの形式 | CSS |
スタイルシートの形式は、通常のCSSのほか、SCSSやSass、LESS、Stylusの各言語が選択できます。これらは変換してCSSを生成する、いわゆるAltCSS言語で、よりわかりやすい記述形式や、変数の定義・計算機能などの特徴や機能があります。詳細は各サイトを参照してください。
また、後述の、Angular Materialをプロジェクトに追加する「ng add @angular/material」コマンドでは、表2の項目を対話入力で指定できます。
| No. | カスタマイズ項目 | デフォルト |
|---|---|---|
| 1 | テーマカラー | Indigo/Pink |
| 2 | HammerJSによるタッチジェスチャー機能 | 利用する |
| 3 | ブラウザーアニメーション | 利用する |
なお、今回新たに、Angularの公式ドキュメントに、Angular CLIのコマンドリファレンスが整備されました。開発者は公式ドキュメントで、AngularとAngular CLIの両方の情報を参照できます。
この記事は参考になりましたか？
- 次世代Webアプリケーションフレームワーク「Angular」の活用連載記事一覧
- この記事の著者
-
WINGSプロジェクト 吉川 英一（ヨシカワ エイイチ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 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本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
