アイソモーフィックJavaScript

[cover photo]
TOPICS
Web , JavaScript
発行年月日
PRINT LENGTH
256
ISBN
978-4-87311-807-9
原書
Building Ismorphic JavaScript Apps
FORMAT
PDF EPUB
Ebook
3,080円
Ebookを購入する

アイソモーフィックJavaScriptは、クライアントサイド(ブラウザ)とサーバーサイドで同じコードを実行できるようにするためのフレームワークの総称。本書では、従来のアプリケーションが持つ問題点(読み込みの遅さ、SEO対策の困難さなど)を明らかにするところから始め、アイソモーフィックなアプリケーションの分類やアイソモーフィックさの度合いについて理解したうえで、アイソモーフィックなJavaScriptフレームワークを構築するための実践手法を解説し、Walmart、Airbnb、Facebook、Netflixといった大企業がアイソモーフィックJavaScriptを選んだ理由を明らかにします。読者は、なぜこのアプリケーションアーキテクチャーが、ページ読み込み速度やSEOコンパチビリティといった、ビジネス面でクリティカルな問題を解決するためのソリューションとして人気上昇中なのかを学べます。

関連ファイル

目次

賞賛の声
まえがき

第Ⅰ部 イントロダクションと基本的な概念

1章 アイソモーフィックJavaScriptが求められる理由
    1.1 アイソモーフィックJavaScriptの定義
    1.2 Webアプリケーションのアーキテクチャーの評価
        1.2.1 変化を求める風潮
        1.2.2 エンジニアとしての懸念
        1.2.3 利用可能なアーキテクチャー
    1.3 アイソモーフィックさが必要ない場合
    1.4 まとめ

2章 アイソモーフィックJavaScriptのスペクトル
    2.1 ビューの共有
        2.1.1 テンプレートの共有
        2.1.2 ビューのロジックの共有
    2.2 ルーティングの共有
    2.3 モデルの共有
    2.4 まとめ

3章 アイソモーフィックJavaScriptのカテゴリー
    3.1 環境に依存しないコード
    3.2 それぞれの環境にシムが用意されたコード
    3.3 まとめ

4章 サーバー側での描画を超えて
    4.1 リアルタイムWebアプリケーション
        4.1.1 アイソモーフィックなAPI
        4.1.2 双方向のデータの同期
        4.1.3 サーバー上でのクライアントのシミュレーション
    4.2 まとめ

第Ⅱ部 アプリケーションの作成

5章 アプリケーションの基盤
    5.1 Node.jsのインストールと実行
        5.1.1 ソースコードからのインストール
        5.1.2 Node.jsのREPLの操作
        5.1.3 npmを使ったプロジェクトの管理
    5.2 プロジェクトのセットアップ
        5.2.1 プロジェクトの初期化
        5.2.2 アプリケーションサーバーのインストール
        5.2.3 次世代JavaScript(ECMAScript 6)のコード
        5.2.4 ECMAScript 6からECMAScript 5へのトランスパイル
        5.2.5 開発のワークフローのセットアップ
    5.3 まとめ

6章 HTMLドキュメントを公開する
    6.1 HTMLのテンプレートの提供
    6.2 パスパラメーターとクエリ文字列
    6.3 まとめ

7章 アプリケーションの設計
    7.1 課題を理解する
    7.2 ユーザーのリクエストに応答する
        7.2.1 Applicationクラスの作成
        7.2.2 コントローラーの作成
        7.2.3 コントローラーのインスタンス化
        7.2.4 コントローラーの拡張
        7.2.5 レスポンスのフローの改善
    7.3 まとめ

8章 アプリケーションをクライアント側に転送する
    8.1 クライアント向けアプリケーションのバンドル化
        8.1.1 バンドル化ライブラリの選択
        8.1.2 バンドル化のタスクの作成
        8.1.3 クライアント側の実装の追加
    8.2 ユーザーのリクエストに応答する
        8.2.1 History APIの利用
        8.2.2 History APIへの応答と呼び出し
    8.3 クライアント側でのルーティング
        8.3.1 コントローラー上でレスポンスのフローを実行する
    8.4 コードの整理
    8.5 まとめ

9章 よく使われる抽象化
    9.1 抽象化する理由とタイミング
    9.2 cookieの読み書き
        9.2.1 APIを定義する
    9.3 リクエストのリダイレクト
        9.3.1 APIを定義する
    9.4 まとめ

10章 シリアライズ、デシリアライズ、関連付け
    10.1 データのシリアライズ
    10.2 コントローラーのインスタンス化
    10.3 データのデシリアライズ
    10.4 DOMイベントのハンドラの関連付け
    10.5 リハイドレートの動作確認
    10.6 まとめ

11章 ここまでの振り返り
    11.1 実運用への対応
    11.2 どの程度の構造が必要か知る
        11.2.1 変化を受け入れる
    11.3 まとめ

第Ⅲ部 実世界でのソリューション

12章 WalmartLabsでのアイソモーフィックなReact
    12.1 種の起源
        12.1.1 課題
        12.1.2 ソリューション
    12.2 Reactでのひな型のコードとパターン
        12.2.1 サーバー側での描画
        12.2.2 クライアント側での処理の継続
    12.3 Walmartでのアプローチ
    12.4 課題の克服
        12.4.1 1バイト目までの時間
        12.4.2 コンポーネントの描画の最適化
        12.4.3 パフォーマンスの改善
    12.5 今後の展望
    12.6 謝辞
    12.7 追記

13章 フルスタックのAngular
    13.1 アイソモーフィックJavaScript:未来のWebアプリケーション
    13.2 アイソモーフィックなAngular 1
        13.2.1 ng-conf 2015にて
    13.3 Angular 2でのサーバー側の描画
        13.3.1 サーバー側での描画のユースケース
        13.3.2 Webアプリケーションでのギャップ
        13.3.3 Angular 2の描画アーキテクチャー
        13.3.4 Prebootライブラリ
    13.4 Angular Universal
        13.4.1 フルスタックのAngular 2
    13.5 GetHuman.comの現状
    13.6 追記

14章 Brisket
    14.1 課題
    14.2 両者の長所
    14.3 初期のBrisket
    14.4 実現に向けて
    14.5 コードの自由
        14.5.1 テンプレート言語の自由
    14.6 すべての環境で一貫したAPI
        14.6.1 モデルとコレクション
        14.6.2 ビューのライフサイクル
        14.6.3 子ビューの管理
        14.6.4 環境を問わず期待どおりに機能するツール
    14.7 開発者の邪魔をしない
        14.7.1 ClientAppとServerApp
        14.7.2 レイアウトのテンプレート
        14.7.3 その他の知見
    14.8 今後の展望
    14.9 追記

15章 ColonyのNode.jsを使わないアイソモーフィックアプリケーション
    15.1 課題
    15.2 テンプレート
    15.3 データ
    15.4 トランスパイルされたビューモデル
    15.5 レイアウト
    15.6 ページメーカー
    15.7 フロントエンドのSPA
    15.8 最終的なアーキテクチャー
    15.9 今後の展望

16章 アイソモーフィックJavaScriptとユニバーサルJavaScript
    16.1 デザインパターン群、Flux、アイソモーフィックJavaScript
    16.2 いつでもJavaScriptに賭けよう
    16.3 用語と理解

索引