sigma-se

概要

Angularを用いたWebシステム開発に必要な前提知識として、Angularの特徴、SPA、TypeScript、開発環境、ビルドの流れを整理する。

Angularは単に画面を作るためのライブラリではなく、コンポーネント、ルーティング、ビルド、依存関係管理を含むフロントエンド開発基盤として扱う。

ここでは、実際の環境構築に進む前に、各ツールがどの役割を持つのかを確認する。

この記事で理解できること

Angularの主な特徴。
コンポーネント指向とSPAの考え方。
TypeScript、Node.js、Angular CLIの役割。
開発時と公開時のビルド成果物の流れ。

作業前に確認すること

確認項目	内容
対象	Angularは主にフロントエンド側のアプリケーション開発で使う。
言語	AngularではTypeScriptを前提にコードを書く。
実行環境	Angular CLIやTypeScriptはNode.js上で動作する。

混乱しやすい点

混乱しやすい点	確認する観点
AngularとJavaScriptの関係	AngularはJavaScript/TypeScriptで動くフレームワーク。TypeScriptは最終的にJavaScriptへ変換される。
Node.jsの役割	ブラウザ向けアプリの開発環境として使うのであり、必ずしもNode.jsでサーバーを作るという意味ではない。
ビルドの意味	TypeScriptや関連ファイルをブラウザで実行できる形にまとめる工程。

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
  JavaScriptで非同期処理を扱いやすくする。
- 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）の成果物の動作確認が可能となる。

実務とのつながり

開発環境の理解
エラー発生時にVSCode、Angular CLI、Node.js、TypeScriptのどこを確認すべきか切り分けやすくなる。
チーム開発
ビルド手順や依存パッケージの役割を共有しやすくなる。
公開作業
開発中のソースと公開用の成果物を分けて考えられる。

要約

Angularはコンポーネント指向とSPAを前提にしたフロントエンドフレームワーク。
TypeScriptで書いたコードはビルドによってJavaScriptへ変換される。
Angular CLI、Node.js、VSCodeの役割を分けて理解すると環境構築が進めやすい。

SIGMA-SE Tech Blog