Angular モダン Web 開発マンツーマン形式セミナー教材 · Redux による同期集中化にともなうクラス肥大化の回避集中管理のループ処理

Angular モダン Web 開発セミナー

©2017 Staffnet,Inc. All rights reserved. 許可なき複製、転載、配布を禁ず。

AngularモダンWeb開発

マンツーマン形式セミナー教材

2017 年 8 月 31 日 1.4.15 版

スタッフネット株式会社

1 テキスト(パワーポイント 2画面印刷）

2 実習環境インストール手順

3 複利計算アプリ実習手順

4 顧客管理システム解説（フロントエンド、バックエンド）



テキスト目次

1.概要

1-1.Angular とモダン Web ・・・・・・・・・・・・・・・・・[8]

HTML5 による機能拡張

HTML5 で未解決の課題

モダン Web による解決

モダン Web のシステム概念図

複利計算アプリを体験

モダン Web と SPA

モダン Web が常識を変える

分散処理の課題

分散処理の解決策

モダン Web の将来

1-2.モダン Web 開発のハードル・・・・・・・・・・・・・・・・・[19]

ブラウザと JavaScript の制約

モダン Web ブラウザが標準へ

クラス構文がそのまま使える TypeScript

機能を補完する TypeScript

クラスライブラリの代替をする Angular

Angular CLI が開発作業を自動化

Angular CLI がテストツールを統合

Angular が機能補完と開発期間を短縮

システムの移行工数が少ない

1-2.Angular の特徴・・・・・・・・・・・・・・・・・[29]

Angular（プラス要素）

Angular（マイナス要素）

Angular でモダン Web 開発がカンタンに

1-3.Why Angular? ・・・・・・・・・・・・・・・・・[33]

Angular の優位点

同じカテゴリーのソフトウェア

2.基礎知識

2-1.npm によるパッケージ管理・・・・・・・・・・・・・・・・・[37]

npm 関連の用語

npm インストールコマンド



package.json による依存関係解決

package.json の内容

2-2.Angular プロジェクトの作成

Angular プロジェクトの作成準備(1)

Angular プロジェクトの作成準備(2)

Angular プロジェクトの生成

Angular プロジェクトのフォルダ構造

Angular プロジェクトの実行

Angular CLI ng コマンド

Angular のビルド処理

ビルドの実行

ビルド結果の展開

2-3.開発環境のバージョン固定・・・・・・・・・・・・・・・・・[54]

Angular のバージョンアップ

Angular のバージョン固定

2-4.Angular の構成要素・・・・・・・・・・・・・・・・・[59]

Angular アプリの構成要素

コンポーネントの構成

コンポーネントの記述

コンポーネントの処理フロー

データバインド

子コンポーネント

コンポーネントのライフサイクル

その他の構成要素

サービスの登録

サービスの利用

ルーターの機能

ディレクティブとパイプの例

2-5.テストプログラムで動作確認・・・・・・・・・・・・・・・・・[74]

テストプログラムの全体像

テストプログラムを IDE で開く

テストプログラムの実行

WebStrom 補足

フォルダ構造

外部から見た動作

2 ページ目コード



HTML 出力確認

2 ページ目 HTML 出力

1 ぺージ目 HTML テンプレート

親子コンポーネント

親子コンポーネントの連携

CSS のカプセル化(page01)

データバインドの副作用

データバインドの副作用検知機能

起動シーケンス

モジュール定義の内容(app.module.ts)

2-6.Angular を支える技術・・・・・・・・・・・・・・・・・[95]

分散処理の基盤

Application Cache

Web Storage

Non SQL データベース

Web ストレジの使い分け

非同期通信

セッションを使用しないユーザ認証

ユーザー認証の比較

トークン(JWT)を用いた認証

JWT によるシングルサインオン

ng2-Bootstrap

ng2-charts

Angular の技術情報

2-7.データの同期・・・・・・・・・・・・・・・・・[114]

データ同期処理のタイプ

更新頻度が低い処理

更新頻度が高い処理

即時更新処理

更新頻度が高く、即時更新処理

複数サーバー接続

2-8.変化と考慮点・・・・・・・・・・・・・・・・・[121]

システム構成

対応方針

特長を活かす（データ量無制限の表示）

特長を活かす(オフラインを意識させない)



特長を活かす（高速表示のテクニック）

参考通信リトライの考慮点

通信先の制約

弱点を補強(データ消失対応)

弱点を補強(データ機密保護)

弱点を補強(自動消去と暗号化)

弱点を補強(プログラムの保護)

弱点を補強(集中管理)

データ管理の参考事例

導入効果

導入ステップ

2-9.開発ツール・・・・・・・・・・・・・・・・・[139]

IDE とドキュメント生成ツール

Angular CLI Proxy 機能

テストツール

単体テストの実行

単体テストサンプルシナリオ

単体テスト実行結果

E2E テストの実行

E2E テストシナリオ

E2E テストの実行結果

2-10.TypeScript を知る・・・・・・・・・・・・・・・・・[149]

Angular 用の開発言語

TypeScript とは

TypeScript の型指定

既存 JavaScript 資産に型情報付加

TypeScript コンパル設定ファイル

TypeScript 記述例

3.システム開発

3-1.大規模システム対応の実装・・・・・・・・・・・・・・・・・[158]

大規模対応の検討項目

モジュール分割

コンポーネント分割

コンポーネント指向

分割した構成要素の同期

動作の同期



データの同期の必要性

直接同期方式

階層構造で同期

処理の集中化

Redux による同期

集中化にともなうクラス肥大化の回避

集中管理のループ処理

3-2. 実装例(顧客管理システム) ・・・・・・・・・・・・・・・・・[179]

業務シナリオ

業務詳細

主な機能

セキュリティ強化

顧客管理システムの実行

画面フロー

プロジェクトの読込み

Angular CLI Proxy 接続

サーバー構成

システム全体構成

3-3.顧客管理システム画面・・・・・・・・・・・・・・・・・[184]

ログイン

顧客一覧

顧客情報

報告入力

報告履歴

モバイル対応

処理フロー

サンプルアプリの処理フロー

3-4.顧客管理システムの DB

SQL データベース構造の確認

サンプルアプリのデータベース構造

顧客情報(t_customer)の構造

3-5.顧客管理システムの処理フロー・・・・・・・・・・・・・・・・・[193]

アクティビティ図

アプリ全体の処理フロー

ダウンロード画面の処理フロー

顧客リスト画面の処理フロー



自動ログアウト処理フロー

3-6.顧客管理システム機能の実装・・・・・・・・・・・・・・・・・[199]

国際化対応

レスポンシブデザイン実装

モジュールの遅延ローディング

エラーログの保存

4.実習環境・・・・・・・・・・・・・・・・・[216]

実習環境

Web ブラウザで接続

Windows 標準クライアントで接続

実習フォルダ

WebStorm の基本操作

Chrome デベロッパーツール

ネットワークのメニューでの操作

コードデバッグ

1

(C)2017 Staffnet Inc. All rights reserved. 許可無き複製、転載、配布を禁ず。

2017/02/02 作成

2017/08/31 更新

実習環境インストール手順

「Angular モダン Web 開発セミナー」のクラウド実習環境と同等の機能を、ローカル PC

にインストールする手順を解説します。ユーザー名やフォルダ名は例です。必要に応じて読

み替えてください。

1.使用するソフトウェアのバージョン

Windows 10 Enterprise Edition

*node.js 6.10.1,

Git for Windows 2.1

WebStorm 2017

Google Chrome

*マーク付きのソフトウェアは、必ずバージョン指定をしてインストールしない場合、不具

合が発生することがあります。

２.Windows OSのセットアップ

1. 管理者権限を持つユーザー「rdp01」を作成します。

2. angular001 で Windows にサインインします。

３.ソフトウェアのインストール

1. Google Chrome

https://www.google.com/chrome/browser/desktop/index.html

デフォルト設定でインストール後、既定のブラウザに設定します。

2. nodejs

https://nodejs.org/dist/v6.10.1/

バージョン指定したインストーラー一覧の中からローカル PC のプラットフォームに

適合するものを選択します。デフォルト設定でインストールします。

3. Git for Windows

https://git-for-windows.github.io/

デフォルト設定でインストールします。

4. WebStorm


1 (C) 2017 Staffnet,Inc. All rights reserved. 許可なき複製、転載、配布を禁ず。


複利計算アプリ実習手順

2017 年 8 月 31 日 1.0.5 版



内容 Angular モダン Web 開発セミナー ............................................................................................... 1

複利計算アプリ実習手順 .............................................................................................................. 1

1. はじめに ................................................................................................................................. 4

1.1 開発環境のバージョン ........................................................................................................... 4

2. 複利計算アプリ ....................................................................................................................... 4

2.1 アプリの概要 ........................................................................................................................ 4

2.1.1 画面と機能 ..................................................................................................................... 4

2.1.2 内部データ処理 ............................................................................................................... 5

3. アプリ作成の準備 ................................................................................................................... 6

3.1 プロジェクトの作成 .............................................................................................................. 6

3.1.1 新規プロジェクト作成 .................................................................................................... 6

3.1.2 プロジェクト生成の確認 ................................................................................................. 6

3.1.3 追加ライブラリのインストール ....................................................................................... 6

3.1.4 styles.css 設定 ................................................................................................................. 7

4. 基本機能（双方向データバインド） ........................................................................................ 7

4.1 コードの作成 ........................................................................................................................ 7

4.1.1 入力欄の作成 .................................................................................................................. 7

4.1.2 双方向データバインド変数の定義 .................................................................................... 8

4.2 動作確認 ............................................................................................................................... 9

4.2.1 ビルドと実行 .................................................................................................................. 9

4.2.2 動作確認 ......................................................................................................................... 9

4.3 解説 ...................................................................................................................................... 9

4.3.1 実装のポイント ............................................................................................................... 9

4.3.2 実装の内容 ................................................................................................................... 10

5. 機能拡張 ............................................................................................................................... 11

5.1 表示機能 ............................................................................................................................. 11

5.1.1 繰り返し要素の生成 ...................................................................................................... 11

5.1.2 CSS によるスタイル適用 ............................................................................................... 12

5.1.3 動作確認 ....................................................................................................................... 13

5.2 データの保存と復元 ............................................................................................................ 14

5.2.1 localStorage の利用 ....................................................................................................... 14

5.2.2 動作確認 ....................................................................................................................... 15

5.2.3 実装のポイント ............................................................................................................. 16

5.3 .オフライン動作 ................................................................................................................... 16

5.3.1 キャッシュ対象ファイルの確認 ..................................................................................... 17

5.3.2 マニフェストファイルの作成 ........................................................................................ 18

5.3.3 Application Cache の有効化 ......................................................................................... 19

5.3.4 動作確認 ....................................................................................................................... 19



1.はじめに

1.1開発環境のバージョン Angular は開発環境のバージョンによるファイル構成等の仕様が頻繁に変更されています。したが

って、アプリの安定動作には、正確なバージョン一致が必要です。

本ドキュメントは下記の環境で、作成しています

Angular 4.0.1

Angular CLI 1.0.0

Bootstrap 3.3.7

ng2-bootstrap 1.6.1

Node.js 6.10.1

この中で、angular-cli と nodejs のバージョンについては特に留意が必要です。

angular-cli のバージョンは ng version コマンドで確認できます。上記バージョンと一致していない

場合は下記コマンドでアップデートを行ってください。

angular-cli の npm モジュール名は最近変更になりましたので、2 種類の名前でアインストールを試

します。

npm uninstall -g angular-cli または npm uninstall -g @angular/cli

npm cache clean

npm install -g @angular/[email protected]

node.js は公式サイトのトップページからでなく、下記リンクから必要なインストーラーをダウンロ

ードしてください。

https://nodejs.org/dist/v6.10.1/。

2.複利計算アプリ

Angular2 アプリ作成の入門として複利計算アプリを準備しました。

コンポーネント 1 つだけの簡単なアプリです。ここまでの解説の確認を兼ねて作成してみてくださ

い。金額の計算や画面の生成は Web サーバーではなくブラウザで行いますので、Angular2 のアプ

リらしいサクサクした動きを体験できます。最終的にはネットワーク接続なしで動作するオフライ

ンアプリに対応します。

※完成版プロジェクトは、C:¥Users¥angular001¥training¥calcApp にあります。必要に応じて参

照してください。

2.1アプリの概要

2.1.1画面と機能 1. データの入力画面です。

元本と金利を入力すると計算結果の表示に切り替わります。従来の Web アプリのように次の画

面への移動ではなく、画面のレイアウトが切り替わります。

Documents

Angular モダン Web 開発 マンツーマン形式セミナー教材 · Redux による同期 集中化にともなうクラス肥大化の回避 集中管理のループ処理

Angular モダン Web 開発マンツーマン形式セミナー教材 · Redux による同期集中化にともなうクラス肥大化の回避集中管理のループ処理