angular モダン web 開発 マンツーマン形式セミナー教材 · redux による同期...
TRANSCRIPT
Angular モダン Web 開発セミナー
©2017 Staffnet,Inc. All rights reserved. 許可なき複製、転載、配布を禁ず。
AngularモダンWeb開発
マンツーマン形式セミナー教材
2017 年 8 月 31 日 1.4.15 版
スタッフネット株式会社
1 テキスト(パワーポイント 2画面印刷)
2 実習環境インストール手順
3 複利計算アプリ実習手順
4 顧客管理システム解説(フロントエンド、バックエンド)
Angular モダン Web 開発セミナー
©2017 Staffnet,Inc. All rights reserved. 許可なき複製、転載、配布を禁ず。
テキスト目次
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 インストールコマンド
Angular モダン Web 開発セミナー
©2017 Staffnet,Inc. All rights reserved. 許可なき複製、転載、配布を禁ず。
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 ページ目コード
Angular モダン Web 開発セミナー
©2017 Staffnet,Inc. All rights reserved. 許可なき複製、転載、配布を禁ず。
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]
システム構成
対応方針
特長を活かす(データ量無制限の表示)
特長を活かす(オフラインを意識させない)
Angular モダン Web 開発セミナー
©2017 Staffnet,Inc. All rights reserved. 許可なき複製、転載、配布を禁ず。
特長を活かす(高速表示のテクニック)
参考通信リトライの考慮点
通信先の制約
弱点を補強(データ消失対応)
弱点を補強(データ機密保護)
弱点を補強(自動消去と暗号化)
弱点を補強(プログラムの保護)
弱点を補強(集中管理)
データ管理の参考事例
導入効果
導入ステップ
2-9.開発ツール ・・・・・・・・・・・・・・・・・[139]
IDE とドキュメント生成ツール
Angular CLI Proxy 機能
テストツール
単体テストの実行
単体テストサンプルシナリオ
単体テスト実行結果
E2E テストの実行
E2E テストシナリオ
E2E テストの実行結果
2-10.TypeScript を知る ・・・・・・・・・・・・・・・・・[149]
Angular 用の開発言語
TypeScript とは
TypeScript の型指定
既存 JavaScript 資産に型情報付加
TypeScript コンパル設定ファイル
TypeScript 記述例
3.システム開発
3-1.大規模システム対応の実装 ・・・・・・・・・・・・・・・・・[158]
大規模対応の検討項目
モジュール分割
コンポーネント分割
コンポーネント指向
分割した構成要素の同期
動作の同期
Angular モダン Web 開発セミナー
©2017 Staffnet,Inc. All rights reserved. 許可なき複製、転載、配布を禁ず。
データの同期の必要性
直接同期方式
階層構造で同期
処理の集中化
Redux による同期
集中化にともなうクラス肥大化の回避
集中管理のループ処理
3-2. 実装例(顧客管理システム) ・・・・・・・・・・・・・・・・・[179]
業務シナリオ
業務詳細
主な機能
セキュリティ強化
顧客管理システムの実行
画面フロー
プロジェクトの読込み
Angular CLI Proxy 接続
サーバー構成
システム全体構成
3-3.顧客管理システム画面 ・・・・・・・・・・・・・・・・・[184]
ログイン
顧客一覧
顧客情報
報告入力
報告履歴
モバイル対応
処理フロー
サンプルアプリの処理フロー
3-4.顧客管理システムの DB
SQL データベース構造の確認
サンプルアプリのデータベース構造
顧客情報(t_customer)の構造
3-5.顧客管理システムの処理フロー ・・・・・・・・・・・・・・・・・[193]
アクティビティ図
アプリ全体の処理フロー
ダウンロード画面の処理フロー
顧客リスト画面の処理フロー
Angular モダン Web 開発セミナー
©2017 Staffnet,Inc. All rights reserved. 許可なき複製、転載、配布を禁ず。
自動ログアウト処理フロー
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
*マーク付きのソフトウェアは、必ずバージョン指定をしてインストールしない場合、不具
合が発生することがあります。
2.Windows OSのセットアップ
1. 管理者権限を持つユーザー「rdp01」を作成します。
2. angular001 で Windows にサインインします。
3.ソフトウェアのインストール
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
Angular モダン Web 開発セミナー
1 (C) 2017 Staffnet,Inc. All rights reserved. 許可なき複製、転載、配布を禁ず。
Angular モダン Web 開発セミナー
複利計算アプリ実習手順
2017 年 8 月 31 日 1.0.5 版
Angular モダン Web 開発セミナー
3 (C) 2017 Staffnet,Inc. All rights reserved. 許可なき複製、転載、配布を禁ず。
内容 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
Angular モダン Web 開発セミナー
4 (C) 2017 Staffnet,Inc. All rights reserved. 許可なき複製、転載、配布を禁ず。
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 アプリのように次の画
面への移動ではなく、画面のレイアウトが切り替わります。