あるオブジェクトから、特定のプロパティのみ除外した新しいオブジェクトを作りたい場合がある。 const p1 = { x: 0, y: 1, z: 2, }; // p1からzプロパティを除外した新しいオブジェクトを作る const p2 = Object.assign({}, p1); delete p2.z; console.log(…
TypeScriptで型の恩恵を受けられるようにReduxアプリケーションのコードを書こうとすると、同じようなことを繰り返し書かなければならないところがある。顕著なのはAction周りだと思う。同じことを思う人が多いのか、既に楽に書くためのモジュールがたくさん…
以前作ったslideshare scrollというユーザースクリプトでQiitaのスライドにも対応しようと思ったものの、3年前のコードで無駄が多いので一から書き直した。 wheel-de-scroll.user.js - Gist createWheelHandlerで前後ボタンの取得を遅延させているのは、Qiit…
OctoLinkerという、より高機能な拡張機能が既に存在した。 を作った。GitHub上でのコードリーディングが少し楽になる（じっくり読むならgit clone）。 link-to-module.user.js ソースコード - Gist link-to-module.user.js RAW (インストール)
JavaScript でオブジェクトに accessor property を定義したとき、継承先でそのプロパティの getter, setter のどちらか一方のみを override するのは一筋縄にはいかない。例として、長方形を表す Rectangle と、正方形を表す Square を定義することを考える…
url.txtに書かれているURLを取得し、そのURLのリソースの内容を取得し、1秒後にその内容をalertするという例（のための例）を考える。まずは普通に書いてみる。 var client = new XMLHttpRequest; client.open('GET', 'url.txt'); client.onload = function …
はじめに：IE 11、Firefox 28、Chrome 34で試しているJavaScriptのErrorオブジェクトにはstackプロパティにコールスタックを表す文字列がセットされる。これは現行のECMAScript仕様では規定されておらず、実装によって違いがある。 function foo() { bar(); …
JavaScriptを始めたころはprototypeオブジェクトが何なのかよく分からなかったけど、その名の通り「見本」あるいは「原型」なんだと分かれば、コンストラクタ関数とprototypeオブジェクトの関係は単純だと思える。 例として、人を表すオブジェクトを考えてみ…
IE以外のブラウザであれば、関数.nameで関数名を取得することができる。 var func = function hoge() { } func.name; // => "hoge" 事実上標準でES6にも取り入れられそう。しかしIEではバージョン11においても関数.nameは定義されていない。そこで、Function…
DOMTokenListを文字列専用のSetとして使えそうと思ったけど、空白を含む文字列を追加できないので使いづらかった（DOMTokenListを得られるのはclassListかrelListで、どちらもセパレータが空白）。 var set = document.createElement('div').classList; set.…
Setを似非実装してみた。sizeではなくlengthならArray.prototypeのメソッドを転用できるのに。 似非Setdeleteは予約語なので、関数名に同名を付けられない。Setを既に実装しているFirefoxでは、Set.prototype.delete.name === 'delete'となる。Function#name…
JSLintでは ++ を使うとエラーになる。++i の代わりに i += 1 と書くようにということのようだ。でも、+= 1 は ++ の正確な代替ではなかった。加法演算子は被演算子の少なくとも一方が文字列なら、文字列連結処理になる。一方、前置増分演算子 (++) は初めに…
Array.prototypeの大半のメソッドは、配列以外のオブジェクト（NodeListなどの擬似配列など）にも転用できるように汎用的に定義されている。Array.prototype.concatもその一つだけど、他のメソッドとは異なりthis値に配列っぽさは求められておらず、どんなオ…
CSS4 セレクタエンジンの事始めとして。字句解析の範囲では、CSS3 とそれほど変わらない。違いは Reference combinator で使う「/」と、セレクタの subject を指定する「!」くらい。 yonQuery/lexer.js at master · rikuba/yonQuery · GitHub デモ用のページ…
NodeListやHTMLCollectionを配列(Array)に変換する方法の一つに、Array.prototype.sliceを使う方法がある。 var array = Array.prototype.slice.call(document.getElementsByTagName('A')); でも、最近の実装であればArray.applyもその用途に使える。 var ar…
FirefoxではArray.prototypeやString.prototypeにあるメソッドを簡単に転用できるように、コンストラクタ（Array, String）自身に汎用メソッド（generic method）が定義されています。 これにより、 Array.prototype.forEach.call(nodeList, body.appendChil…
JavaScriptのforEach的なものでbreakしたい話 - 車輪を再発明 / koba04の日記 思いつき。break文のように入れ子になった内側のループの中から外側のループも抜けられるように。 function Break(target) { this.target = target; } function forEach(array, c…
JS Bin Array.apply(null, Array(100)) .map(function () { return Math.random() * 1000 | 0; }) .map(String.fromCharCode) .sort() .map(function (c) { return c.charCodeAt(0); }); 140文字に収まらなかった。
サンプルコード <title>TEST</title> <body> <input id="input1"> <form> <input id="input2"> </form> <pre><script> function w(text) { document.writeln(text); } try { w('input1: ' + input1); } catch (e) { w('input1 is undefined'); } try { w('input2: ' + input2); } catch (e) { w('input2 is undefi…</pre></body>
wheel de slideというユーザースクリプトとして作り直した。以下の内容はもう古い。 version 1.2: speakerdeck, docs.google.comにも対応。 version 1.3: slideshareでめくり終えたときに表示されるスクリーンを考慮するように修正。 https://gist.github.co…
多分javascriptについての質問です。h1,h2,h3と見出しが入ってい… - 人力検索はてな ({ observe: function (doc) { this.iterator = doc.createNodeIterator(doc, NodeFilter.SHOW_ELEMENT, this, true); doc.addEventListener('keydown', this, false); }, …
パターンの末尾に「|」を付け加えると、その正規表現は常にマッチする。 /aaa/.exec("xyz"); // => null /aaa|/.exec("xyz"); // => [""] これを使えば、ある位置でのみパターンマッチを行うということ（Perl の正規表現で「\G」のメタ文字を使うようなこと…
キャプチャした部分文字列を、文字クラスや先読みに転用できることに気づいた。 順不同の組み合わせ 例えば、ショートカットキーを表す文字列（ここでは ctrl+shift+alt+x とする）にマッチする正規表現において、ctrl と shift と alt の順番に関わらずマッ…
Firefoxのclickイベントは、イベントリスナーの登録先がdocumentか要素かによって、中・右クリックも捕捉するかどうかが変わる。 /* Firefox 3.6.13 */ document.addEventListener('click', function (e) { alert(e.button); /* 左クリック、中クリック、右…
Firefox 13 でAlt+クリックでリンク先のリソースを保存する機能が無効化された。この機能が必要ないのであれば、以下のスクリプトは必要ない。 以前のようにAlt+クリックでリンク先のリソースを保存したい場合はabout:configでbrowser.altClickSaveをtrueに…
次の例で、テキストボックスの前、あるいはテキストボックス内に「hoge」という文字列の疑似要素は挿入されない。 <style> input:before { content: "hoge"; } </style> <input> CSS 2.1の仕様書にあたる。 As their names indicate, the :before and :after pseudo-elements speci…
Google Chromeで2ちゃんねるの板やスレッドへのリンクを踏んだときに2ch専用ブラウザ（Janeなど）を開く方法。 URL書き換えエクステンションでhttpを適当な文字列に書き換え →レジストリにそのプロトコルでJaneを起動するように入力 で実現できる 手順 適当…
<ul id="list"> <li>階層1</li> <li>階層1 <ul> <li>階層2</li> <li>階層2</li> </ul> </li> </ul> <script> var list = document.getElementById('list'); var lis = list.querySelectorAll('ul li'); </script> 変数lisには階層2のli要素だけが含まれると思っていたが、実際には階層1のli要素も含まれてしまう。querySelector、querySelectorA…
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HTMLFormElement#elements Test</title> <form action="#" id="testForm"> <ul> <li><input type="text"></li> <li><input type="password"></li> <li></li></ul></form></meta>
window.openの第一引数にA要素（HTMLAnchorElement）をそのまま渡しているコードを見て、動かないんじゃないかと思って試してみると問題なく動いて驚いた。どうやらHTMLAnchorElementは文字列コンテキストではhrefプロパティの値として評価される、つまりtoS…
