- GoogleのAngular チームによって開発が進められているウェブアプリケーションプラットフォーム
- プログラミング言語としては、マイクロソフトが設計及び開発した TypeScript を使う
- パッチは毎週リリースする予定で、マイナーバージョンは毎月、そして6カ月ごとにメジャーリリースを行う
モダンWebとは †
- サーバ集中型の処理をブラウザ側へ分散する
- 通信待ちのない高速な画面遷移、ネットワーク圏外での利用、サーバやネットワークの不可軽減を実現
- データやプログラムはサーバで集中管理
メリット †
- サーバとの通信頻度が減少
- サーバとネットワークの負荷軽減によるインフラコストの削減
- ユーザ数増加に伴うレスポンス低下の緩和
- ブラウザ内にデータとプログラムを保存できる
- ネットワーク圏外での利用が可能
- 通信待ちのない高速な画面遷移（例：Googleマップ）
- モバイル利用時もストレスなく利用できる
- ブラウザ内でデータ処理ができる
- 容量制限のないデータ表示（無限スクロール）
- グラフなどを使ったデータのビジュアル表示
- サーバへ送信する前のデータ縮小処理
- 処理結果を即座に返すアプリ
Angularの特長 †
- コンポーネント、DI（依存性の注入）、データバインドを独自の方法で実装
- 開発ツールやテストツールを統合し、作業の自動化で開発時間の短縮を図っている
コンポーネント †
- 一般的に「Web Components」と呼ばれる実装技術
- 一画面で使用されるHTML、CSS、TypeScriptを分割してコンポーネント（部品化）
- コンポーネント化により大規模開発における開発生産性と保守性の向上を実現
- これにより、同じ表示部分を持つ別画面での再利用や複雑な画面の機能分割が可能に
- Angularは、コンポーネントを実現するため、独自の方法でCSSの適用範囲をコンポーネント内に限定するカプセル化機能を実装している
DI（依存性の注入） †
- 部品化を進めると面倒になってくる依存クラスの管理を容易にする
- 依存クラスのインスタンス管理
- 初めて呼び出されたときに依存クラスのインスタンス化を行う
- コンポーネントの生成・破棄のライフサイクルとは関係なく、依存クラスのインスタンスを保持
- 依存クラスが必要なコンポーネントの生成時に、保持したインスタンスを渡す
- 依存クラス自身も依存クラスをDIできるので、複雑な依存関係にあるクラスのインスタンス化もDIが解決してくれる
データバインド †
- データの入出力に関連するコードを大幅に減らす
- Angular独自の拡張HTMLであるテンプレートシンタックスで定義
- データの出力を行う「片方向データバインド」と、データの入出力両方を行う「双方向データバインド」の2種類がある
Angular開発の作業項目 †
- Angular CLIを使えば、コマンドで下記の大部分を行ってくれる
- 開発開始前
- Angular本体と依存モジュールの入手 ... package.jsonの作成、nom install 実行
- プロジェクトの雛形作成 ... 公開されているAngularプロジェクトの雛形をコピーして加工または手作業で新規作成
- 開発ツールの準備
- TypeScriptコンパイラのインストールと設定
- Webpackモジュールハンドラのインストールと設定
- Karma単体テストツールの実行環境構築
- Protractor E2E（End to End）テストツールの実行環境構築
- 開発用Webサーバのインストールと設定
- プログラム実装中
- テスト時
- 単体テストの実施と結果確認
- E2Eテストの実施と結果確認
- リリース時
- コンポーネントのHTMLテンプレートの事前コンパイル
- 不要コード、重複コードの削除
- モジュールの圧縮
推奨UIライブラリ †
パッケージ管理 †
- パッケージ管理ツールとして npm を使用
- 依存情報は package.json に記述
- 必須ライブラリ（dependencies）と開発時に必要な依存ライブラリ（devDependencies）に分けて定義
- 細かなバージョン指定も可能（メジャーまで指定／マイナーまで指定／パッチまで指定）
- moduleのローカルインストール時に --save オプションを付けると、そのモジュール情報がアプリケーションのプロジェクトフォルダにある package.json に自動追記される
Angular CLI †
統合開発環境 †
Visual Studio Code †
WebStorm? †
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
