JavaScript
「モンティ・ホール問題」の解答がなかなか理解できないです。 『終物語』に出てきた確率の問題です。3つの閉まったドアのうち1つだけあるアタリのドアを開ける問題なのですが、この解答が直感的に理解がしがたい内容です。問題の詳細は以下の通り(Wikipedi…
あるAPIを並列に呼び出し、 1. APIへのリクエストがすべて成功したらSuccess 2. APIへのリクエストがひとつでも失敗したらFailure する、そんなプログラムを書きました。Node.jsとPromiseで実装しました。 サンプルコード クライアント側 サーバ側 処理結果 …
Web Workersは並列処理を実現できるHTML5のAPIです。高負荷な処理をワーカーに任せることで、ブラウザ上での処理の軽減が期待できます。このAPIを用いて、並列処理の開始/停止を行うサンプルプログラムを書きました。 例えば5秒くらいかかるような重い処理を…
クリックやドラッグ等のイベントが発生した時、そのイベントは要素の上層に向けて伝搬します。いわゆるバブリングと呼ばれるイベントの伝搬の仕組みです。 イベントの伝播の流れはstopPropagationメソッドやstopPropagationオプションを利用することで制御す…
HTMLでJavaScriptのsetIntervalを使った定期処理をしていると、ページを非表示にしても定期処理が続いていたりします。タブを切り替えて他ページを表示した時などに明示的に定期処理を開始/停止したいときは、visibilitychangeでページの可視性を検知して開…
HTML5のDrag and Drop APIを利用して、ドラッグ&ドロップでテキストをコピーする処理をメモしました。A要素をB要素にドラッグ&ドロップすることで、B要素のテキストをA要素のテキストで置き換えるサンプルコードです。
Indexed Databaseのアップグレードは、DBのオープン時にアップグレードバージョンを指定し、イベントハンドラonupgradeneededで検知してそこで一連のマイグレーション処理を行えば良さそうです。
Indexed Database APIは、値とオブジェクトをローカルに保存するインタフェースです。このインタフェースを利用して、Indexed Databaseにオブジェクトを追加(更新)/取得/削除する処理のサンプルを書きました。
ローカルストレージはkeyとvalueを指定してブラウザにデータを保持する仕組みです。valueは文字列のため、オブジェクトを保存したいときはJSON文字列に変換して格納するといった工夫が必要です。そのメモを残します。
既存コードに配列の要素をdeleteしているところがあったので、真似して要素の削除はdeleteを使っていたのですが、デバッグしていたらなんか要素数とlengthが合わない。調べてみたら、deleteはArrayのlengthを更新しないようでした。なんてこった! var testA…
「そういえば関数の引数にArray型を指定した場合って参照渡しだった!」ということを忘れていてちょっとハマったことがあったので、悔しかったからその挙動をメモします。JavaScriptで非同期処理関数の引数に渡したArrayの要素を変更したら、非同期処理後にA…
Javaで使われるクラス変数(static変数)、 class Hoge { static int hogera; } みたいな変数をJavaScriptで実現できないものかと試行錯誤しました。prototypeプロパティにオブジェクトをアタッチすればクラス変数っぽいものができそうです。クラス変数っぽい…
JavaScriptのvarは変数を宣言するキーワードで、関数内でvarを指定した変数はローカル変数となります。varで指定された変数に対してのアクセス権をあれこれ探ってみます。JavaScriptで静的に追加されたメソッドからのアクセス権についての続きになります。 …
JavaScriptでは、オブジェクトを作成した後にそのオブジェクトに対してプロパティやメソッドを追加することができる。けれど、その挙動がなかなか分かりづらく、とりわけアクセス権の理解に苦労しています。というわけで、アクセス権に関するコードをいろい…
JavaScriptで、thisに変数を指定したのはいいけれど、関数からアクセスできなかったり、予期せぬ値が返ってきたりでうわーてなることを何回か繰り返すうちに、それらの挙動が結合(binding)という挙動に関わっていることをやっと理解できてきました。というわ…
Sinon.JSとは、スタブやモックなどの実装に役立つJavaScriptのライブラリです。スタブを実装するための関数が充実していて、慣れるとテストがサクサク進められると思います。このSinon.JSを使って下記のような関数のスタブを実装しました。実装できたどうか…
QUnitとは、JavaScriptのテストフレームワークのひとつです。触ってみた感じ、テストコードへの依存性が少なく、導入も簡単にできました。このQUnitを使って、下記のような関数をテストするサンプルコードを作りました。(1) 戻り値ありの関数 (2) 引数がコー…
JavaScriptでカプセル化みたいなのってできるんかなー、と思ってカプセル化のやり方を色々調べました。プロパティを1つ持ち、そのプロパティに対するgetterとsetterを持つオブジェクトの実装を考えます。 thisキーワードは自身のインスタンスを指すキーワー…
JavaとJavaScriptのスコープの考え方は似通っているとは思いますが、もちろん違う部分もあるわけです。そんなわけで、Javaの挙動を参考にして考えると違和感を感じたスコープの振る舞いをメモしました。 ローカル変数は関数のどこで定義されても関数全体で有…
JavaScriptの関数は大きく分けて3つの方法で定義できるらしいです。(1) function命令で定義 (2) Functionのコンストラクタを利用して定義 (3) 関数リテラル表現で定義これらの方法で関数を定義して呼び出しするサンプルコードを書きました。 <html> <head><title>関数定義サンプ</title></head></html>…