WEBフレームワークはサーバーサイドルータを使用してURLをコントローラに対応づけ、ビューとモデルで動的コンテンツを生成していた。シングルページアプリケーションではクライアントサイドルータを作成し、サーバーへのリクエスト往復回数を取り除いて更に改善する。結局、WEBはドキュメント間をハイパーリンクで繋いでいるが、URLにハッシュタグを含めるとページはリロードしない。URLハッシュと呼ぶ。)Javascriptを使うとハッシュ変更時にブラウザがトリガーするイベントをリッスンできることを利用して、ユーザーに見せたいマークアップ(ビュー)を作成できる。テストしやすいルータを設計するAWSサービスは基本的にローカルマシンでは動かない。テストファーストで設計する為、ルータ設計から手を付ける。全体のテストではなく、小さな振る舞いのテスト(数ミリ秒で実行できる)を作成する。Jasmineテストを実行するテストを書くのにJasmineテスティングフレームワークを使う。公式https://jasmine.github.io/ブラウザからアクセスしてテストを実行http://learnjs.hogehoge.com.s3-website-us-east-1.amazonaws.com/tests/index.html※バグを報告した人がいてバグを再現出来ない時、報告者に対してテストにアクセスしてもらうように依頼する。デプロイ時にはテストもデプロイされるため、本番環境でテストを実行してもらい、自分ではそのテストを再現すれば良い。いう2つの関数に渡すコールバックにテストを書くことでテストをまとめることができる。最初のテストを書くdescribe関数とit関数に与えたテキストを組み合わせてテスト内容を表すセンテンスを作成する。it関数のit自体が、テスト名の付け方のヒントとなる。テスト本体ではルータ関数(Javascript関数)を実行する。ルータ関数の仕事はURLハッシュで定義したら適切なビューを返すこと。ここではshowViewという関数をlearnjsという名前空間(namespace)に置く。今回はハッシュ値を「#problem-1」として渡す。.problem-view').length).toEqual(1);});});|この時点でデプロイして読み込んでみると、HTMLにクラスを追加していないので、当然失敗する。名前空間を作成するshowViewをそのまま定義することも可能だが、名前が衝突しないように名前空間を作る。public/app.jsに記載。{};これだけ!関数と変数はこのオブジェクト内に追加していく。function→learnjs.showViewを作っていない為、関数ではないというエラー。$('.view-container').empty().append(problemView);}再びデプロイするとまたメッセージが変わる。1.→JavaScriptのエラーではなくなり、コード自体は正常に動いている。app_spec.jsが動いていてview-containerがないため追加する必要がある。</div>17行目のmarkupクラスを追加すると、public/tests/SpecHelper.jsの機能が働いて、public/index.htmlの内容をテストしてくれるようになる。※通常はtests/index.htmlのみチェック。18行目のview-containerクラスも追加することでテストは成功する。ルートを追加するルート(route)とはハッシュとビュー関数を関連付けること。routesオブジェクトにエントリーを追加することでビューを追加できる。ヌルケース(デフォルトケース)→いわゆるNULLではなく、空文字列や0などという意味。ハッシュがない場合にデフォルトページを表示する場合に使われる言葉。}}ランディングページビューをlanding-viewクラスをもつにいれて、アプリケーションとテストはランディングページビューを選択できるようになる。ビューパラメータを追加する今までの作り方ではアプリケーション拡張のたびにルート(ビュー)を作る必要があるため、パラメータ化してビューを組み立てる。ハッシュを名前とパラメータにハイフンをいれて分割する(ビューパラメータ)テストにはスパイを使うと、コードの2つの部分間の相互作用をテストできる。スパイを使って相互作用をテストするスパイはテストダブルの一種。実際のオブジェクトや関数の代役をつとめてテストをサポートする。Jasmineのspy関数を使う。→指定された関数を一時的にスパイに置き換える。スパイは自分に対する呼び出しを全て記録する。Jasmineのマッチャーを使うとスパイが特定の引数で呼び出された事を確認できる。テスト終了後、スパイはもとの関数に置き換わる。09:59【AWS】2章ハッシュイベントによるビューのルーティング~サーバーレスシングルページアプリケーション(OREILLY本)まとめ~Tweet広告を非表示にする関連記事2018-03-22【AWS】1章シンプルに始める~サーバーレスシングルページアプリケーション(OREILLY本)まとめ...ちょっと前に掲題の本を買いました。...2018-02-19【JS】jQueryを使って簡単にLoading画面をつくる要所のみ。JSでimgタグの数を拾ってきて、一つずつ読み込む。»プロフィールid:hiromode某PR会社勤務。2015年からフロントエンド従事。自分でサービスを作り流行らせるのが目標。主なスキルはHTML,CSS,JavaScript(Vue.js、jQuery),インフラ(AWS、VPS)、CakePHP、Gitなど。備忘録アイデアのつくり方を読んだメモAWSからのメールが迷惑メールになるときWordpress+S3+Cloudfrontで実現する、冗長構成対応の画像配信とメディアアップロードしてS3保存Wordpress等のサイトが500エラーで突然見れなくなった時に疑うメモリ不足とSwap領域について月別アーカイブはてなブログをはじめよう!hiromodeさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。