prototype.jsクックブック05 JavaScriptでもロガーが欲しい

prototype.jsクックブックとか言ってるけど、今回prototype.jsはまったく重要じゃない。だけど、最後に説明する拡張を行おうとするとprototype.jsAjax機能が密接に関係するから、無理矢理prototype.jsとひもづけてみた。

http://ya-lab.main.jp/prototype-js-cookbook/05_JavaScript-Logger/

まず、上記サンプルページを見てほしい。任意の場所にログを表示させる事が出来る。そもそも、これを作ったきっかけはJavaScriptで何かを書いてる時にalert()を使ってデバッグするのが嫌だったからです。今回のポイントはhttp://ya-lab.main.jp/prototype-js-cookbook/05_JavaScript-Logger/logger.jsです。使い方は簡単、下記のように使用します。

var logger = new Logger(new TextareaWritable($('debugger-textarea')));
logger.println("ログです");

JavaのIO周りのクラスを知ってると、Loggerコンストラクタの意図が分かると思います。上ではLoggerにはTextareaWritableのインスタンスを渡していますが、ほかにも下記のようなWritableのサブクラスを渡す事が出来ます。

  • ElementWritable(通常のタグの中にログを書きます)
  • InputWritable(inputタグのvalue値にログを書きます)
  • TextareaWritable(textareaにログを書きます)
  • NullWritable(どこにもログを書きません)

これらを切り替える事により、ログの出力先を変えられるというわけです。

ちなみに本気で使うロガーとしては明らかに機能不足ですし、APIとしてのインターフェースもいまいちです。というのも世の中にはせっかくLog4Jなんて素晴らしいものがあるのだから、あれの仕様に極力近づける必要があるでしょう。そうすると、logger.println()なんてのではなくて、logger.error(), logger.fatal()のようにエラーレベルで切り替えられるようにすべきでしょう。

今回それをしなかった理由は二つ。一つはあくまでサンプルとして作ったから、極力シンプルにしたかったから。もう一つはJavaScriptのロガーに本当にエラーレベルによる出力制限を行う必要があるのか疑問だったから。というのも、開発中はともかく運用されているものに関してはユーザの画面にエラーログなんて見せたくないでしょう。そしたら、ログの出力レベルなんて全部ONか全部OFFになりやすいんじゃないかな?、と。

考えられる拡張

ログをAjaxでサーバに送信する。サーバにログをためる。この場合もWritableを継承してAjaxWritableでも作ればOK。これをやる場合、先ほど説明したログレベルを扱ってもいいと思う。つまり、ユーザが実際に触っている時もログをサーバに送り続けるが、その場合はエラー系の重要なログのみにとどめた方がいいよね。このやり方でいけば、ユーザのマウスの動作をサーバに送る事も可能ですね*1

*1:ここでそういうサービスがある。実装方法は知りません。http://www.clicktale.com/