よいプラクティスの具体例 (ペアプロでわかるJavaScriptテスト入門 @ CROSS2014)
Intro2014/1/17(Fri) に開催される CROSS2014 にて、実況解説つき！ペアプロでわかるJavaScriptテスト入門というセッションを担当させていただくことになりました。 （ちなみに、去年のは CROSS2013 には 大規模JS開発徹底比較 という内容で参加させていただきました） 今日はこのセッションの意図と概要について書こうと思います。 テーマ「よいプラクティスの具体例」を増やしたい このセッションでは ペアプロとかTDDって良いとは聞くけどどう始めていいかわからない自分がやってるペアプロとかTDDが人と比べてどうなのか気になる方に向けて、 具体的にどう始めればいいか具体例の中で他にはどういった選択肢があるのかといった内容を見ていただくことを目的としています。 セッション内容ざっくり言うと「ペアプロで既存のコードにテストを足しつつ、その様子を解説してもらう」とい
grunt+TypeScriptで差分コンパイルにしてみた
プロジェクトでファイルが多くなってくると毎回全体でコンパイルし直すのが辛くなってきたので、編集したものだけ先にコンパイルするようにしてみた。 grunt-typescriptは別に設定して全体のチェックはそちらで行う前提。 （とにかく修正したファイルだけ先に書き出して欲しかった） 最初はnew TypeScriptとかしたかったけど、コンパイルが結構めんどそうだったのでtsc使った。 （grunt-execとかで良かったかもしれない） (function () { var cp = require('child_process'); grunt.event.on('watch', function(action, filepath) { var command = 'tsc ' + filepath; var childProcess = cp.exec(command, ''); chi
CSSファイルをJSから非同期読込する方法
CSSファイルをクライアントサイドだけで動的なURLつけて非同期読み込みしたい場合、単純に以下のようなコードを書くと同期読み込みになって読み込み完了まで他のファイルの読み込みがブロックされる。 (function () { var href = 'style sheet url'; var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); })(); これに関しては以下のように別のiframeを作成して読みこめば非同期で読み込めるので、他のファイルの読み込みをブロックしない。 （iOS, Androidで動作を確認） (fun
Google Analyticsのウェブテスト（A/Bテスト）をJSから使う方法
Google Analyticsのウェブテスト（A/Bテスト）とはGoogle アナリティクス公式サイト - ウェブ解析とレポート機能 – Google アナリティクスには「ウェブテスト」という名前でA/Bテストの機能が組み込まれており、この機能を使うと「AページとBページでどちらが成果が高いか」を判断することができます。 このA/Bテスト機能は元々Google Website Optimizerで提供されていましたが、Google Website OptimizerがGoogle Analyticsへ統合されたためA/Bテスト機能はGoogle Analyticsから設定するようになっています。 Google Analyticsのウェブテストの問題点ただ、Google AnalyticsにはGoogle Website Optimizerで言う「多変量（MVT）テスト」が存在せず、「A/
mobile safari向けFast Buttons（vclick）実装
mobile safariはclick時に300msの遅延が発生するのでmobile safari向けフレームワークではそれ回避用の実装が提供されてる。 jQuery Mobileの場合、vclick Mobile Boilerplateの場合、Fast Buttons Closure Libraryの場合、Creating Fast Buttons for Mobile Web Applications - Mobile — Google Developers ただ、それぞれFWに依存してるか、要素それぞれへ個別に適応する必要がったので、ライブラリ異存なしでdelegate的な実装を書いてみた。 fastButton - jsdo.it - Share JavaScript, HTML5 and CSS デモ 注意点として、マウス関係のイベントをかなり潰します。 clickは発行されない
JavaScript UnitTest Patterns
ここでは以下の順番でSinonJSとJsTestDriverを使用したJavaScriptのUnitTest Patternsを紹介します。 初期化の遅延非同期実行の同期化html, cssのテストイベントのテストその他問題になりうるコード初期化の遅延UnitTestを行う場合、まずは初期化functionが自動的に実行されないようにしましょう。 初期化functionをこちらの任意のタイミングで実行できるようにすることにより事前に対象外のコードをstub化したり、必要なfunctionへspyを仕込んだ状態でfunctionを実行できるようになります。 UnitTestの場合のみ初期化を遅延する一番簡単な方法はUnitTest実行時のみ条件分岐で初期化を止める方法です。 $(function () { if (window.sinon) { init(); } }); この方法は簡単かつ
jQueryのliveやdelegateは実際何をやってるのか
jQueryにはイベント制御のAPIとして、clickやmouseoverの元になるbindの他に、同じような呼び出し方のliveやdelegateが提供されている。 bindはDOM APIで提供されているaddEventListenerのwrapperだが、liveは以下のような実装になっている。 1. 第一引数のイベント名でdocument objectにlive用のイベントハンドラーをbindする 2. 1で設定したイベントハンドラー内でdocument object内に存在する要素上で発生したイベントを全てキャッチする ・イベントの発生元要素がbind時に設定されたセレクタに一致する場合、第二引数に指定されたユーザーのイベントハンドラーを呼び出す これはもともと「多量の要素に対してbindするとUIをロックしてしまう」という問題の対策として知られていた手法だが、liveはそれをj
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
