とあるツールにJSONを渡すとき、極力ツールのデフォルトの値を使いたかった。しかし、空文字やnull、undefinedなどのプロパティがあるとデフォルト値がうまく設定されなかった。
そのため、オブジェクトに含まれる無効なプロパティ(空文字、null、undefinedなど)など任意の条件でプロパティを削除する関数をつくった。
2017/05/31
2017/05/30
ES6のObject.assignがシャローコピーなのでディープコピーする方法を考える
Labels:
JavaScript
ES6(ES2015)で実装されたObject.assignでディープコピーできると思っていた時期が私にもあった。
Object.assignでディープコピーして(した気になって)、プロパティの値を変更したとき、元のオブジェクトにも影響していることに気づいた。
プリミティブ型はコピーされているのだが、参照型(上記の例ではObject)では参照先がコピーされていた。
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]動的なテキストの幅を取得し、スタイルを適用する
Labels:
JavaScript
動的に生成されるテキストを、その幅にあわせてスタイルを適用したいときがある。
しかし、文字数による判定では英語や日本語による違い、等幅フォントやプロポーショナルフォントによる違いを考慮しなければならない。
バイト数による判定も、同様の違いや文字コードによる違いがある。
「テキストが表示されたときの幅」を取得し、その「幅」で判定できれば、それが一番正確だろう。
ということで、動的に表示されるテキストの幅(width)を取得し、幅にあわせてスタイルを適用できるようにする。
しかし、文字数による判定では英語や日本語による違い、等幅フォントやプロポーショナルフォントによる違いを考慮しなければならない。
バイト数による判定も、同様の違いや文字コードによる違いがある。
「テキストが表示されたときの幅」を取得し、その「幅」で判定できれば、それが一番正確だろう。
ということで、動的に表示されるテキストの幅(width)を取得し、幅にあわせてスタイルを適用できるようにする。
2017/05/23
Sortable.jsでD&Dしたときに:hoverのスタイルが残るバグの対処法
jQuery不要でドラッグ&ドロップで要素の並べ替えができるSortable.jsを使っていたのだが、Chromeで不可解なバグを見つけてしまったのでその対処法をまとめる。(※詳しくは後述するがSortable.jsのバグではない)
Labels:
HTML/CSS
,
JavaScript
2017/05/22
Karma+mocha+chaiでNode.jsとブラウザで同じコードでテストする
Labels:
JavaScript
Node.jsでもブラウザでも使えるライブラリを作っているときに、「どちらも同じテストコード(同一ファイル)を使って実行できないかなぁ?」と思い、いろいろ調べた。
Karmaがフロントエンドのテストツールで有名なので、これを使ってみる。
また、テストコードについては使い慣れているmocha+chaiのセットで書く。
(mocha+power-assertとかJasmineとかでもできるけど…)
Karmaがフロントエンドのテストツールで有名なので、これを使ってみる。
また、テストコードについては使い慣れているmocha+chaiのセットで書く。
(mocha+power-assertとかJasmineとかでもできるけど…)
登録:
投稿
(
Atom
)




