新入社員JavaScript事始め(#2)「どこでも動くことの簡単な説明」

2016 年 9 月 21 日 by 山平

前回に引き続き、JavaScriptについて、簡単な説明を行いたいと思います。

今回も以後、「JS」と略記しますね。

実はJSって、サーバでもクライアントでも動く地球唯一の言語なわけです。
※先端の方で動きがあるようですが、普及まではもう少しかかりそうです。
私は若干JS推しなのですが、自由度の高さに加えて、そんなことも理由のひとつだったりします。

ということで今回は、JSがどこでも動くことの例として、ブックマークレットというものを紹介しようと思います。

まずは以下のコードをブラウザの何かしらのページを表示しているタブのURL欄にコピー・ペーストしてみてください。
(入力後、Enterキーを押す必要があると思います)

JavaScript:
  1. javascript: Array.prototype.slice.call(document.querySelectorAll('p,span,a')).forEach(function(e){ e.innerText+="ダッテバヨ!"; });

期待通りに動作すれば、以下のような見た目になると思います。

bookmarkleted1

簡単に説明すると、URL欄から実行したJSが表示していたWebページの内容を書き換えた、ということになります。
これがブックマークレットです。
URL欄に貼りつけて認識されるということは、実はブックマークできる、ということです。

先のサンプルはくだらないのもですが、Webツールを作ってブックマークしておくと便利だったりします。

コードを解説しますが、以降の説明、というかこのコードは「どこでも動く」よりも「自由である」ことの説明に近いものです。
悪しからず。

JavaScript:
  1. Array.prototype.slice.call(
  2. document.querySelectorAll('p,span,a')
  3. ).forEach(
  4. function(e){
  5. e.innerText+="ダッテバヨ!";
  6. }
  7. );

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」タグ(のオブジェクト)のテキスト末尾に「ダッテバヨ!」の文字を追加している訳です。

第一回に比べていきなり難しくなった気がしますが、いきなり全てを覚える必要はないです。
全体の雰囲気をつかんで、今後どこかで思い出していただければと思います。

タグ:

TrackBack