AngularでPWAを開発してネイティブと同等の快適さを実現

　本書は、「Angular2 によるモダンWeb 開発～TypeScriptを使った基本プログラミング～」の続編です。この前書で得た知識を土台に対象範囲をブラウザ内からWebサーバーやデータベースなどのバックエンド連携を含むシステム全体に広げ、大規模システムの構築にも対応する実践的知識の習得を目指します。読者として、AngularやモダンWeb開発に興味を持つ個人から、プロの開発者まで幅広く想定しています。ネット検索で入手できるAngular単体の技術解説ではなく、実装パターンや外部ライブラリとの統合など、本格的なモダンWebシステムの開発を成功させるための情報を網羅し、以下の特徴を持った内容としました。 ●モダンWebを体感するサンプルアプリ 本書の学習用として用意した多機能サンプルアプリ「顧客管理システム」は、Webであることを忘れさせる機能と快適さを提供します。操作を通じて、誰でもモダンWebの優位性を体感できます。開発者にとっては、機能ごとのサンプルコードとしても利用できます。なお、このサンプルアプリはバージョン固定で作成されているので、Angularがバージョンアップされても、本書の解説通りに動作確認することができます。 ●様々なツールを使用した読者参加型の学習体験 様々なツールを使用した動作確認をふんだんに盛り込んでいます。複雑なデータの流れや動作を可視化し、実習つきの研修を受けるようにステップバイステップで手を動かし、確実な理解を目指します。 ●モダンWeb開発のトラブル回避 アーキテクチャー変更による機能不足、バラバラに動作するコンポーネント、バージョンアップに伴う不具合、規模の拡大に伴う保守性の低下、システム管理のコスト増大など、様々なトラブルを回避するための手順を解説しています。 ●新技術への対応 暗号化、インメモリデータベース、Redux、タイムマシンデバッグ、オブジェクトデータベース、RxJS、async/await、Fetch APIなどをシステムに組み込む方法を紹介します。 ●バックエンド関連用語（付録） フロントエンド開発者向けに、バックエンド側で使用する関連用語を解説しています。 ■本書のダウンロードサイトで提供するサンプルアプリ5本 1)顧客管理システム（バックエンドとフロントエンド） 2)ExpressによるWeb API実装 3)暗号化ローカルDB評価 4)コンポーネント連携の動作確認 5)ReduxとAngularの連携 いずれのアプリも、本書第3章のバージョン固定手順でパッケージしていますので、すぐに動作できるうえ、Angularや関連ソフトのバージョン変化の影響を受けません。 はじめに 本書を読む前に 第1章 モダンWebを理解して目標を定める 1.1 概要 1.1.1　モダンWebの理解 1.1.2　操作体験による具体的な把握 1.1.3　操作体験するプログラム 1.1.4　顧客管理システムの利用イメージ 1.1.5　顧客管理システムの機能 1.2 モダンWeb体験の準備 1.2.1　前提ソフトウェアのインストール 1.2.1.1　Google Chromeブラウザ 1.2.1.2　Node.js 1.2.2　顧客管理システムのダウンロード 1.2.3　顧客管理システムの起動 1.3 モダンWe の体験 1.3.1　基本機能 1.3.1.1　通信待ちのない高速な画面表示 1.3.1.2　オフライン状態での動作 1.3.1.3　Canvasを使ったグラフィック描画 1.3.1.4　画像の縮小処理 1.3.2　モバイル対応 1.3.2.1　モバイル対応の方法 1.3.2.2　モバイル利用時の画面確認 1.3.3　拡張機能 1.3.3.1　拡張機能とは 1.3.3.2　前回終了時の画面復元機能 1.3.3.3　オフライン対応の自動送信 1.3.3.4　無限スクロール 1.3.4　システム管理機能 1.3.4.1　独自実装が必要なシステム管理機能 1.3.4.2　エラーログの集中管理 第2章 チェックリストでトラブルを回避する 2.1 概要 2.1.1　モダンWebはシステム全体の見直しが必要 2.1.2　モダンWeb構築のためのチェックリスト 2.2 バックエンド関連 2.2.1　主要ソフトウェア 2.2.2　 Web APIの仕様作成 2.2.3　 ユーザー認証 2.2.3.1　トークン認証とは 2.2.3.2　トークン認証のメリット 2.2.4　 リモート管理 2.2.4.1　フロントエンドの稼働ログリモート監視 2.2.4.2　フロントエンド設定値のリモート変更 2.2.5　 セキュリティ強化 2.2.5.1　Web APIの保護（接続URL変更機能） 2.2.5.2　フロントエンド暗号化の支援 2.2.5.3　ユーザー権限ごとの操作制限（モジュール分割） 2.3 フロントエンド関連 2.3.1　主要ソフトウェア 2.3.2　 UIライブラリ 2.3.3　ローカルデータベース 2.3.4　データ同期の方法 2.3.5　モダンWeb拡張機能 2.3.6　セキュリティ強化 2.3.6.1　ローカルデータベース暗号化 2.3.6.2　自動ログアウト 2.4 チェックリストによる検討のまとめ 第3章 開発環境の整備と新技術の活用 3.1 バックエンドの開発環境 3.1.1　開発環境の安定化 3.1.1.1　ローカルインストールパッケージのバージョン固定 3.1.1.2　グローバルインストールパッケージのバージョン固定 3.1.1.3　Node.jsのバージョン固定 3.1.2　バックエンド開発環境構築の流れ 3.1.3　バックエンドプロジェクトの作成 3.1.4　Webサーバー（Express）の利用 3.1.4.1　Expressのインストール 3.1.4.2　起動スクリプト作成 3.1.4.3　動作確認 3.1.5　データベース（SQLite3）の利用 3.1.5.1　データベース本体のインストール 3.1.5.2　データベース操作ツールのインストール 3.1.5.3　動作確認 3.1.6　トークンによる認証 3.1.6.1　秘密鍵と公開鍵の準備 3.1.6.2　JWTライブラリのインストール 3.1.6.3　サンプルプログラムの概要 3.1.6.4　トークン認証プログラム作成 3.1.6.5　トークン生成プログラム作成 3.1.6.6　トークン送信プログラムの作成と認証動作の確認 3.1.7　Web APIテストツール 3.1.7.1　テストツールの準備 3.1.7.2　テストシナリオの作成 3.1.7.3　テストの実行 3.2 フロントエンドの開発環境 3.2.1　バージョン固定 3.2.1.1　概要 3.2.1.2　プロジェクトのひな型作成 3.2.1.3　ひな型の使い方 3.2.2　暗号機能のインストール 3.2.2.1　 暗号ライブラリcrypto-jsのインストール 3.2.2.2　サンプルプログラム 3.2.2.3　暗号機能の特徴と留意点 3.2.2.4　暗号機能の実装 3.2.2.5　ソースコード解説 3.2.3　ローカルデータベース 3.2.3.1　NeDB概要 3.2.3.2　DBライブラリNeDBのインストール 3.2.3.3　サンプルプログラム 3.2.3.4　インメモリDBとしての利用 3.2.3.5　データベースの暗号化 3.2.3.6　NeDBのAPI利用コード解説 3.3 開発時のフロントエンドとバックエンドの接続 3.3.1　Angular CLIプロキシ概要 3.3.2　CORSによるクロスドメイン対応 3.3.3　Angular CLIプロキシの利用例 第4章 モダンWeb のバックエンド開発 4.1 モダンWebバックエンドの概要 4.1.1　処理内容 4.1.2　Web APIとREST 4.1.3　Web APIの例（ログイン） 4.1.4　Web APIの例（顧客データの取得） 4.1.5　Web APIの動作の追跡 4.2 顧客管理システムのバックエンド 4.2.1　使用ソフトウェア 4.2.2　Web API一覧 4.2.3　全体の処理フロー 4.2.4　ディレクトリ構造 4.3 Web APIの実装基盤 4.3.1　Expressの構造 4.3.1.1　概要 4.3.1.2　主要オブジェクト 4.3.1.3　ミドルウェア 4.3.1.4　ルーティング機能によるWeb API実装 4.3.1.5　ファイルパスのルーティング 4.3.1.6　ルーティング機能のまとめ 4.3.2　ExpressのWeb API処理の追跡 4.3.2.1　リクエストの受信 4.3.2.2　ファイルパスのルーティング 4.3.2.3　Web APIアクセスのルーティング 4.3.2.4　ルーティングの例外処理 4.4 Web APIの認証機能 4.4.1　認証方式 4.4.2　公開鍵とトークンの配布 4.4.3　シングルサインオンとトークン 4.4.4　JWTの概要 4.4.5　JWTライブラリ 4.4.6　ログインからトークン受信までの処理の確認 4.5 データベースの実装 4.5.1　SQLite3概要 4.5.2　顧客管理データベース構造の確認 4.5.3　データ内容の確認 4.6 Web APIのテスト 4.6.1　概要 4.6.2　JasmineによるWeb APIテスト 4.6.2.1　Jasmineについて 4.6.2.2　Web APIテストシナリオ概要 4.6.2.3　テストシナリオの例（ユーザーログイン） 4.7 顧客管理システム実装の詳細（ソースコード解説） 4.7.1　Webサーバー基盤 4.7.1.1　全体の中での位置づけ 4.7.1.2　Web サーバー起動時の処理フロー 4.7.1.3　ソースコード（初期化、ルート定義、起動） 4.7.2　共通利用クラス（型定義、定数値） 4.7.2.1　ブラウザへ返すデータの型（ResJson）定義（src\class\resJson.ts） 4.7.2.2　ユーザー情報のデータ型（User）定義（src\class\user.ts） 4.7.2.3　フロントエンドのリモート設定値（src\common\browserConfig.ts） 4.7.2.4　バックエンドの設定値（src\common\serverConfig.ts） 4.7.2.5　公開鍵と秘密鍵（src\common\key.ts） 4.7.3　共通利用クラス（データ処理） 4.7.3.1　HTTP レスポンス処理（src\common\appRes.ts） 4.7.4　ユーザー認証 4.7.4.1　全体の中での位置づけ 4.7.4.2　ID・パスワード認証フローと処理コード 4.7.4.3　トークンによる認証フローと処理コード（Auth.checkToken()） 4.7.5　JWTヘルパークラス 4.7.6　Web APIの処理 4.7.6.1　ユーザー情報取得 4.7.6.2　顧客情報取得 4.7.6.3　報告の登録 4.7.6.4　報告データ削除 4.7.6.5　報告履歴の取得 4.7.6.6　エラーログの登録 4.7.6.7　エラーログの削除 4.7.6.8　エラーログ取得 4.7.7　データベース処理（src\common\sqlite.ts） 4.7.7.1　全体の中での位置づけ 4.7.7.2　初期化 4.7.7.3　検索 4.7.7.4　削除 4.7.7.5　追加 4.7.7.6　更新 第5章 Angular実装パターンとReduxによる集中管理 5.1 コンポーネント概要 5.1.1　コンポーネントの構造 5.1.2　コンポーネント分割とは 5.1.3　コンポーネント分割の実装 5.1.4　コンポーネント間のデータ渡し（親から子） 5.1.5　コンポーネント間のデータ渡し（子から親） 5.1.6　コンポーネントのライフサイクル 5.2 コンポーネントの実装パターン 5.2.1　基本実装 5.2.1.1　1画面1コンポーネント 5.2.1.2　1画面複数コンポーネント 5.2.1.3　従来型とコンポーネント指向の違い 5.2.2　コンポーネントの同期方式 5.2.2.1　直接データ交換 5.2.2.2　親子連携 5.2.2.3　親子・サービス連携 5.2.3　同期機能を試す 5.2.3.1　コンポーネントの見える化ツールAugury 5.2.3.2　サンプルプログラムの概要 5.2.3.3　サンプルプログラムの実行 5.2.3.4　親子構造の確認 5.2.3.5　コンポーネント間のデータ渡し（親から子） 5.2.3.6　コンポーネント間のデータ渡し（子から親） 5.2.4　コンポーネント分割のルール 5.2.4.1　基本ルール 5.2.4.2　分割の大きさ 5.2.4.3　分割の例 5.2.5　コンポーネントのCSS設定 5.2.6　コンポーネント実装のまとめ 5.3 アプリ全体の実装パターン 5.3.1　アプリ全体のデータ同期 5.3.2　Reduxとは 5.3.3　Reduxを試す 5.3.3.1　サンプルプログラムの概要 5.3.3.2　サンプルプログラムの実行 5.3.3.3　サンプルプログラムの確認 5.3.3.4　Reduxの設定内容 5.3.3.5　Redux動作確認ツール 5.3.3.6　データ同期の動作確認 5.3.3.7　タイムマシンデバッグ 5.3.4　Reduxを使った前回終了時の画面復元 5.3.4.1　概要 5.3.4.2　自動復元（前回終了時の画面復元）の処理の流れ 5.3.4.3　自動復元機能を試す 5.3.4.4　ソースコード解説 5.3.5　Reduxを動作させるための設定 5.3.5.1　モジュール定義へ登録 5.3.5.2　actionの定義 5.3.5.3　reducerの定義 5.3.5.4　stateの定義 5.3.6　 Reduxの利用 5.3.6.1　actionの発行 5.3.6.2　状態変更時の通知受け取り 第6章 モダンWebのフロントエンド開発 6.1 規模の拡大を考慮したシステム構成 6.1.1　実行モジュールの分割 6.1.1.1　分割の考え方 6.1.1.2　モジュール分割例 6.1.1.3　モジュール分割の定義 6.1.1.4　分割モジュールごとのルート定義 6.1.1.5　分割モジュールの動作確認 6.1.2　コンポーネントの分割 6.1.2.1　分割の考え方 6.1.2.2　分割例 6.1.3　フォルダ構造 6.1.3.1　フォルダ構造の考え方 6.1.3.2　システム全体のフォルダ構造例 6.1.3.3　コンポーネントのフォルダ構造例 6.1.4　システム全体の連携の仕組み 6.1.4.1　独自イベントを使った時間の同期 6.1.4.2　Reduxを使った共通データの同期 6.1.4.3　顧客管理システムaction定義 6.1.5　構成要素の役割分担 6.1.5.1　構成要素の定義 6.1.5.2　コンポーネントの肥大化対策 6.1.5.3　最上位コンポーネントの実装 6.1.5.4　子孫コンポーネントの実装 6.1.5.5　画面専用サービスの実装 6.1.5.6　ルートコンポーネントと専用サービスの実装 6.1.6　利用ソフトウェア 6.2 基盤サービス 6.2.1　基盤サービス一覧 6.2.2　暗号サービス（crypto.service.ts） 6.2.2.1　概要 6.2.2.2　暗号キーの長さ 6.2.2.3　実装例 6.2.2.4　動作確認 6.2.3　暗号ストレージサービス（cryptoStorage.service.ts） 6.2.3.1　概要 6.2.3.2　実装例 6.2.3.3　動作確認 6.2.4　データベースサービス（db.service.ts） 6.2.4.1　概要 6.2.4.2　データベースの圧縮処理 6.2.5　グローバルエラーサービス（globalError.service.ts） 6.2.5.1　概要 6.2.5.2　実装例 6.2.5.3　エラー情報の自動アップロード 6.2.5.4　エラーハンドラーのモジュール登録 6.2.5.5　動作確認 6.2.6　グローバルイベントサービス（globalEvent.service.ts） 6.2.6.1　概要 6.2.6.2　利用例 6.2.6.3　実装 6.2.6.4　動作確認 6.2.7　http サービス（http.service.ts） 6.2.7.1　概要 6.2.7.2　実装例 6.2.7.3　動作確認 6.2.8　JWTサービス（jwt.service.ts） 6.2.8.1　概要 6.2.8.2　実装例 6.2.8.3　動作確認 6.2.9　ログアウトサービス（logout.service.ts） 6.2.9.1　概要 6.2.9.2　実装例 6.2.9.3　動作確認 6.2.10　ナビゲーションサービス（navigation.service.ts） 6.2.10.1　概要 6.2.10.2　画面遷移制御の仕組み 6.2.10.3　ナビゲーションサービスの利用 6.2.10.4　［ 戻る］ボタンによる画面遷移のキャンセル 6.2.10.5　実装例 6.2.10.6　動作確認 6.2.11　オフライン対応アップロードサービス（upload.service.ts） 6.2.11.1　概要 6.2.11.2　実装例 6.2.11.3　動作確認 6.3 機能ごとの実装 6.3.1　モバイル対応 6.3.1.1　概要 6.3.1.2　実装のポイント 6.3.1.3　実装例 6.3.2　無限スクロール 6.3.2.1　概要 6.3.2.2　実装のポイント 6.3.2.3　仕組みと処理フロー 6.3.2.4　処理フローと実装コード 6.3.2.5　バッファ枯渇時の動作 6.3.3　前回終了時の画面復元 6.3.3.1　概要 6.3.3.2　実装 6.3.4　国際化対応 6.3.4.1　概要 6.3.4.2　実装 6.3.5　画像縮小 6.3.5.1　概要 6.3.5.2　実装 付録A 顧客管理システムのビルドと実行手順 A.1 実行前の確認 A.2 通常実行モード A.3 その他の実行モード A.3.1　バックエンド実行モード A.3.2　バックエンド・デバッグ実行モード A.3.3　バックエンドAPI テスト実行モード A.3.4　バックエンドAPI テストシナリオデバッグ実行モード A.3.5　フロントエンド実行モード A.4 各章の動作確認時の実行モード A.5 ソースコード変更後の実行 A.6 トラブル対応 A.7 顧客管理システムのファイル一覧 付録B WebStorm によるNode.js のデバッグ B.1 デバッグの準備 B.1.1　WebStormのインストール B.1.2　デバッグの設定 B.2 デバッグの基本操作 B.3 監視変数の登録 B.4 デバッグ操作ボタン 付録C バックエンド関連用語 C.1 HTTP プロトコル C.2 セッションとクッキー C.3 Web APIリクエスト時のヘッダー C.4 Web APIレスポンス時のヘッダー C.5 ハッシュ値 C.6 公開鍵と秘密鍵を使った暗号と署名 C.7 Base64エンコード C.8 SQL文 C.9 ポート番号 付録D 顧客管理システムWeb APIテストシナリオ D.1 Web APIテストシナリオ（src\spec\test_sec.ts） D.1.1　ユーザーログイン D.1.2　ユーザー情報取得 D.1.3　顧客情報取得 D.1.4　報告登録 D.1.5　報告削除 D.1.6　報告履歴取得 D.1.7　管理者ログイン D.1.8　ログ登録 D.1.9　ログ取得 D.1.10　ログ削除 D.2 テスト用ユーティリティ D.2.1　ヘルパーメソッド（src\spec\testUtility.ts） D.2.2　テスト用定数（src\spec\testConst.ts） 付録E JWT 用の鍵ペア（秘密鍵と公開鍵）の作り方 索引

「双方向データバインディング」&「DI」で、書くコードの量が劇的に減少!「システム部分」「表示/入出力部分」「制御部分」機能を3つに分けてWebアプリ開発を容易に! 第1章 「AngularJS」の概要(「AngularJS」とは 「AngularJS」の特徴 ほか) 第2章 「AngularJS」を使う(「AngularJS」の設定について 「モジュール」とは ほか) 第3章 「AngularJS」で作る(最小構成を作る 「ルーティング」を設定する ほか) 第4章 モバイルで「AngularJS」(「Bootstrap」を設定する スタイルを整える ほか) 第5章 知っておくと便利なサイト(GitHub Stack Overflow ほか)