読者です 読者をやめる 読者になる 読者になる

発熱するマイナー魂

隠れた名作の発掘が生きがい。サブカル作品の感想とIT技術メモ中心のブログです。

JavaScript

【Node.js】Promiseを利用してAPIを並列に呼び出す

あるAPIを並列に呼び出し、 1. APIへのリクエストがすべて成功したらSuccess 2. APIへのリクエストがひとつでも失敗したらFailure する、そんなプログラムを書きました。Node.jsとPromiseで実装しました。 サンプルコード クライアント側 サーバ側 処理結果 …

Web Workersで並列処理の開始と停止を実装する

Web Workersは並列処理を実現できるHTML5のAPIです。高負荷な処理をワーカーに任せることで、ブラウザ上での処理の軽減が期待できます。このAPIを用いて、並列処理の開始/停止を行うサンプルプログラムを書きました。 例えば5秒くらいかかるような重い処理を…

stopPropagationメソッドとuseCaptureオプションでイベントの伝搬を制御する

クリックやドラッグ等のイベントが発生した時、そのイベントは要素の上層に向けて伝搬します。いわゆるバブリングと呼ばれるイベントの伝搬の仕組みです。 イベントの伝播の流れはstopPropagationメソッドやstopPropagationオプションを利用することで制御す…

ページの表示/非表示状態を検知して定期処理を開始/停止する

HTMLでJavaScriptのsetIntervalを使った定期処理をしていると、ページを非表示にしても定期処理が続いていたりします。タブを切り替えて他ページを表示した時などに明示的に定期処理を開始/停止したいときは、visibilitychangeでページの可視性を検知して開…

A要素をB要素にドラッグ&ドロップして、A要素のテキストをB要素にコピーする

HTML5のDrag and Drop APIを利用して、ドラッグ&ドロップでテキストをコピーする処理をメモしました。A要素をB要素にドラッグ&ドロップすることで、B要素のテキストをA要素のテキストで置き換えるサンプルコードです。

【JavaScript】Indexed Databaseのアップグレード処理メモ

Indexed Databaseのアップグレードは、DBのオープン時にアップグレードバージョンを指定し、イベントハンドラonupgradeneededで検知してそこで一連のマイグレーション処理を行えば良さそうです。

【JavaScript】Indexed Database APIを利用してオブジェクトを追加/取得/削除する

Indexed Database APIは、値とオブジェクトをローカルに保存するインタフェースです。このインタフェースを利用して、Indexed Databaseにオブジェクトを追加(更新)/取得/削除する処理のサンプルを書きました。

【JavaScript】ローカルストレージにオブジェクトを保存する

ローカルストレージはkeyとvalueを指定してブラウザにデータを保持する仕組みです。valueは文字列のため、オブジェクトを保存したいときはJSON文字列に変換して格納するといった工夫が必要です。そのメモを残します。

Arrayの操作を間違えるとlengthと要素数が合わなくなったりする

既存コードに配列の要素をdeleteしているところがあったので、真似して要素の削除はdeleteを使っていたのですが、デバッグしていたらなんか要素数とlengthが合わない。調べてみたら、deleteはArrayのlengthを更新しないようでした。なんてこった! var testA…

Array型とかObject型は引数が参照渡しなので、忘れているとうわーってなる

「そういえば関数の引数にArray型を指定した場合って参照渡しだった!」ということを忘れていてちょっとハマったことがあったので、悔しかったからその挙動をメモします。JavaScriptで非同期処理関数の引数に渡したArrayの要素を変更したら、非同期処理後にA…

JavaScriptでクラス変数っぽいものを作る

Javaで使われるクラス変数(static変数)、 class Hoge { static int hogera; } みたいな変数をJavaScriptで実現できないものかと試行錯誤しました。prototypeプロパティにオブジェクトをアタッチすればクラス変数っぽいものができそうです。クラス変数っぽい…

JavaScriptでvar指定された変数へのアクセス権について

JavaScriptのvarは変数を宣言するキーワードで、関数内でvarを指定した変数はローカル変数となります。varで指定された変数に対してのアクセス権をあれこれ探ってみます。JavaScriptで静的に追加されたメソッドからのアクセス権についての続きになります。 …

JavaScriptで静的に追加されたメソッドからのアクセス権について

JavaScriptでは、オブジェクトを作成した後にそのオブジェクトに対してプロパティやメソッドを追加することができる。けれど、その挙動がなかなか分かりづらく、とりわけアクセス権の理解に苦労しています。というわけで、アクセス権に関するコードをいろい…

JavaScriptの『結合』という挙動をやっと理解できてきた

JavaScriptで、thisに変数を指定したのはいいけれど、関数からアクセスできなかったり、予期せぬ値が返ってきたりでうわーてなることを何回か繰り返すうちに、それらの挙動が結合(binding)という挙動に関わっていることをやっと理解できてきました。というわ…

Sinon.JSを用いたStubの実装例

Sinon.JSとは、スタブやモックなどの実装に役立つJavaScriptのライブラリです。スタブを実装するための関数が充実していて、慣れるとテストがサクサク進められると思います。このSinon.JSを使って下記のような関数のスタブを実装しました。実装できたどうか…

QUnitを用いた単体テストの実装例

QUnitとは、JavaScriptのテストフレームワークのひとつです。触ってみた感じ、テストコードへの依存性が少なく、導入も簡単にできました。このQUnitを使って、下記のような関数をテストするサンプルコードを作りました。(1) 戻り値ありの関数 (2) 引数がコー…

JavaScriptでカプセル化のコードを書く

JavaScriptでカプセル化みたいなのってできるんかなー、と思ってカプセル化のやり方を色々調べました。プロパティを1つ持ち、そのプロパティに対するgetterとsetterを持つオブジェクトの実装を考えます。 thisキーワードは自身のインスタンスを指すキーワー…

違和感を感じるJavaScriptのスコープの振る舞い

JavaとJavaScriptのスコープの考え方は似通っているとは思いますが、もちろん違う部分もあるわけです。そんなわけで、Javaの挙動を参考にして考えると違和感を感じたスコープの振る舞いをメモしました。 ローカル変数は関数のどこで定義されても関数全体で有…

JavaScriptの関数は3つの方法で定義できるらしい

JavaScriptの関数は大きく分けて3つの方法で定義できるらしいです。(1) function命令で定義 (2) Functionのコンストラクタを利用して定義 (3) 関数リテラル表現で定義これらの方法で関数を定義して呼び出しするサンプルコードを書きました。 <html> <head><title>関数定義サンプ</title></head></html>…