最近よくJSかいてる。
色々な便利機能についてネットネット記事を発見するけど、JavaScriptのことはとりあえず疑うマンなのでそれが本当にIEとかIEで動くのか不安でならない。
でもメソッドの動作とかについて説明はしてても、それが使い物になるかどうかわかりやすくざっくり解説してる記事が見当たらなかったのでまとめる。
IE9以上で動けばいいやみたいな感じでIE8以下は無視します。
あとjQueryはあんま使い込んでないし、なるべく標準のAPI使いたいマンなので「jQueryにそれあるじゃん」みたいなのは知りません。
エレメントの検索
jQueryで$してもいいんだけど、querySelectorとquerySelectorAllがあるのでそれ使ってもいい。早いし。
querySelectorはなんか高度っぽい感じの機能だから、IEでは使えないもんだと勝手に思い込んでたんだけどどうやらIE8でもCSS2限定で使えるらしい。
なので安心して使える。
検索結果に対して一気に処理を付与するのだとfor文使わないといけなくてjQueryのほうが楽なのでは感あるけど、以下で説明するArrayとか使うと書き方はダサいけど同等のことがいい感じに出来るようになるので良さがあるっぽい。
Array
JavaScriptで配列の操作というと、for-inが使い物にならんだとか、for文の最適化バッドノウハウばかりが取りざたされるので、Array#mapとかそこらへんはまともに使えないもんだと思ってた。
結論からいうと、IE9以上を使うなら全然使ってオッケーっぽい。やったぜ。
一部ES6以降に限定されるものも混じっているので注意だけど、forEach, map, filter, reduce, every, someあたりが使えるので大体問題ない。
僕はアホだからfor文の書き方が覚えられないのでこれは嬉しい。for文とforEachとかの速度差はたかだか10倍とかそこらへんくらいっぽいので99%のユースケースで無視出来る。
ArrayLike Object
多分よく使うのはquerySelectorAllの返り値のNodeListとかHTMLCollectionだと思う*1。
こいつはムカつくことに先のArrayの便利メソッドを備えていないのでナントカする必要がある。
まずArray#fromは使えない。ES6の実装なのでIEが10でも全く対応していない。
色々やり方はあるけど、Array.prototype.slice.call(arrayLikeObject)でArrayに変換するのが一番楽っぽいのでそうすることにした。あまり自作のPolyfillとか拡張を定義したくないし、JavaScriptはバッドノウハウを覚えまくる覚えゲーだという諦めの境地に達したのでこれでいいやってなった。
あと、一旦配列にしなくてもArray.prototype.map.call(arrayLikeObject, func)みたいにすればいきなりmapとかに適用出来るので便利がある。
エレメントのクラス名変更
element.classListっていうのがあって、add, remove, toggle, containsという操作がある。直感的な名前なのでどんなメソッドかは説明しない。
element.classNameでのクラス名アクセスみたく、いちいち空白で区切ったりしなくて便利っぽい。
これはIE10以上でしか使えないのでめっちゃ微妙感ある。
IE9の面倒をみないといけない環境だと、MDN element.classList - DOM | MDN にshimのサンプルコードがあるのでそれをどっかに仕込むか、あるいはjQueryのメソッド探してそれっぽいの探してきたほうが楽っぽい気がする。
っていうかこんなあって当たり前感のある操作すらjQueryにしか存在しなかった昔のJavaScriptは闇すぎるのではっていう感じでちょっと萎えた。
アニメーション
IE10以上だとCSS3のtransitionとanimationに対応しているので、CSSだけとかjsでクラスをつけはずししたりとかで殆どのケースのアニメーションは簡単に実装出来るんじゃないかなっていう気がする。
IE9以下だとそんなCSSはないので、あきらめるかjQuery使うかするのが現実的な対処だと思った。
おわり
とりあえずJavaScript書いてて「え、この便利メソッドIE9 or 10から普通に使えんのやったじゃん」みたいな感じになったのはこんくらいな感じですかね。
ジャバScriptはとにかく調べものするのが大変な言語だなと思った。
オマケ
クライアントサイドMVCの対応状況。
ていうかIEサポートを考える状況でここら辺のライブラリを使うのはつらみが出そうなのでやめたほうがいいとは思うけど色々調べたので一応。
