継続は力なり

タイトル通り定期的な更新を心掛けるブログです。

サーバーレスシングルページアプリケーション 2章

タダです。

今回はサーバーレスシングルページアプリケーション2章で勉強したことをまとめていきます。 www.oreilly.co.jp

章立ては以下のようになっています。

  • 1章 シンプルにはじめる
  • 2章 ハッシュイベントによるビューのルーティング
  • 3章 シングルページアプリケーションに必要なもの
  • 4章 Amazon CognitoによるIdentity as a Service
  • 5章 DynamoDBにデータを格納する
  • 6章 Lambdaを使って(マイクロ)サービスを作る
  • 7章 サーバーレスのセキュリティ
  • 8章 スケールアップする

2章のまとめ

  • 今回はハッシュイベントを使って、動的マークアップの作成と表示をトリガーするルータを作る
    • ルータは事前に定義されているルータを使って、URLハッシュとビュー関数を対応づける
  • テストファーストのアプローチで書いたユニットテストを使ってルータをテストする
  • テストを書くためにJasmineを使う
  • Jasmineでは、describeとitという二つの関数を渡すコールバックにテストを書くことでテストをまとめられる
    • describeは、テストにコンテキストとセットアップを加えられる
    • itは、個別のテストを書くために使う
  • 簡単なテストのためのコードを書いてアクセスするとこちらのようなページに遷移する
describe('Learnjs', function(){
  it('can show a problem view', function() {
    learnjs.showView('#problem-1');
    expect($('.view-container .problem-view').length).toEqual(1);
  });
});

f:id:sadayoshi_tada:20180520123551p:plain

  • ルータ関数のテストを成功させるためには3つのことを追加する必要がある
    • ルータにビューを追加する場所を与えるため、ビューコンテナを追加する必要がある
    • showView関数をつくって最小限の問題ビューを作る必要がある
    • ルータ関数と残りのアプリケーションを配置する名前空間を作成する必要がある
  • ルートを導入するためには別のテストw作ることでその振る舞いを作る必要がある
  • ビューをパラメータ化する
    • ハッシュを二つのパーツ、名前とパラメータに分割して、区切り文字としてハイフンを入れる
    • 振る舞いをテストするために、スパイ(spy)という新しい要素を導入する
  • スパイはテストダブルの一種
    • 実際のオブジェクトや関数の代役を務めることでテストをサポートする
    • スパイを使ってルータと問題ビュー関数の相互作用を確認する
    • JasmineのspyOn関数を使う
  • 問題ビューのテストをもっと大きなスコープにまとめるために問題ビューのためのdescribeセクションを作って、describe関数に入れる方が良い
  • シングルページアプリケーションは一度ロードするだけで処理が終わらないこともあるので、JavaScriptを置いてページローディング機構を作る
    • jQueryの$.ready()関数を使う
  • 最終的にテストが通るように改修していくと、以下の画面のようにオールグリーンになる f:id:sadayoshi_tada:20180617175307p:plain

次は3章で問題ビューを実装していきます。