javascriptのデバッグでconsole.log()を使ってデバッグをしながら開発をするケースもあるかと思います。毎回、ログ出力を確認するためにDeveloper Toolを開いたりするのは、面倒です。今回は、javascriptのプロトタイプを使って、console.log()の出力先を切り替える方法について紹介します。

JavaScript prototypeとは

最近は、javascriptのフレームワークやライブラリなどが充実しているので、あまり馴染みが無い方もいるのかもしれないですが、javascriptでは、prototype(プロトタイプ)が頻繁に利用されています。

prototype

プロトタイプとは、オブジェクトのことです。オブジェクト指向の実現方法には、大きく分けて、2つあります。

Java、C++、ruby、phpなどに代表される静的な型(class)をベースにオブジェクトを生成する方法とJavascriptに代表されるプロトタイプを利用するパターンです。※ 最近のjavascriptは、classもサポートされています。

prototypeの使い方

下記のようにベースになるオブジェクトを生成して、あとからprototype.xxxという形でメソッドを追加していく形式を取ります。

 
const targetObj = xxxx
targetObj.prototype.メソッド名 = function(仮引数1, 仮引数2,...) {
   returen;
}

ログ出力を切りかえるサンプルコード

下記例は、ログ出力を指定したセレクター(#log)に子要素を追加するようにしたサンプルになります。

// ログ出力を指定したセレクターに子要素を追加する const myLogger = function(selecter) { this.rootElm = document.querySelector(selecter) } myLogger.prototype.log = function(s) { const div = document.createElement(“div”) const str = JSON.stringify(s) div.innerHTML = str this.rootElm.appendChild(div) } myLogger.prototype.consoleOverride = function() { const _this = this console.log = function() { _this.log.apply(_this, arguments); } } const logger = new myLogger(“#log”) logger.consoleOverride()

windows.onloadイベント時にログ出力(console.log)の出力先をオーバライドすれば、出力先を切り替えることができます。他にもファイル出力するように差し替えたり、ログ出力時間を差し込んだりすることもできます。

今回は、javascriptのprototypeの紹介とそれを使ったconsole.log()の差し替え方法について紹介しました。お疲れ様でした。