「Angular」17の新機能を解説──シンプルで使いやすい記法が多数登場！

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

　本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回紹介したバージョン15、16に引き続き、今回は2023年11月にリリースされたバージョン17について、変更点や新機能を紹介していきます。

はじめに

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

　2023年5月の前回記事では、Angularのバージョン15と16について変更点や新機能を紹介しましたが、その後2023年11月に、Angularのバージョン17（以下「Angular 17」と記述）がリリースされました。本記事では、Angular 17の主要な変更点や新機能を説明していきます。より詳細な情報や変更点は、Angularの公式ブログ記事を参照してください。

対象読者

• Angularの最新動向を定期的にチェックしておきたい方
• 既存のAngularソースコードを最新版に追従する必要がある方
• これまでAngularの学習や活用が大変と感じていた方

必要な環境

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

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

• Windows 10 64bit版
• Angular 17.0.8
• Angular CLI 17.0.9
• Firebase CLI 13.0.2
• Node.js v20.10.0
• Microsoft Edge 120.0.2210.121

　サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve」コマンドを実行して、「http://localhost:4200」をWebブラウザーで表示します。

一新されたブランドロゴとドキュメント

　「急速に進化するAngularに対して追いついていなかった」ということから、Angularのブランドロゴが一新されました。

図1 Angularのブランドロゴ（右が新しいもの）

　また、従来の公式ページangular.ioに代わる新しい公式ページとしてangular.devが公開されました。angular.devでは、従来より提供されていた技術資料やAPIリファレンスに加えて、Webブラウザー画面上でインタラクティブにAngularを試せる環境が「Playground」として提供されます。この環境はチュートリアルでも利用でき、Angular CLIをローカルにインストールしなくてもAngularを実際に動作させて学習できるようになりました。

図2 angular.devのPlayground