Angular Webアプリ開発入門1

Angularとは

「Angular」は、Googleによって開発されているJavaScriptフレームワークである。

WEBアプリケーションの開発では、Reactなどと並び、最も使われているJavaScriptフレームワークの一つ。

Webアプリケーションとは

Webアプリケーションは、「Webブラウザ」と「Webサーバ」から成り立っている。

前者をクライアントサイドプログラム後者をサーバーサイドプログラムいう。

テンプレートとコンポーネントによるページ構成

Angularは「テンプレート」と「プログラム」を分離し、テンプレートの定められた場所にプログラムが管理するデータを差し込む仕組みで動くフレームワークである。Angularではテンプレートに結びつけれられるテンプレートのことをコンポーネントと呼ぶ。テンプレートコンポーネントはほとんどの場合、1対1で対応する。

テンプレートとコンポーネント

テンプレートは、特殊な類の利用が許可されたHTMLファイル。

例えば「{{mydata}}」とテンプレート中に記述しておくと、コンポーネントの「mydata」項目(プロパティ)と結びつき、mydataに格納されているデータが差し込まれる。この連携機能は双方向である。

例えば「<input>」のような入力要素と、コンポーネントのプロパティを結びつけておくと、ユーザーがテキスト変更すると、その変更がプロパティに反映される。

この仕組みは、プログラマが画面のデータを書き換えたり、ユーザーからの入力を受け取ったりするのがとても簡単である。

こうしたテンプレートの値とコンポーネントのプロパティを結びつける仕組みがAngularの大きな特徴である。

テンプレートとコンポーネント

 

 

 

 

 

 

 

サービス

簡単なアプリケーションであれば、テンプレートとコンポーネントだけで良いが、あるデータが複数のコンポーネントから参照されることもある。

例えば、顧客の一覧表示ページと詳細ページがある場合、どちらも同じ「顧客」というデータを持つ。そうした時、「顧客の一覧表示」と「顧客の詳細表示」のそれぞれのコンポーネントから、共通に利用できる「顧客情報の操作」というプログラムを利用できると便利である。そうした構造が取れるように、Angularでは「サービス」というプログラムの概念がある。

顧客を扱う例であれば、顧客の参照・編集・削除などの機能をサービスに実装しておき、コンポーネントからはそのサービスを実行することで、様々な操作をする。下記の図を参照。

このように、サービスも含めた、下記の3つがAngularのプログラムを構成する3大要素である。

  • テンプレート
  • コンポーネント
  • サービス

サービス

 

 

 

 

 

 

 

 

シングルページアプリケーション

Angularはシングルページアプリケーション呼ばれる形態のアプリケーションを作ることを目的としている。多くのWebアプリケーションは、サーバー側にそれぞれのページに対応するプログラムやコンテンツを置いて、リンクをクリックすることにより動作する。

それに対し、シングルページアプリケーションという構成では、プログラムやコンテンツがワンパッケージで構成され、最初にクライアント側にまとめてダウンロードされ、クライアント側で切り替えて表示される。そのため、リンクをクリックしても、サーバーへの通信が発生しないため、表示が高速である。

シングルページアプリケーション

 

Angularで必要なプログラムを作るのに必要なもの

  • Angular: Angular本体
  • Typescript:Angularで採用されているプログラミング言語
  • Node.js:Angularに含まれるツールなどを動かすツールに必要なプログラム

終わりに

次回はAngularで開発する環境構築について紹介していく。

 

コメント