2017/05/31

[JavaScript]オブジェクトの無効なプロパティをすべて削除する

とあるツールにJSONを渡すとき、極力ツールのデフォルトの値を使いたかった。しかし、空文字やnull、undefinedなどのプロパティがあるとデフォルト値がうまく設定されなかった。
そのため、オブジェクトに含まれる無効なプロパティ(空文字、null、undefinedなど)など任意の条件でプロパティを削除する関数をつくった。

2017/05/30

ES6のObject.assignがシャローコピーなのでディープコピーする方法を考える

ES6(ES2015)で実装されたObject.assignでディープコピーできると思っていた時期が私にもあった。
Object.assignでディープコピーして(した気になって)、プロパティの値を変更したとき、元のオブジェクトにも影響していることに気づいた。

// Object.assign.js
const obj1 = {
  hoge: 'hoge',
  fuga: {
    foo: 'foo'
  }
};

// ディープコピーのつもり
const obj2 = Object.assign({}, obj1);

obj2.hoge = 'hogehoge';

// obj1.hoge: 'hoge'  obj2.hoge: 'hogehoge' ← ディープコピーされてる?
console.log('obj1.hoge:', obj1.hoge, 'obj2.hoge:', obj2.hoge);


obj2.fuga.foo = 'foofoo';

// obj1.fuga.foo: 'foofoo'  obj2.fuga.foo: 'foofoo' ←?!?! 
console.log('obj1.fuga.foo:', obj1.fuga.foo, 'obj2.fuga.foo:', obj2.fuga.foo);

プリミティブ型はコピーされているのだが、参照型(上記の例ではObject)では参照先がコピーされていた。

2017/05/25

[JavaScript]動的なテキストの幅を取得し、スタイルを適用する

動的に生成されるテキストを、その幅にあわせてスタイルを適用したいときがある。
しかし、文字数による判定では英語や日本語による違い、等幅フォントやプロポーショナルフォントによる違いを考慮しなければならない。
バイト数による判定も、同様の違いや文字コードによる違いがある。

「テキストが表示されたときの幅」を取得し、その「幅」で判定できれば、それが一番正確だろう。
ということで、動的に表示されるテキストの幅(width)を取得し、幅にあわせてスタイルを適用できるようにする。

2017/05/23

Sortable.jsでD&Dしたときに:hoverのスタイルが残るバグの対処法

jQuery不要でドラッグ&ドロップで要素の並べ替えができるSortable.jsを使っていたのだが、Chromeで不可解なバグを見つけてしまったのでその対処法をまとめる。(※詳しくは後述するがSortable.jsのバグではない)

2017/05/22

Karma+mocha+chaiでNode.jsとブラウザで同じコードでテストする

Node.jsでもブラウザでも使えるライブラリを作っているときに、「どちらも同じテストコード(同一ファイル)を使って実行できないかなぁ?」と思い、いろいろ調べた。

Karmaがフロントエンドのテストツールで有名なので、これを使ってみる。
また、テストコードについては使い慣れているmocha+chaiのセットで書く。
(mocha+power-assertとかJasmineとかでもできるけど…)