[Javascript] ネイティブの関数をハックする方法

最近Javascript界隈では、「脱jQuery」という言葉を何人ものエンジニアから聞くことがありました。 これまでJavascriptの基本技術として、jQueryを使えないと、まともにホームページが作れない、とされていたようですが（そうは思えませんがwww）、 最近では、会社や自社サービスに導入していたjQueryが邪魔だから、外して使いたいというエンジニアが増えているのだそうだ。

何故jQueryが邪魔になったのか？

日進月歩で進化しているJavascriptは、jQueryからの機能を基本機能として組み込んできて、バージョンアップをしてきているので、そもそもjQueryを使う意味がなくなってきているのだそうです。 そもそも、jQueryの優位ポイントは、マルチブラウザ対応を言ってに引き受けてくれて、ブラウザの種類が違う場合に機能を補完して安定した処理を実行できていましたが、 これも、大元はInternetExplorer(いわゆるIE)のオレオレ独自機能が幅を効かせすぎた為と考えると、IE亡き今の時代には、他のブラウザは、大体においてW3C準拠をしているため、 それに伴って、jQueryが不要と考え始めたエンジニアが増えたと考えられます。

自分のページは自分専用の独自関数を使うのが便利

javascriptは、今やライブラリの宝庫といってもいいぐらいたくさんの便利機能やサービスがOSSや野良スニペットとして公開されています。 これらをコピペして使っているユーザーも多いと思いますが、自分の環境にライブラリを組み込み時に、どうしてもうまく組み込めないライブラリなども存在します。 そのライブラリの初期起動処理が、自分のサービスのinit宣言と噛み合わないとか、ページのデータなどの読み込みタイミングと動機を取る必要があるものなどは、 少しライブラリハックをする必要があるものも、たま〜にあります。 他人が作ったライブラリは、無理して使うか、ハックして使うかどちらでも良いんですが、自分で作ったマイ・ライブラリは、便利に使いたいですよね？ そんな時に、ネイティブ関数をハックするやり方を知っていると非常に便利になります。

ネイティブ関数のハッキング・サンプル

ハッキングと聞くと難しく思えますが、例えば、オブジェクト配列の先頭に必ず、id（連番）を自動で付ける関数を作りたいと思ったとします。 まず機能名を決めておきましょう。 「add_id()」としましょう。 サンプルデータとして、次のようなデータを用意しました。 const data = [ { "name" : "apple" }, { "name" : "orange" }, { "name" : "banana" } ] そして、関数を実行するイメージは次のような記述になります。 data.add_id() // 結果 [ { "id" : 1, "name" : "apple" }, { "id" : 2, "name" : "orange" }, { "id" : 3, "name" : "banana" } ] 非常に簡単に実行できるので、このやり方を是非覚えて、効率をアップさせましょう。

ハッキング・ソースコード

Array.prototype.add_id = function(){ let id = 0 for(const d of this){ d.id = ++id } return this }

実行サンプル

data.add_id() ※実行結果は、上記の想定と同じ感じになったと思います。

解説

今回は、配列データに関する機能を追加しましたが、連想配列の場合は、"Object.prototype.独自の関数名"と言う風にするとハックできます。 ハック内で、配列データにアクセスするには、thisで全てのデータを取得できます。 今回は、それをfor文で回してidを追加しただけの処理ですが、 function()のカッコ内に、受け渡し値を書いて、もっと複雑な処理などをさせることもできるし、callback関数を埋め込むやり方なども高度になりますが、できてしまいます。 要するに何度も使う関数は、自分で便利に使えるハック関数として登録すれば、作業効率アップ間違いなしです。

ハッキング関数の使い方

この関数はページを読み込み直すと関数は消えてしまいます。 ページを読み込んた時に、関数ハックを一度実行して、ネイティブ関数に追記をして、その後はページを読み直すまでは、何度も使い倒せます。 他にも複数のハック関数を、ページロード時の最初に一括で実行する処理を毎回書いておけば、さほど難し区はないと思います。

注意点

こうしたハック関数は、大元の関数などに影響を与える処理を書いてはいけません。 また、言語のバージョンアップに伴って、コンフリクト（競合）してしまう可能性もあるので、独自のプレフィックを付ける等して、安定したハックができるように心がけましょう。