![cover](/placeholder.png)
Angular 14が正式リリース
![img_angular14_01](/placeholder.png)
2022年6月3日、Angular 14が正式にリリースされました。主な機能追加として、スタンドアロンコンポーネントと型付きリアクティブフォームの2点が実装されました。これらは、コミュニティのRFC(Request for Comments)で要望の声が高かったものです。
【参考】:Angular v14 is now available!
Angularとは
Angularとは、フルスタックのオープンソースフレームワークを指します。Googleとコミュニティによって開発されました。JavaScriptのスーパーセットであるTypeScriptをベースとしています。 【参考】:Angular
TypeScriptは、JavaScriptを大規模プロジェクトで利用できるように改良したものです。フルスタックのフレームワークであり、ウェブユーザインターフェースの構築以外にも対応できます。コンポーネントベースでモジュールを構成し、複雑なウェブアプリケーションに対応できます。 【参考】:Angularとは何か?
![](/placeholder.png)
Angularの特徴
Angularはウェブアプリケーション開発者向けに、以下の特徴を持ちます。 【参考】:Angular 特徴と利点
・クロスプラットフォームに対応 ウェブアプリケーションとしてあらゆるデバイスに対応できるほか、モバイルネイティブアプリと、Windows・Mac・Linux版デスクトップアプリを開発することも可能です。
・スピードとパフォーマンスに優れる 双方向データバインディングに基づくテンプレートにより、モデルとビューが追従します。最初のビューをサーバで表示し、サーバとの通信を最小にしてページを生成する、シングルページアプリケーション(SPA)の開発がしやすい特徴があります。
・生産性が高い コンポーネントベースで、小さな部品を組み合わせて使用するため再利用性が高まります。テンプレート構文が用意されているので、繰り返し登場するユーザインターフェースのビューが簡単に作成できます。
Angularの成り立ち
![img_angular14_02](/placeholder.png)
2009年に登場した初期バージョンは、Angular 1あるいはAngularJSと呼ばれ、JavaScriptをベースとしていました。その後TypeScriptに対応したことで、バージョン2.0以降の名称は単にAngularと言い、一般的には名称の後にバージョン番号を添えることがあります。
AngularJSは長らく提供を続けていましたが、2022年1月末をもってサポートが終了しています。 【参考】:Angular JS
Angularのリリースポリシー
Angularは、半年ごとにメジャーリリースを行い、頻繁に更新されています。マイナーリリースも、メジャーリリース毎に1〜3回実施されます。リリース6か月のアクティブサポートと、その後12か月の長期サポート(LTS)が提供されます。
【参考】:Angularのバージョンとリリース
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のバージョン管理
Angularは頻繁に製品の改良を重ねています。最新の情報は公式Twitterや公式ブログを購読することで入手できます。
【参考】:Angularプロジェクトを最新に保つ 【参考】:Twitter Angular 【参考】:Angular Blog
バージョン一覧はGitHubに掲載されており、固有バージョンの変更点も分かります。お使いの環境を移行する場合は参考にするのが良いでしょう。 【参考】:GitHub Angular
![](/placeholder.png)
Angular 14の新機能
![img_angular14_03](/placeholder.png)
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について解説していきます。
![](/placeholder.png)
Reactの概要
Reactは、ユーザーインターフェース構築用のJavaScriptライブラリです。Facebook(現Meta)とコミュニティによって開発されました。小さなコンポーネントを組み合わせて複雑なインターフェースを構築することができます。 【参考】:React
![](/placeholder.png)
Vue.jsの概要
Vue.jsは、Google出身のEvan Youによって開発されており、Angularの気に入っている部分を抽出し開発しています。構造がシンプルで学習しやすく、コーディングの手間が少ないことで人気があります。 【参考】:Vue.js
![](/placeholder.png)
おすすめのフレームワーク
ReactとVue.jsは、仮想DOMを利用していますので手間が少ないメリットがあります。とは言っても、AngularはTypeScriptベースで大規模システムに対応しやすい特長があり、人気がないわけではありません。そのため、実際の用途やシステム規模に応じて使い分けるのが良いでしょう。
ブログを定期的に確認しておきましょう
![img_angular14_04](/placeholder.png)
Angularは年に2度メジャーリリースを行っており、頻繁に新機能が提供されます。開発の母体はGoogleとコミュニティですので、精力的に活動していることが分かります。製品の改良が頻繁に実装されていることから、最新の情報を確認しておくのが良いでしょう。
最新情報は、公式Twitterや公式ブログを購読することで入手できますので、定期的に情報を収集することをおすすめします。
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから