Dexie.jsはIndexedDBを超シンプルに扱えるミニマリストのためのライブラリ

ミニマリスト()にオススメのIndexedDBラッパー[Dexie.js](http://dexie.org/)を紹介します。 ブラウザアプリを作るときの永続化先としてIndexedDBを使うことが多いと思いますが、IndexedDBは少しIFが複雑なのがネック。 それをシンプルにしてくれるのが今回紹介するDexie.jsです。Dexie.jsは複雑なIndexedDBのIFを薄く包み込んで簡潔にしてくれます。 以下にDexie.jsのザックリとした使い方を載せました。 (ほとんど[Quick Reference](https://github.com/dfahlander/Dexie.js/wiki/API-Reference#quick-reference)の翻訳です)

[JS標準] Promiseでコールバック地獄を解消しよう

JavaScriptのES6で Promise が標準装備されました。これはPromiseパターンを実現するためのAPIです。Promiseのメソッドチェーン（then）を使うことで、JSコードに有りがちなコールバック地獄から解放されるという大きなメリットがあります。
以下は Promise を使った簡単なサンプルです。

JS標準API Object.observe() でデータバインディング

オブジェクトの変更を監視できる Object.observe() が Chrome 36 Beta から利用可能になりました。
これにより標準APIだけでデータ・バインディングが可能になります。データ・バインディングは、例えば、アプリの「設定」が変更された場合などに効率的に設定データをアプリに反映したいときなどに利用されます。これが標準APIとして利用できるようになったということは、ソースコードがシンプルになるという他にも、無駄なポーリングをする必要がなくなるのでパフォーマンスが改善されるというメリットもあります。
以下は Object.observe() を使ったサンプルコードです。

JavaScriptでクラスを実現する方法【暫定版】

JavaScriptでもECMAScript6になってようやく「クラス構文」が実装されようとしていますが、現在はまだほとんどのブラウザで実装が進んでいないようです。クラス構文の実装を待てない人は以下の方法でクラスを実現することができます。
※タイトルに【暫定版】とつけたのは現在のJSバージョン(ECMAScript6)にもうすぐクラス構文が実装される予定だからです。

jsソースをSublimeTextから直接実行する方法

SublimeTextで書いたJavaScriptコードをちょっと試してみたいときに、いちいちブラウザを立ち上げてデバッグするのは面倒です。そんなときは下の方法でSublimeTextからjsコードを直接実行してみましょう。

Brackets：軽量JavaScriptIDE

最近はJavaScript IDEとして「Brackets」を使っています。
Eclipseほど高機能はいらないけど、とにかく軽くて、テキストエディタよりもそこそこ便利なIDEを求めている人にはぴったりです。
JavascriptIDEとはいえ、もちろんHTMLやCSSにも対応しています。
Bracketsには、Windows版の他にもMac版やLinux版があります。

[JavaScript]最速の配列ループ処理

大量の配列データを捌くときは少しでも速い処理を心がけたいものですが、JavaScriptで配列処理を少しでも速くするにはどうすればよいのでしょうか。今回はちょっと基本に戻って、JavaScriptで最速の配列ループ処理を再確認してみたいと思います。

JavaScriptでオンライン/オフライン状態を取得

JavaScriptでネットワークの状態（オンライン/オフライン）を知ることができます。

KateでJavaScriptやJSONをフォーマット

テキストエディタKateでJavaScriptやJSONのコードを綺麗に整形（フォーマット）するには、Kate用Scriptを自作する必要があります。自作といってもとても簡単ですので、もしあなたがKateユーザなら、Kate用Scriptの作成の練習も兼ねて作っておくことをおすすめします。

[JavaScript] オブジェクト配列のソート

2018/02/07更新: ECMAScript 2015 からは標準でソートが簡単にできるようになりました。 更新前の記事がだいぶ古かった（ECMAScript 2015 より前に書きました）にもかかわらず、この記事に結構アクセスがあったので、いつまでも放置せずアップデートしておきました:

CSSとピュアJavaScriptだけでトーストとかポップアップ

モバイルアプリやWebアプリでよく使われる表現方法として、トーストやポップアップがあります。
それらをCSSとピュアなJavaScriptだけで実現してみました。

[HTML5]XMLHttpRequestでウェブスクレイピング

Chromeアプリでウェブスクレイピングするには、クロスドメインに対応した XMLHttpRequest Level2を使います。
Chromeアプリでと書きましたが、XMLHttpRequestはHTML5仕様のため、実際にはChromeアプリに限定されるわけではありません。ですから、今から紹介するサンプルは、HTML5標準のウェブスクレイピング技術として参考になるかと思います。
下のサンプルは、「ヤフー天気予報」へアクセスしてページのタイトルを取得するだけの簡単なものです。

[HTML5]FileSystemAPIでファイルやディレクトリを操作

HTML5の FileSystem API を使ってファイルを操作してみました。
忘れやすいので備忘録としてメモ。

サンプルには下の処理が含まれています。

• Temporary/Persistent領域確保 (webkitRequestFileSystem)
• フォルダ作成 (DirectoryEntry.getDirectory)
• ファイル作成 (FileEntry.getFile)
• ファイル書込 (FileWriter)
• ファイル読込 (FileReader)
• ファイル削除 (FileEntry.remove)

※なおサンプルはChromeブラウザで動かすことを前提にしています。webkitなprefixをmozにすればMozilla系でも動くかもしれませんが自分は試してません。

[JavaScript]ライブラリを使わない非同期ループ

jQueryなどのライブラリに依存しないでお手軽に非同期ループを実現する方法。
これは結構使えるのでメモ。