Angular 14が正式リリース！その新機能とリリースポリシーを解説！

Angular 14が正式リリース

2022年6月3日、Angular 14が正式にリリースされました。主な機能追加として、スタンドアロンコンポーネントと型付きリアクティブフォームの2点が実装されました。これらは、コミュニティのRFC（Request for Comments）で要望の声が高かったものです。

【参考】：Angular v14 is now available!

Angularとは、フルスタックのオープンソースフレームワークを指します。Googleとコミュニティによって開発されました。JavaScriptのスーパーセットであるTypeScriptをベースとしています。 【参考】：Angular

TypeScriptは、JavaScriptを大規模プロジェクトで利用できるように改良したものです。フルスタックのフレームワークであり、ウェブユーザインターフェースの構築以外にも対応できます。コンポーネントベースでモジュールを構成し、複雑なウェブアプリケーションに対応できます。 【参考】：Angularとは何か？

TypeScriptとは？JavaScriptとの違いも解説！

Angularはウェブアプリケーション開発者向けに、以下の特徴を持ちます。 【参考】：Angular 特徴と利点

・クロスプラットフォームに対応 ウェブアプリケーションとしてあらゆるデバイスに対応できるほか、モバイルネイティブアプリと、Windows・Mac・Linux版デスクトップアプリを開発することも可能です。

・スピードとパフォーマンスに優れる 双方向データバインディングに基づくテンプレートにより、モデルとビューが追従します。最初のビューをサーバで表示し、サーバとの通信を最小にしてページを生成する、シングルページアプリケーション（SPA）の開発がしやすい特徴があります。

・生産性が高い コンポーネントベースで、小さな部品を組み合わせて使用するため再利用性が高まります。テンプレート構文が用意されているので、繰り返し登場するユーザインターフェースのビューが簡単に作成できます。

Angularの成り立ち

2009年に登場した初期バージョンは、Angular 1あるいはAngularJSと呼ばれ、JavaScriptをベースとしていました。その後TypeScriptに対応したことで、バージョン2.0以降の名称は単にAngularと言い、一般的には名称の後にバージョン番号を添えることがあります。

AngularJSは長らく提供を続けていましたが、2022年1月末をもってサポートが終了しています。 【参考】：Angular JS

Angularは、半年ごとにメジャーリリースを行い、頻繁に更新されています。マイナーリリースも、メジャーリリース毎に1〜3回実施されます。リリース6か月のアクティブサポートと、その後12か月の長期サポート（LTS）が提供されます。

【参考】：Angularのバージョンとリリース

Angular 14は、2022年6月2日にリリースされました。最新バージョンは、2022年8月3日にリリースした14.1.1です。アクティブサポートの終了は2022年12月2日、LTSのサポート終了は2023年12月2日を予定しています。

【参考】：Angularのバージョンとリリース 【参考】：Angular Releases v14.1.1

Angularは頻繁に製品の改良を重ねています。最新の情報は公式Twitterや公式ブログを購読することで入手できます。

【参考】：Angularプロジェクトを最新に保つ 【参考】：Twitter Angular 【参考】：Angular Blog

バージョン一覧はGitHubに掲載されており、固有バージョンの変更点も分かります。お使いの環境を移行する場合は参考にするのが良いでしょう。 【参考】：GitHub Angular

GitHubとは？メリットや使い方、Gitとの違いも徹底解説！

Angular 14の新機能

Angular 14の新機能ですが、主要な機能はスタンドアロンコンポーネント（Standalone Components）と型付きリアクティブフォーム（Typed Reactive Forms）の2つです。Angularは年に2度メジャーリリースを行っており、頻繁に新機能が提供されます。詳しくは、以降で解説していきます。

【参考】：Angular v14 is now available! 【参考】：Angular v14.0.0

スタンドアロンコンポーネントを使って、Angularコードのシンプル化を図ることができます。この機能は、RFCとして要望が高かったもので、デベロッパープレビュー版として提供されます。

【参考】：RFC: Standalone components, directives and pipes - making Angular's NgModules optional 【参考】：Getting started with standalone components

スタンドアロンコンポーネント実装により、@Component()から直接importを行うことができます。具体的には、”standalone: true”フラグを設定することで、@NgModule()を用いずにコンポーネント実装が可能です。Componentのほか、DirectiveやPipeでもこの実装が使用できます。

この機能も、RFCとして要望が高かったものです。AngularのFormGroupとFormControlsで、Typeをあらかじめ決めることで、オートコンプリートを強化し、より安全なフォームを作成することができます。深くネストされている複雑な場合に、型を厳密化することで安全性をより高めることができます。

【参考】：RFC: Strictly Typed Reactive Forms 【参考】：Typed Forms

拡張デベロッパー診断として、コンパイル時の警告とテンプレートに対する実行可能な提案を行い、実行前にバグを検出するためのフレームワークを提供します。現時点では、v13.2で含まれた2つの拡張診断が該当します。今後も、要望に応じて追加を予定しています。

【参考】：Extended Diagnostics

エラーコードを除去する手法であるツリーシェイクを用いたエラーメッセージも追加されています。上記の他にも、最新のTypeScript 4.7に対応するほか、CLIの改良なども行われています。

JavaScriptの主要フレームワーク

JavaScriptのフレームワークとは、JavaScriptによる開発を簡単に行えるように用いる枠組みのことです。Angularのほか、ReactやVue.jpが3大フレームワークとして人気があります。以降では、ReactとVue.jsについて解説していきます。

JavaScriptに関するフレームワークについて徹底解説！

Reactは、ユーザーインターフェース構築用のJavaScriptライブラリです。Facebook（現Meta）とコミュニティによって開発されました。小さなコンポーネントを組み合わせて複雑なインターフェースを構築することができます。 【参考】：React

Reactの将来性はVue超え？できることやメリット・デメリットも解説

Vue.jsは、Google出身のEvan Youによって開発されており、Angularの気に入っている部分を抽出し開発しています。構造がシンプルで学習しやすく、コーディングの手間が少ないことで人気があります。 【参考】：Vue.js

Vue.jsとは？すぐに分かる概要から特長・使い方まで解説！

ReactとVue.jsは、仮想DOMを利用していますので手間が少ないメリットがあります。とは言っても、AngularはTypeScriptベースで大規模システムに対応しやすい特長があり、人気がないわけではありません。そのため、実際の用途やシステム規模に応じて使い分けるのが良いでしょう。

ブログを定期的に確認しておきましょう

Angularは年に2度メジャーリリースを行っており、頻繁に新機能が提供されます。開発の母体はGoogleとコミュニティですので、精力的に活動していることが分かります。製品の改良が頻繁に実装されていることから、最新の情報を確認しておくのが良いでしょう。

最新情報は、公式Twitterや公式ブログを購読することで入手できますので、定期的に情報を収集することをおすすめします。