4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

コンソールを用いたワンライナー TIPS(IE11)

Posted at

#コンソールとは
ブラウザの機能のうち、デバッグ回りでよく使われる機能で、F12キーで起動できる機能のことですね。
Chromeも大分前から(機能名横には Ctrl+Shift+I って書いてあるけれど)使える機能です。
##今回やりたいこと
コーディング中に動作を確認したり、クライアントサイドでのデータを表示したりしたい場合に「ワンライナー」でどうするかといった様な話。
最近(Edge以降)の機能は使わないので、多分、最近のIE11環境なら動くとは思います。
##ワンライナーに使える函数一覧
###$$(selector)
何故こっちの函数を上げるかというと、Firefoxだと $(selector)がdocument.querySelector(selector)の短縮なのに対して、IEだとdocument.getElementById(id)の短縮なのでブラウザの互換が無い為です。
###Array.prototype.forEach(function)
配列の場合に使える内部イテレータ函数です。一応IE9の標準モードがES5対応してるので使える便利函数です。NodeListの時は以下の様に、callを用いて使います。

forEachTest.js
[].forEach.call($$(selector),function(element){ console.dir(element);});

###Array.prototype.map(function)
配列を詰め直しするときに使います。使い方はreturnに詰め直したい値を入れるだけです。

mapTest.js
["id1","id2","id3"].map(function(id){ return document.getElementById(id); });

###Array.prototype.filter(function)
配列を絞り込みするときに使います。

filterTest.js
[].filter.call($$(selector),function(element){ return element.textContent.indexOf("hoge") != -1; });

###Array.prototype.reduce(function,initValue)
配列を纏めるときに使います。
reduceTest.js の様にelement を指定の属性リストを元にオブジェクト化するときによく使います。

reduceTest.js
[].map.call($$(selector),function(element){ return ["attrName1","attrName2"].reduce(function(obj,name){ return obj[name] = element.getAttribute(name),obj; },{}); });

思いついたらまた書き足す。

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?