テキスト目次 1. 概要 1-1.Angular とモダン Web [8] HTML5 による機能拡張 HTML5 で未解決の課題モダン Web による解決モダン Web のシステム概念図複利計算アプリを体験モダン Web と SPA モダン Web が常識を変える分散処理の課題分散処理の解決策モダ

Transcription

1 Angular モダン Web 開発 マンツーマン形式セミナー教材 2017 年 8 月 31 日 版 スタッフネット株式会社 1 テキスト ( パワーポイント 2 画面印刷 ) 2 実習環境インストール手順 3 複利計算アプリ実習手順 4 顧客管理システム解説 ( フロントエンド バックエンド ) 2017 Staffnet,Inc. All rights reserved. 許可なき複製 転載 配布を禁ず

2 テキスト目次 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 インストールコマンド 2017 Staffnet,Inc. All rights reserved. 許可なき複製 転載 配布を禁ず

3 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 ページ目コード 2017 Staffnet,Inc. All rights reserved. 許可なき複製 転載 配布を禁ず

4 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] システム構成対応方針特長を活かす ( データ量無制限の表示 ) 特長を活かす ( オフラインを意識させない ) 2017 Staffnet,Inc. All rights reserved. 許可なき複製 転載 配布を禁ず

5 特長を活かす ( 高速表示のテクニック ) 参考通信リトライの考慮点通信先の制約弱点を補強 ( データ消失対応 ) 弱点を補強 ( データ機密保護 ) 弱点を補強 ( 自動消去と暗号化 ) 弱点を補強 ( プログラムの保護 ) 弱点を補強 ( 集中管理 ) データ管理の参考事例導入効果導入ステップ 2-9. 開発ツール [139] IDE とドキュメント生成ツール Angular CLI Proxy 機能テストツール単体テストの実行単体テストサンプルシナリオ単体テスト実行結果 E2E テストの実行 E2E テストシナリオ E2E テストの実行結果 2-10.TypeScript を知る [149] Angular 用の開発言語 TypeScript とは TypeScript の型指定既存 JavaScript 資産に型情報付加 TypeScript コンパル設定ファイル TypeScript 記述例 3. システム開発 3-1. 大規模システム対応の実装 [158] 大規模対応の検討項目モジュール分割コンポーネント分割コンポーネント指向分割した構成要素の同期動作の同期 2017 Staffnet,Inc. All rights reserved. 許可なき複製 転載 配布を禁ず

6 データの同期の必要性直接同期方式階層構造で同期処理の集中化 Redux による同期集中化にともなうクラス肥大化の回避集中管理のループ処理 3-2. 実装例 ( 顧客管理システム ) [179] 業務シナリオ業務詳細主な機能セキュリティ強化顧客管理システムの実行画面フロープロジェクトの読込み Angular CLI Proxy 接続サーバー構成システム全体構成 3-3. 顧客管理システム画面 [184] ログイン顧客一覧顧客情報報告入力報告履歴モバイル対応処理フローサンプルアプリの処理フロー 3-4. 顧客管理システムの DB SQL データベース構造の確認サンプルアプリのデータベース構造顧客情報 (t_customer) の構造 3-5. 顧客管理システムの処理フロー [193] アクティビティ図アプリ全体の処理フローダウンロード画面の処理フロー顧客リスト画面の処理フロー 2017 Staffnet,Inc. All rights reserved. 許可なき複製 転載 配布を禁ず

7 自動ログアウト処理フロー 3-6. 顧客管理システム機能の実装 [199] 国際化対応レスポンシブデザイン実装モジュールの遅延ローディングエラーログの保存 4. 実習環境 [216] 実習環境 Web ブラウザで接続 Windows 標準クライアントで接続実習フォルダ WebStorm の基本操作 Chrome デベロッパーツールネットワークのメニューでの操作コードデバッグ 2017 Staffnet,Inc. All rights reserved. 許可なき複製 転載 配布を禁ず

8 2017/02/02 作成 2017/08/31 更新 実習環境インストール手順 Angular モダン Web 開発セミナー のクラウド実習環境と同等の機能を ローカル PC にインストールする手順を解説します ユーザー名やフォルダ名は例です 必要に応じて読 み替えてください 1. 使用するソフトウェアのバージョン Windows 10 Enterprise Edition *node.js , Git for Windows 2.1 WebStorm 2017 Google Chrome * マーク付きのソフトウェアは 必ずバージョン指定をしてインストールしない場合 不具合が発生することがあります 2.Windows OS のセットアップ 1. 管理者権限を持つユーザー rdp01 を作成します 2. angular001 で Windows にサインインします 3. ソフトウェアのインストール 1. Google Chrome デフォルト設定でインストール後 既定のブラウザに設定します 2. nodejs バージョン指定したインストーラー一覧の中からローカル PC のプラットフォームに適合するものを選択します デフォルト設定でインストールします 3. Git for Windows デフォルト設定でインストールします 4. WebStorm 1 (C)2017 Staffnet Inc. All rights reserved. 許可無き複製 転載 配布を禁ず

9 Angular モダン Web 開発セミナー複利計算アプリ実習手順 2017 年 8 月 31 日 版 (C) 2017 Staffnet,Inc. All rights reserved. 許可なき複製 転載 配布を禁ず 1

10 内容 Angular モダン Web 開発セミナー... 1 複利計算アプリ実習手順 はじめに 開発環境のバージョン 複利計算アプリ アプリの概要 画面と機能 内部データ処理 アプリ作成の準備 プロジェクトの作成 新規プロジェクト作成 プロジェクト生成の確認 追加ライブラリのインストール styles.css 設定 基本機能 ( 双方向データバインド ) コードの作成 入力欄の作成 双方向データバインド変数の定義 動作確認 ビルドと実行 動作確認 解説 実装のポイント 実装の内容 機能拡張 表示機能 繰り返し要素の生成 CSS によるスタイル適用 動作確認 データの保存と復元 localstorage の利用 動作確認 実装のポイント オフライン動作 キャッシュ対象ファイルの確認 マニフェストファイルの作成 Application Cache の有効化 動作確認 (C) 2017 Staffnet,Inc. All rights reserved. 許可なき複製 転載 配布を禁ず 3

11 1. はじめに 1.1 開発環境のバージョン Angular は開発環境のバージョンによるファイル構成等の仕様が頻繁に変更されています したがって アプリの安定動作には 正確なバージョン一致が必要です 本ドキュメントは下記の環境で 作成しています Angular Angular CLI Bootstrap ng2-bootstrap Node.js この中で angular-cli と nodejs のバージョンについては特に留意が必要です angular-cli のバージョンは ng version コマンドで確認できます 上記バージョンと一致していない場合は下記コマンドでアップデートを行ってください angular-cli の npm モジュール名は最近変更になりましたので 2 種類の名前でアインストールを試します npm uninstall -g angular-cli または npm uninstall npm cache clean npm install node.js は公式サイトのトップページからでなく 下記リンクから必要なインストーラーをダウンロードしてください 2. 複利計算アプリ Angular2 アプリ作成の入門として複利計算アプリを準備しました コンポーネント 1 つだけの簡単なアプリです ここまでの解説の確認を兼ねて作成してみてください 金額の計算や画面の生成は Web サーバーではなくブラウザで行いますので Angular2 のアプリらしいサクサクした動きを体験できます 最終的にはネットワーク接続なしで動作するオフラインアプリに対応します 完成版プロジェクトは C: Users angular001 training calcapp にあります 必要に応じて参照してください 2.1 アプリの概要 画面と機能 1. データの入力画面です 元本と金利を入力すると計算結果の表示に切り替わります 従来の Web アプリのように次の画面への移動ではなく 画面のレイアウトが切り替わります (C) 2017 Staffnet,Inc. All rights reserved. 許可なき複製 転載 配布を禁ず 4

12

13

14

15

16

17

18