アーキテクトを図解してみたこんにちは。私は概ねサーバーサイドを触ることが多いのですが、今の案件ではフロント(Angular)を弄る機会にも恵まれたので、この機会に少し勉強してみようと思います。おけるアーキテクトの概要について、までを扱って行こうと思います。JavaScriptフレームワークです。ついての簡単な解説や環境構築などについては次の記事でまとめていますので、よろしければご参照ください。アーキテクトをみてみましょう。全体を俯瞰してみます。次の図は、公式HPでのアーキテクチャ説明のテキストから、私がイメージを書き起こしてみたものです。)色々な要素があって、わかりづらいですね...。いくつかの要素について、その概要を確認してみましょう。構成する基本となる構成要素です。アノテーションにより宣言され、それぞれが一つの機能的なセットとしての役割を果たします。どんなアプリケーションであっても必ず1つの基本的なモジュールが必要となります。これをルートモジュールと呼びます。名付けられたファイルがその役割を果たします。それとは別に、個々の機能を体現するフィーチャーモジュールを作成し、アプリケーションを開発していきます。おいてURL遷移などのルーティングを、ルーティングモジュールで操作することができます。コマンドを実行した際にコマンドライン上で対話的に指定することができます。キーワードを用います。コンポーネントコンポーネントは、そのコンポーネントの階層をページのDOMに接続します。コンポーネントの中ではデータやロジックを管理し、またそれをページに描画するHTMLファイルとの関連を持ちます。コンポーネントの関連をもつHTMLファイルを、一般にテンプレートと呼びます。全てのアプリケーションには、必ず1つ以上のコンポーネントが存在します。コンポーネントもモジュールと同じように、もっとも基本となるものに対してルートコンポーネントという名前が付与されます。キーワードにより、ルートコンポーネントとの関連を持ちます。個々のコンポーネントは互いにひも付きを持ちません。それぞれのコンポーネントを紐付け、ページ遷移などを可能にするのはルートモジュールの役割です。テンプレートテンプレートは、画面描画の機能を担うHTMLファイルです。テンプレートはバインディング機能を用いることで、コンポーネントとのデータをやりとりすることができます。バインドコンポーネントとテンプレートとの間で、双方向に矢印が伸びています。この両者間ではデータのやりとりを行うことが可能で、これをバインディングと呼びます。コンポーネントからテンプレートにデータを紐づけることを特にプロパティバインディングと呼び、テンプレートからコンポーネントにデータを紐づけることを特にイベントバインディングと呼びます。図にはありませんが、上記のバインディングとは別に、双方向バインディングというものもあります。プロパティバインディングやイベントバインディングが片方向であり、必ずしも双方の同期を約束するものではなかったものであったのに対し、双方向バインディングでは一方の変更は即座にもう一方へと伝播し、同期処理を実現します。ディレクティブテンプレートは、動的にその構造を変化させることができます。それを実現するのが、ディレクティブの機能です。そこには2種類のディレクティブが存在しています。1つは、構造ディレクティブです。キーワードであり、ビューのレンダリング時に実行するロジックを追加しDOM構造を変更することで、レイアウトを動的に更新することができます。1つは、属性ディレクティブです。キーワードなどが属性ディレクティブに相当し、HTMLの属性や表示値などを更新することができます。サービスサービスとは、特定の作業を行う小規模なクラスです。これは、コンポーネントクラスをクリーンに保つために作られます。そもそもコンポーネントの役割とは、ビューとの紐付きを持ち、データバインディングのためのプロパティとメソッドを持ち、そして内部的に処理を行うためのロジックを実行することです。ロジックの実行に必要だからと言って、データ取得のロジックや、入力値検証のロジックまでをもコンポーネントの中に含んでしまうと、コンポーネントが雑然としてしまいます。そこでそれらの機能を最小単位で外部に切り出すために作られるのが、サービスです。サービスは特定の処理を行うためのクラスです。サービスはコンポーネントから呼び出され、当然、コンポーネントによって使用されることができます。サービスをコンポーネントに紐づけるこの時の動きのことを、依存性の注入(DI)と呼びます。実際にアーキテクトに触れてみるではここからは、実際にプロジェクトを作成し、アーキテクトを構成するファイル群を簡単に確認してみましょう。コマンドで、プロジェクトを作成します。Yes少し待つと、プロジェクトが生成されます。中身はこのようになっています。lsREADME.mdnode_modulestsconfig.jsonangular.jsonpackage-lock.jsontsconfig.spec.jsonbrowserslistpackage.jsontslint.jsone2esrckarma.conf.jstsconfig.app.jsonモジュールの確認モジュールは次の場所に格納されています。プロジェクト/src/appルートモジュールルートモジュールは、自らが使用するモジュール(ここではルーティングモジュールなど)と、ルートコンポーネントに関する情報を宣言しています。];のように宣言することで、パスとそれに紐づけるコンポーネントを宣言することができます。}コンポーネントの確認コンポーネントもモジュールと同様に、初期状態では次の場所に格納されています。関連が宣言されていることがわかりますね。ファイルですので、ここで確認することはしません。その他サービスは、初期状態で存在していません。してその使用を強制している訳ではないからです。アーキテクトは主に、モジュール、コンポーネント、テンプレート、サービスなどで構成されます。モジュールは一つの機能を体現し、コンポーネントとテンプレートはロジックと画面を体現し、サービスは最小機能の部品としてコンポーネントを補完します。2019.10.20こんばんは。環境構築を行なっていきたいと思います。コメントをキャンセルメールアドレスが公開されることはありません。