JavaScriptでCSVファイルなどを文字化けさせずに出力する方法

JavaScriptでCSVやテキストファイルなどを出力したとき、環境や見るツールによっては文字化けしてしまう。たとえばCSVで出力して、テキストエディタでは読めるけど、Excelで開くと文字化けするなど。

結論からいうと、テキストの先頭にBOMをつければ解消される。
ということで、各ブラウザ（IE, Safari, Firefox, Chrome, Opera...）でファイルを出力するときに文字化けさせない方法をまとめる。

BOM（Byte Order Mark）とは

そもそもBOMとはなんぞや？

Unicodeの符号化形式で符号化したテキストの先頭につける数バイトのデータのことである。このデータを元にUnicodeで符号化されていることおよび符号化の種類の判別に使用する。

バイトオーダーマーク - Wikipedia

具体的に説明すると、Unicodeが登場したころ各国でいろんな文字コードが使われていた。日本ならSJIS、アメリカならASCIIといった具合に。

そこでUnicodeなのかSJIS,ASCIIなのかを明確に区別する必要があり、テキストの先頭に特定のコードを埋め込み区別できるようにしていた。そのコードがBOM。
ちなみにUTF-8の場合は「0xEF 0xBB 0xBF」という3バイトを先頭につける。

ライブラリを使わずJavaScriptでインクリメンタルサーチを実装する

インクリメンタルサーチとはキー入力ごとに自動的に検索処理を行う手法のひとつ。
ただ環境によってはライブラリが使えず、自分たちで実装する必要があったりする。
ということで、今回は素のJavaScriptのみでインクリメンタルサーチを実装する。

HTML

<input type='text' id="keyword">

<ul id="list">
</ul>

【PR】EaseUS Partition Master Freeで簡単パーティション操作

Ubuntuをインストールしてデュアルブートにするためにパーティションソフトを探していたとき、なんと偶然にもEaseUSの中のから「弊社のソフトウェア使ってみませんか？」というメールをいただいたのでさっそく使ってみた。

いままでパーティションソフトといえば、Buffalo社のDisk Formatter、Ubuntuに入ってるGparted、Windowsの標準ディスク管理ソフトの3種類なので、他社製品と比較して正直な感想を書いていく。

【JavaScript】ライブラリを使わずにプログレスバーを実装する

プログレスバーを使いたいけどそのためだけにBootstrapやjQueryを入れるのもなぁ…。
ということで、JavaScriptでプログレスバーを実装してみた。

HTML/CSS

<div class="app">
  <p>進捗: <button id="up">+</button> <button id="down">-</button></p>

  <div id="prog-bar" class="progress">
    <div class="progress-bar">
    </div>
  </div>
</div>

.progress がプログレスバーの外枠。
.progress-bar がプログレスバーの中身。
この辺はBootstrapと同じ。

VSCodeで素のJavaScriptでも強力に自動補完させる方法

個人開発ではTypeScriptを使っているが、小さなアプリや仕事では素のJavaScriptを使っている。でも、やっぱり自動補完が効かないのはツライ。

そこで、VSCodeでなんとかIDE並に補完できないかと検証していたら、なんかうまいこと自動補完する方法をみつけた！
ということで、VSCodeで素のJavaScriptでも強力に補完させる方法を紹介する。

開発環境

• Mac OS X Yosemite
• npm 3.3.12
• typings 0.6.8
• VSCode 0.10.9