新入社員JavaScript事始め(#2)「どこでも動くことの簡単な説明」
2016 年 9 月 21 日 by 山平前回に引き続き、JavaScriptについて、簡単な説明を行いたいと思います。
今回も以後、「JS」と略記しますね。
実はJSって、サーバでもクライアントでも動く地球唯一の言語なわけです。
※先端の方で動きがあるようですが、普及まではもう少しかかりそうです。
私は若干JS推しなのですが、自由度の高さに加えて、そんなことも理由のひとつだったりします。
ということで今回は、JSがどこでも動くことの例として、ブックマークレットというものを紹介しようと思います。
まずは以下のコードをブラウザの何かしらのページを表示しているタブのURL欄にコピー・ペーストしてみてください。
（入力後、Enterキーを押す必要があると思います）
[JS]
javascript: Array.prototype.slice.call(document.querySelectorAll(‘p,span,a’)).forEach(function(e){ e.innerText+=”ﾀﾞｯﾃﾊﾞﾖ!”; });
[/JS]
期待通りに動作すれば、以下のような見た目になると思います。
簡単に説明すると、URL欄から実行したJSが表示していたWebページの内容を書き換えた、ということになります。
これがブックマークレットです。
URL欄に貼りつけて認識されるということは、実はブックマークできる、ということです。
先のサンプルはくだらないのもですが、Webツールを作ってブックマークしておくと便利だったりします。
コードを解説しますが、以降の説明、というかこのコードは「どこでも動く」よりも「自由である」ことの説明に近いものです。
悪しからず。
[JS]
Array.prototype.slice.call(
document.querySelectorAll(‘p,span,a’)
).forEach(
function(e){
e.innerText+=”ﾀﾞｯﾃﾊﾞﾖ!”;
}
);
[/JS]
2行目の「document.querySelectorAll(‘p,span,a’)」という部分で、表示していたWebページの中の「p」「span」「a」タグ（のオブジェクト）をすべて取得しています。
ただ、この関数は戻り値として配列（Array）ではなくNodeListを返します。
NodeListはちょっとArrayっぽい操作ができるのですが、そのままArrayとして使うことはできません。
そこで必要になってくるのが1行目の「Array.prototype.slice.call()」です。
これもJSの面白いところなのですが、あるオブジェクト（A）が持っているメソッド（X）を、別のオブジェクト（B）に実行させてしまうことができます。
ちょっと意味が分からないと思うのですが、今回の場合Arrayオブジェクトのsliceメソッドを「NodeList.slice」として実行しています。
「Array.slice」メソッドは本来、配列の部分を抜き出して別の配列を作るものですが、配列のコピーにも使うことができます。
そこで、配列風オブジェクトであるNodeListをsliceして新しい配列を作ることで、NodeList⇒Arrayの変換を実現しています。
あとは配列として扱えるので「Array.forEach」メソッドで「p」「span」「a」タグ（のオブジェクト）のテキスト末尾に「ﾀﾞｯﾃﾊﾞﾖ!」の文字を追加している訳です。
第一回に比べていきなり難しくなった気がしますが、いきなり全てを覚える必要はないです。
全体の雰囲気をつかんで、今後どこかで思い出していただければと思います。
タグ: JavaScript
