[JS] オブジェクトや配列を再帰的に出力する

2009/10/1

こんにちは。きんくまです。

今回は「オブジェクトや配列を再帰的に出力する」です。
入れ子になっているオブジェクトをfirebugとかalertで出力するときに、
自分で出力関数を作っていました。
ですが、今までは1階層しか出力できなくてはがゆい思いをしてました。
今回、それを改良しました。
ていうか、ネットで探せばすぐ見つかりそうなんですが、自作することに
意味がある！みたいな。

実際の関数です。

function trace(s){
  mylog = [];
  function getIndent(num){
    var ind = [];
    while(num){
      ind.push('  ');
      num--;
    }
    return ind.join('');
  }
  function addLog(txt, defaultIndent){
    var cnt = defaultIndent;
    //array
    if((typeof txt == 'object') && (txt instanceof Array)){
      cnt++;
      mylog.push('[');
      for(var i = 0; i < txt.length; i++){
        mylog.push('\r\n' + getIndent(cnt));
        addLog(txt[i], cnt);
        if(i != txt.length - 1){
          mylog.push(',');
        }
      }
      mylog.push('\r\n' + getIndent(cnt - 1) + ']');
    //object
    }else if((typeof txt == 'object')){
      cnt++;
      mylog.push('{');
      for(var i in txt){
        mylog.push('\r\n' + getIndent(cnt) + i + ':');
        addLog(txt[i], cnt);
        mylog.push(',');
      }
      mylog.pop();
      mylog.push('\r\n' + getIndent(cnt - 1) + '}');
    }else{
      mylog.push(txt);
    }
  }
  addLog(s, 0);
  console.log(mylog.join(''));

  //Firebugが入っていなかったらこっち
  //alert(mylog.join(''));
};

例えば下記のようなオブジェクトがあるとします。

var s = [3, {a:[1,2,3], b:'hello', c:{d:'e'}}, 9];

これを出力しようとしたら

trace(s);

とやることで、以下の出力がコンソールに出ます。

[
  3,
  {
  a:[
    1,
    2,
    3
  ],
  b:hello,
  c:{
    d:e
  }
  },
  9
]

—
以下無駄話

ピクサーのウォーリーを見ました。

大まかな話の流れとしては、
—
どんくさいオタク（旧式お掃除ロボ）が、エリートキャリアウーマン（最新型調査ロボ）に
恋しちゃって、そしたらキャリアウーマンもまんざらじゃなくなってきて。
—
…みたいなラブコメ。
いいですね！ピクサー。何よりキャラがいい。
いつもすごいと思うんですけど、よくこういうキャラとか設定とか思いつきますよね。

物語的には、もうちっとサブテーマみたいのが流れてて、機械にまかせきりの人間の行く末とか、リアルな人のぬくもりというか接触というか、そういうのがいたるところに比喩として出てきます。

それで、機械が主人公なんで、なかなか表情（笑ったり、怒ったり）がつけづらいです。
一応ヒロインは目を割と自由に動かすことができるのですが、
主人公は目の角度が微妙に動く程度なので、制作者は結構苦労したと思います。
そこをうまく、構図や小道具なんかのいろいろなものを使いながら表現していたところが面白かったです。
例えば、主人公がヒロインに一目ぼれする場面では、よく見かけるほわーっとする構図
を使っていたりとか。

今回は、ニモとかと違って直接的なものが少なかったので、子供にはちと難しいかも。
でも大人になって見返してみると、「おお！ニヤリw」みたいな感じになるのかな。