Angularの過去と現在

前文

Angularは一般的にAngular v2以上を指し、AngularJSは専らAngularの1.xバージョン全てを指します。この違いは、AngularがAngularJSを完全に書き直したものであり、2つの別個の製品であることを直接示すほど異なるという事実によるものです。

• AngularJS Superheroic JavaScript MVW Framework

次のセクションでは、Angularが最初に登場した動機とその中核概念に焦点を当てます。

AngularJS

AngularJSは2009年にMisko Hevery氏らによって作成され、後にGoogleによって買収されたフロントエンドJSフレームワークです。 AngularJSには多くの機能があり、特にMVVM、モジュール性、Superheroic JavaScript MVW Framework、セマンティックラベルなどが挙げられます。

Angular 2.0

これは、AngularJS 1.xの問題に対処し、新しい標準に対応するための完全なオーバーホールです。

パフォーマンス

AngularJSは元々、開発者向けではなく、デザイナーが永続的なHTMLフォームを素早く作成するためのツールとして作られました。時が経つにつれて、Angualr 1.xのメンテナンスチームは、開発者がより複雑なアプリケーションを構築できるように少しずつ改良し、最新のウェブアプリケーションのニーズに適応させてきました。しかし、どんなに改良されても、元の設計の暗黙のルールによる制限があり、これが現在のバインディングとテンプレート作成インフラストラクチャの持続的なパフォーマンスボトルネックにつながっています。パフォーマンス問題を解決するには、新しい戦略が必要です。

チェンジング・ウェブ

AngularJSが誕生してからの5年間で、JavaScriptの仕様が急速に発展し、module、class、lambda、generatorなどの新しい構文がブラウザでサポートされるようになっただけでなく、Web Componentsの技術標準が提案され、徐々にブラウザでサポートされるようになるなど、Webは進化してきました。ブラウザによるサポート現在、Web Componentsは主に3つの技術で構成されています：

• Angular One framework. Mobile & desktop.
• シャドウDOMは、ドキュメントの他の部分との衝突を恐れることなく、要素の機能をプライベートにすることができます。
• 依存性注入、HTMLでテンプレートを定義することができ、テンプレートは繰り返し使用することができ、呼び出されたときにのみレンダリングされます。

Web Componentsは、カプセル化された再利用可能なWeb UIコンポーネントを作成する標準化された方法であり、標準的なHTMLツールセットの欠点を補うだけでなく、開発者の創造性と効率を向上させます。

Angular 1.xには、既知のHTML要素や一般的なイベント、ビヘイビアの上に構築されたデータバインディング機能が内在していますが、Web Componentsテクノロジーをサポートするためには、まったく新しいデータバインディングの実装が必要でした。

モバイル

インターネットが発展し、携帯電話やその他のモバイルデバイスが台頭し始めると、汎用コンピューティングの現場は徐々に変化を送っていきます。AngularJSは元々モバイルアプリケーションを作成するために設計されましたが、そのために設計されたものではありませんでした。そのため、前述のパフォーマンスの問題や、コンパイル済みのビューをキャッシュできないこと、一般的すぎるタッチサポートなど、モバイル面では多くの問題がありました。

ユーザビリティ

AngularJSのコア機能の多くは徐々に "寄せ集め "られたものです。例えば、カスタムコマンドは当初存在せず、全てハードコードされており、その後コマンド追加専用のAPIが追加されました。AngularJSが設計された当初は、そのコアとなる機能があまり明確でなかったため、多くのAPIの設計もエレガントさに欠け、開発者の学習や利用の難易度を高めていたと言えます。

今日のAngular

AngularはHTMLとTypeScriptでクライアントサイドのアプリケーションを構築するためのプラットフォームでありフレームワークです。 Angular自体はTypeScriptで書かれており、開発者が直接インポートして使用できるTypeScriptライブラリのセットとして、コア機能とオプション機能が実装されています。

Angular のコア概念は次のとおりです。

Angularのコアコンセプトの多くはAngularJSから受け継がれ、それを基に構築されています。

Angularフレームワークには、以下のようにAngularの重要な部分である8つのコアコンセプトがあります：

モジュール：Angularアプリケーションはモジュール化されており、NGModuleと呼ばれる独自のモジュール化システムを持っています。 NgModuleは、特定のアプリケーション領域、特定のワークフロー、または密接に関連する機能のセットに焦点を当てた、まとまりのあるコードの塊のためのコンテナです。

コンポーネント: コンポーネントは特定の機能をラップするために使用され、ビューのサポートを提供するクラスでコンポーネントのアプリケーションロジックを定義します。

テンプレート：テンプレートはコンポーネントのレンダリング方法をAngularに伝えるHTMLの一部です。テンプレートは標準的なHTMLとよく似ていますが、AngularのCustom elements（(カスタム要素)含まれており、カスタムアプリケーションロジック、ステート、DOMデータに基づいてHTMLを変更します。

メタデータ：メタデータは、コンポーネントとそのビューを作成して表示するために必要なメインのコンストラクタのブロックをどこで取得するかなど、Angularにクラスで何を行うかを指示するために使用されます。

データバインディング：データバインディングとは、データをテンプレートにマッピングしたり、テンプレートからデータを取得したりすることです。 Angularは双方向のデータバインディングをサポートしています。

ディレクティブ: ディレクティブは @Directive() デコレータを持つクラスです。Angualr のレンダリング中、DOM はディレクティブの指示に従って変換されます。

サービス：広義のサービスには、アプリケーションで必要とされるあらゆる価値、機能、特徴が含まれます。狭義のサービスとは、明確に定義された目的を持つクラスで、特定の何かを行い、それをうまく行うことを想定しています。

Angularフレームワークの8つのコアコンセプトは、以下の図で互いに関連しています：

上表の関係の要約：

• コンポーネントとテンプレートが一緒になってAngularビューを定義します。
  • コンポーネントクラスのデコレータは、関連するテンプレートへのポインタを含むメタデータを追加します。
  • コンポーネントテンプレートのディレクティブとバインディングタグは、プログラムデータとプログラムロジックに基づいてビューを変更します。

ウェブコンポーネント - MDN Web Docs

Angularドキュメント