目的

この記事では、Angularを用いたWebシステム開発に必要な事前知識や特徴、開発環境、開発の流れについて解説する。

Angularの特徴

Angularとは、GoogleとAngularのユーザーコミュニティによって開発が進められているJavaScriptフレームワークで、次の特徴を持つ。

• コンポーネント指向 コンポーネント指向とは、機能を切り分けできる単位で分割して部品化(コンポーネント化)し、必要に応じて組み合わせる開発方針で、Angularでは、このコンポーネント指向を前提としたプログラム設計が基盤となる。
  ※ 部品の再利用により開発効率を向上しつつ、プログラム構成も簡潔にでき、不具合リスクも減らすことができる。

• MVVM設計
  Angularは、ユーザーの入力情報をデータバインディングにて自動的に処理するModel、View、ViewModelからなる設計思想MVVMを踏襲している。

  • Model
    データ周りの操作とその変更をViewに通知する役割を担う。
  • View
    Modelから受け取ったデータをWebブラウザ等へ出力する役割を担う。
  • ViewModel
    ModelとViewを紐付けるマッピング的な役割を担う。
    ViewModelで変更されたデータは即座にViewに反映される。

• TypeScriptの採用
  Microsoft社製のJavaScriptを拡張したオープンソース言語TypeScriptの使用を推奨しており、Angular自体もこのTypeScriptをベースとして実装されている。

  TypeScriptは、開発効率の向上を目的とし、JavaScriptがサーバーサイドプログラムと似た思想で実装できるようクラスや型の概念を取り入れ、厳格な文法に改良されている。

• モダン技術の積極採用
  SystemJS、RxJS、Zone.jsなど、JavaScriptの新しい技術をライブラリとして積極採用している。

  • RxJS
    avaScriptで非同期処理を可能にする。
  • SystemJS
    JavaScriptファイルの依存関係（モジュール毎のインポート制御）を解決する。
  • Zone.js
    非同期処理のコンテキスト（前後関係）を管理・操作する。

• SPA（Single Page Application） Angularは、単一のWebページで構成されるWebアプリ「SPA」を作ることを目的としている。

  具体的には、ページ遷移毎に前ページのWebシステム要説フロー（3）～（14）を実行するのではなく、初回のアクセス時に必要なHTML、CSS、JavaScriptをまとめて取得し、以降は、データ取得や更新処理など必要個所のみ、Ajax通信などの非同期通信を利用してWebシステム要説フロー（3）～（14）を実行する。

  なお、必要最低限のサーバー通信となるため、画面表示が高速になり、初回のアクセスをダウンロードと位置付け、以降の通信はしない設計とすることでオフラインアプリも実現できる。

開発の必須環境

開発者は、プログラムコードをTypeScriptで記述し、ビルド（※）によってJavaScriptに変換され、HTML、CSSと共にWebブラウザがその命令を実行する流れとなる。

このため開発者は、プログラムコードを記述するエディタとなる統合開発環境とビルドするためのビルド実行環境、動作確認するための確認環境が必須となる。

• ※ ビルド
  ビルドとは、プログラムを機械語に変換する行為のみを指すコンパイルに加え、コンパイル後に関連ファイル一式を所定の場所（デプロイ先）に配置する行為も含んだ工程を指す。

以下、必須環境とその概要を記載する。

• Visual Studio Code（統合開発環境）
  統合開発環境については特に決まりはないが、TypeScriptと同社製で相性も良く、無償提供されているVisual Studio Codeを利用する。
  （Visual Studio Codeをインストールし、統合開発環境を構築する。）

• TypeScript（ビルド実行環境）
  TypeScriptをインストールすることで、開発言語自身の仕組みとビルド時に必要なTypeScriptの実行環境が構築される。
  （下記Node.js上で動作する。）

• Angular CLI（ビルド実行環境）
  Angular CLI（※）をインストールすることで、ターミナルの操作周りでAngular開発に必要なプログラム・ライブラリ一式が構築される。
  （下記Node.js上で動作する。）

  開発時は、不足モジュールのインストールや仮想ローカルサーバーの起動などAngular CLIコマンドをVisual Studio Codeのターミナル上で実行し、環境カスタマイズ及び動作確認を行う。

  なお、仮想サーバー周りの機能は、Angular CLIが下記Node.jsの機能を利用して実現している。

  • ※ CLI（Command Line Interface）
    CLIとは、キーボード入力によるコマンドラインで操作要求を受付け、応答を行うインターフェースを指す。
    なお、マウスやタッチパネルなどグラフィカルなインターフェースは、GUI（Graphical User Interface）という。

• Node.js（ビルド実行環境／確認環境）
  Node.js（※）をインストールすることで、上記TypeScriptとAngular CLIの実行環境（土台）が構築される。

  • ※ Node.js
    Node.jsとは、Python、PHP、Java等のサーバーサイドプログラムと同様にサーバーサイドで動作するJavaScriptのプラットフォームを指し、サーバーサイドプログラムもJavaScriptで開発することで、言語統一（学習コスト削減）することを目的に作られている。

開発の流れ

前項 開発の必須環境で解説した各環境の役割と流れについて、下記フローにまとめる。

• Angular開発における各環境の役割と流れ
  （1）〜（5）が一般ユーザーに公開する流れで、（1）〜（3）、（6）、（7）が開発者が動作確認する流れとなる。
• (1) VSCode（Visual Studio Code）からTypeScript、HTML、CSSで実装する。
• (2) VSCodeからTypeScriptの実行環境とAngular CLIを利用して(1)をビルドする。
• (3) Webブラウザで実行されるプログラムとなるJavaScript、HTML、CSSが生成される。
• (4) 一般公開されているサーバーに（3）の成果物をデプロイする。
• (5) 一般ユーザーのWebブラウザから（3）の成果物が利用できる。
• (6) Node.jsとAngular CLIの機能を利用して構築された仮想のローカルサーバーに(3)の成果物をコピー（デプロイした状態）する。
• (7) 開発者のWebブラウザから（3）の成果物の動作確認が可能となる。