インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

トップ > Angular > Angular 4 以降における主要な機能のご紹介

Angular 4 以降における主要な機能のご紹介

Angular
Facebook Twitter Pocket Hatebu

Google Angular フレームワーク(以降 Angular) 4 以降の、主要な機能の特徴をご紹介致します。この記事を通して、現在運用している Angular アプリケーションのバージョンアップを行うことで、どのような機能を利用できるようになるのかを俯瞰することができます。既存の Angular アプリケーションのバージョンアップを検討している方は、是非この記事を活用し、情報収集の一助にしていただければと思います。

ポイントは「開発生産性の向上」と「実行時パフォーマンスの向上」の二つ！

Angular 4 以降で提供されている主要な機能は、大きく分けて「開発生産性の向上」に寄与する機能と、「実行時パフォーマンスの向上」に寄与する機能の二つに分類することができます。

※ より細かく、各バージョンで提供された機能を確認するには、こちらのページを参照下さい。 blogs.jp.infragistics.com

それでは Angular 4 以降の、主要な機能を見ていきましょう。

主要な機能の紹介

Angular 4

  • Reactive Programming 対応強化 (開発生産性の向上) - シンタックスの簡素化、テンプレート機能が機能強化されたことにより、生産性の向上が見込まれる。例) async as によるテンプレート内変数の宣言 (URL1, URL2)
  • Angular Universal (実行時パフォーマンスの向上)  - アプリケーションをサーバーサイドで生成(サーバーサイドレンダリング)することができる。Angular Universal を利用することにより、次のメリットがある。
    • 通常の Angular アプリケーションと比較し、画面をより高速に表示することができる。
    • アプリケーションに対する SEO 対策を実施することができる。

Angular 5

  • PWA サポート (開発生産性の向上) - Angular に PWA 用パッケージが追加されたことで、素早く PWA を構築することができる。PWA に対応することにより、次のメリットがある。 (URL)
    • Web プッシュ通知（Android のみ対応）
    • オフラインでの動作
    • ネイティブアプリケーションに近いユーザーインターフェースの実現

Angular 6

  • Tree Shaking (実行時パフォーマンスの向上) - バンドルサイズの縮小化を実現することができる。 バンドルサイズを縮小化することにより、次のメリットがある。
    • サーバー費用(トランザクション毎の課金の場合) クラウドサービスなどを利用する際に、トランザクション毎に課金が発生する際に、サーバー費用を抑えることができる。
    • 初期起動 (初回読み込み)
    • 実行時パフォーマンス（実行時のブラウザのメモリ消費量）

Angular 7

該当する新機能なし。

Angular 8

  • Differential Loading (実行時パフォーマンスの向上) - モダンブラウザとレガシーブラウザで読み込むモジュールを切り替えることができる。モダンブラウザ対応モジュールはファイルサイズを小さくすることでパフォーマンス改善を図ることができる。
  • Web Worker サポート (実行時パフォーマンスの向上) - Web Worker を利用することで、CPU に負荷のかかる処理をバックグラウンドスレッドで実行することができる。これにより、メインスレッド(UI スレッド)への負荷を軽減でき、UI のフリーズを回避することができる。

Angular 9

  • Ivy Rendering (実行時パフォーマンスの向上、開発生産性の向上) - Ivy Rendering により、生成されるアプリケーションのバンドルサイズを縮小することができ、アプリケーションの読み込み速度の向上が期待できる。また、単体テストのパフォーマンス向上も期待できる。(URL)

バージョンアップ実施の判断

Angular は半年ごとに新しいバージョンがリリースされます。Angular のサポート期間は 18 か月となっており、最新バージョンへの追従が推奨されています。詳細は、次のブログ記事をご参照下さい。

Angular フレームワーク、Ignite UI for Angular との付き合い方https://blogs.jp.infragistics.com/entry/2020/09/10/111549

Angular フレームワークを採用したらバージョンアップ頻度を考えようhttps://blogs.jp.infragistics.com/entry/2020/09/11/103858

バージョンアップに踏み切る理由 また、弊社がバージョンアップのお手伝いをさせていただいたお客様が、バージョンアップを決断された主な理由を挙げてみます。

  • バージョンアップを重ねるごとに、Angular に対する、継続的なパフォーマンス改善が実施されている。実行時パフォーマンスを改善したかったため、バージョンアップを行った。 最新バージョンにバージョンアップすることで、Google によるサポートを受けることができる。
  • その他にも、Angular 及び Angular が依存しているライブラリは定期的に更新されており、依存するライブラリ(例: TypeScript, RxJS など)の最新機能や不具合修正を目的としたバージョンアップも考えられる。

バージョンアップをせずに、サポートを終了しているバージョンを使い続けると、次のようなリスク・懸念が生じることにもご留意下さい。

  • 重篤な不具合が発見された場合においても、修正は提供されない。(2020年9月30日現在、Angular 2 ~ 7 に対する Google のサポートは終了している。)
  • 最新ではないバージョンを利用することは、Angular が依存するライブラリ(例: TypeScript, RxJS など)の最新機能や不具合修正を利用することができない。
  • ウェブ検索において、古いバージョンの情報は取得しずらくなっていく。(例：Stackoverflow などのサイトで提示されている問題解決の方法が、新しいバージョンで提供された機能に終始している。)