CodeZine(コードジン)

特集ページ一覧

大きく進化した「Angular」バージョン9、次世代レンダリングエンジン「Ivy」を中心に機能紹介

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回は2019年5月にリリースされたAngularのバージョン8を紹介しましたが、それから半年以上経過した2020年2月に、次バージョンとなるバージョン9がリリースされました。今回はAngularのバージョン9について、主要な変更点や新機能を紹介していきます。

目次

はじめに

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

 2020年2月に、Angularのバージョン9がリリースされました。Angularのバージョンアップはおおむね半年ごとに行われ、バージョン8のリリースが2019年5月だったことを考えると、予定より遅れてのリリースとなります。

図1:バージョン9のリリースを告知する公式ブログ記事
図1:バージョン9のリリースを告知する公式ブログ記事

 バージョン9は「過去3年間で最も大規模なアップデートの1つ」とうたわれており、バージョン8で導入された次世代レンダリングエンジン「Ivy」がデフォルト化されたほか、さまざまな改良が行われています。

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

対象読者

  • 常にAngularの最新動向を把握しておきたい方
  • 既存のAngularソースコードを最新版に追従する必要がある方
  • Angular 9の便利な新機能を見逃したくない方

必要な環境

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

 今回は以下の環境で動作を確認しています。比較用に使用したAngular 8のバージョンも以下に記載します。

  • Windows 10 64bit版
    • Angular 9.0.2 / 8.2.14
    • Angular CLI 9.0.3 / 8.3.25
    • Node.js v10.16.1 64bit版
    • Microsoft Edge 44.18362.449.0

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

プロジェクトをAngular 9対応にアップデートする方法

 既存のAngularプロジェクトをAngular 9対応にアップデートするには、Angular CLIの「ng update」コマンドが利用できます。公式ページでは、Angular 9へのバージョンアップ前に、まずリスト1のコマンドで、Angular 8の最終バージョンにアップデートすることを推奨しています。

[リスト1]プロジェクトをAngular 8の最終バージョンへアップデートするコマンド
ng update @angular/cli@8 @angular/core@8

 その後、リスト2のコマンドでAngular 9へアップデートします。

[リスト2]プロジェクトをAngular 9へアップデートするコマンド
ng update @angular/cli @angular/core

 プロジェクトによっては追加の手順が必要になる場合があります。詳細は「Angular Update Guide」や、Angular 9の公式ページで確認できます。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

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

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

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

バックナンバー

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

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5