JavaScript
というタイトルで先日 Kaigi on Rails 2021 で話してきました。 プレゼンで話せなかった内容なども含めてブログ記事にも書いておきます。 Intro Railsのことはけっこう知ってるけどNext.jsについて何も知らないという人をターゲットにしてNext.jsとは一体何…
最近は ECMAScript 自身の機能も豊富になってきて lodash のユーティリティ関数の出番はだいぶ少なってきたけど、debounce と throttle だけは未だに使う機会がまあまあある。 しかし、lodash は何も考えずに使うとバンドルサイズが肥大化するのでいい感じに…
計測用のリクエストみたいな小さいリクエストを投げるためのnavigator.sendBeaconっていうAPIがあって、fetchやXHRと違ってunload時でもリクエストが送信されるのが保証されるのが売りらしい。メジャーなブラウザには実装されつつある。 Navigator.sendBeaco…
自分で頑張って真心込めて設定書いてたけどメンテ不可能なので頑張らないことにした。 フォーマット系はprettierに委ねる printWidthだけ120にして後は委ねる 基本設定はrecommendedに委ねる eslint:recommendedは控えめな感じでよい 本当にほしいやつだけ追…
例えばel（DOM Element）の直下の.fooを取りたいときに、以下のようにしたい。 el.querySelectorAll('> .foo'); これだとエラーになるんだけど:scopeを使えばいける。 el.querySelectorAll(':scope > .foo'); Chrome、Firefoxでは動いた。
class FooError extends Error {} console.log(new FooError() instanceof FooError); //=> false console.log(new FooError() instanceof Error); //=> true class FooArray extends Array {} console.log(new FooArray() instanceof FooArray); //=> false…
Array.prototype.keysはIteratorを返すのでArray.fromに食わせる Array.from(Array(5).keys()); //=> [0, 1, 2, 3, 4] もしくは Array.from({ length: 5 }).map((v, k) => k); //=> [0, 1, 2, 3, 4] Array.fromの第二引数はmap的な役割があるので Array.from…
shadowRootでshadowRootが取れるのでそこから辿れる。 var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var shadowRoot = this.createShadowRoot(); shadowRoot.innerHTML = '<span class="foo">text</span>'; }; document.registerElement(…
最近Web Componentsのアップデート全然見てなかったけどCSSで外からShadow DOMをスタイリングするための/deep/（>>>）、::shadowがdeprecatedになってた。 Shadow-Piercing descendant combinator, '/deep/' (aka '>>>') - Chrome Platform Status
Web ComponetsのPolyfillのPolymer/platform.jsでHTML import使ったときに、呼び出される側のHTMLのJSのdocumentを取得したいときに、 var doc = document.currentScript.ownerDocument; ってやればとれるらしいんだけど、これがうまくPolyfillできなくて動…
Backbone.jsでsaveするときに patch: true にするとPATCHメソッドになってsaveに渡した引数だけをbodyに含める（patch :true しないとmodelの全attributesをbodyにしてPUTする）んだけど、API側がPATCHメソッドに対応してなかったりPATCHメソッドを通さないp…
例えば <div data-foo="a" data-bar="b" data-baz="c">...</div> みたいに任意のカスタムデータ属性がついてて、こっから { foo: 'a', bar: 'b', baz: 'c' } みたいなデータを作りたいので属性を全部取得したいんだけど、 jQuery ではできないっぽい。DOMの element.attributes を使えばいける。 var div = docu…
iOSとかでリンクをクリックするときにグレイにハイライトされるけど、clickイベントでも特定の条件を満たせばハイライトされる（対象の要素がリフローしない場合とかだった気がするけど詳しくは覚えてない）。ハイライトされるのはいいとして、delegate次の…
XHR2で画像とかのバイナリデータを送るのにFormDataっていうのが使えて <form> <input type="file" name="file"> <input type="submit"> </form> var form = document.querySelector('form'); form.addEventListener('submit', function() { e.preventDefault(); var formData = new FormData(form); var xhr = new XMLHttpRequ…
window.onerrorが正常に動いてるか確認したくてコンソールで throw new Error('foo'); ってやったけどなぜか発火しなかった。アドレスバーにjavascriptスキームで javascript: throw new Error('foo'); ってやったら発火した。
jshintで (function() { 'use strict'; var foo = Backbone.Model.extend({...}); })(); とか書くとBackboneがないよこのやろうって怒られる。jsのファイルに /*global Backbone: true*/って書くけばいいんだけど、全ファイルに書きたくない。調べたら.jshin…
なんか流行ってるみたいなので便乗してみる。なぜ CoffeeScript がダメか - 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 - subtech なぜ CoffeeScript がよいか - 0xff.toBlog() CoffeeScriptは自分にとっては有益だった - Takazudo hamalog基…
sinon.jsのuseFakeTimersでDateを上書きするとmochaでテストにかかった時間を計測するところがバグって変なことになる。報告しようと思ったけどすでにissueあがってた。 https://github.com/visionmedia/mocha/issues/237ブラウザで使う場合はmocha.js本体に…
例えばこんな感じで文字列で渡した日付をDateオブジェクトに変換みたいなことがしたい。 var myModel = new MyModel({ date: '2012-02-02' }); console.log( myModel.get('date') ); // Date Object myModel.set('date', '2012-02-03'); console.log( myMode…
iOSの場合openDatabase時に大きい容量を指定すると、容量増やすけどOK？みたいなダイアログでる。だけど、指定する容量が50MB以上だとエラーになるっぽい。んで50MBにして1KBのデータをどんだけ保存できるかやってみたら、12000レコードくらい（実データのサ…
http://d.hatena.ne.jp/hokaccha/20110729/1311927481 この件にuupaaさんからつっこみ。https://twitter.com/uupaa/status/165692109565870080 http://uupaa.hatenablog.com/entry/2012/02/04/145400Object.keysはスコープつくるので正確には等価じゃないと…
jQueryとかjQueryMobileとかを参考にしつつMakefileつくってこんな感じにしてみた。build以下にclosure-compilerをまるっとアップする感じ。 https://github.com/pxgrid/js-flipsnap/commit/34eb5acec21911aa39f3c598133f74d7503dfe88まあこれでもいいんだけ…
アンドキュメントだけどこんな感じでいける。 var Foo = Backbone.Model.extend(); var foo = new Foo(); foo.bind('change:hoge', function(model, hoge, obj) { console.log(hoge); //=> fuga console.log(obj); //=> { key: 'val' } }); foo.set({hoge: '…
ドキュメントに書いてないけどidAttributeってのでidのキー名を変更できるっぽい。mongoDBとかで_idにするといいっぽい。 https://github.com/documentcloud/backbone/blob/29b60e53fa18b6fffb4a21d0d1c8c9fdbde43b6c/backbone.js#L159-161
underscoreの_.bindと混じるからbindとunbindはonとoffになったっぽい。今のところbindとunbindも後方互換で残ってるけど1.0では消えるっぽい。 https://github.com/documentcloud/backbone/commit/51335bf10f0763f0b9cd1bd9b386b0445cfc8185 https://github…
クロスブラウザ対応してみた。 https://github.com/pxgrid/js-flipsnapもともとWindows Phone7のIEで動かすために始めたんだけど、結局mousemoveがバグって全然発火しないので諦めた。PCのIE9では動くんだけど。。AndroidのFirefoxとかOperaで動くようになっ…
この件。主に2.1とかっぽい。 http://www.youtube.com/watch?v=s6c3n7IjKuY手元の端末だとIS03で同じ現象だった。エミュレーターでも同じ挙動になったので端末依存じゃないかも。んで検証してみたらtouchstartをpreventDefault()すればうまく動くことがわか…
use strictは関数内に書けばその関数内だけで有効になるわけだけど、グローバルの領域に 'use strict'; ... とか書くと、人が書いた他のモジュールに影響出ちゃうんで (function() { 'use strict'; ... })(); こうするのが礼儀かと思ってたけど、やってみた…
2011-12-19 - ここはちょっと見せられない var obj = { "00" : "foo", "10" : "bar" }; console.log(Object.keys(obj)); // => [ '10', '00' ] (Node.js, Chrome, Opera) // => [ '00', '10' ] (Firefox, Safari) オブジェクトの順番が保証されないのは仕様…
http://ginpen.com/2011/12/16/apply-to-through/ function log() { // console.logが使えればそれで出力 if (window.console && console.log) { console.log.apply(console, arguments); } // consoleが使えなければalert()で出力 else { // alert()は引数…
