1. TOPTOP
  2. Webサービス
  3. JavaScript

JavaScriptのJSON.stringfy()でNode.jsの配列をデバッグして確認する方法

ecoteki-image

先日、【質問】Node.js で デバッグをする方法を教えてください(新しいタブで開く) という記事を書きました。そのとき自分のお友達が、2つ解決方法を教えてくださいました。

  • Node.jsを0.10系から6.11系にバージョッバップする
  • JavaScriptに標準ビルトインされているオブジェクトのメソッドであるJSON.stringfy()を用いる

今回の記事では後者のJSON.stringfy()を使って、ドットインストールの「Node.js入門(新しいタブで開く)」で使われているコードを引用し、その中でデバッグ作業をしてみます。

デバッグの対象となるコードと配列変数

デバッグの対象となるのは、以下のsettings.jsにある”query”という配列です。その中身を確かめてみたいと考えています。

var http = require('http'),
(変数の定義をいろいろ)
var posts = [];

function renderForm(posts, res) {
    var data = ejs.render(template, {
    (関数の内容をいろいろ)
    posts: posts
});

}

server.on('request', function(req, res) {
    if (req.method === 'POST') {
        req.data = "";
        req.on("readable", function() {
        req.data += req.read();
    });
    req.on("end", function() {
        var query = qs.parse(req.data);
        // console.log(JSON.stringify(query)); 
        posts.push(query.name);
        renderForm(posts, res);
        console.log(JSON.stringify(query));
    });
   } else {
        renderForm(posts, res);
   }
});

server.listen(settings.port, settings.host);
// console.log(JSON.stringify(query)); 
console.log("server listening ...");

下記は投稿した文字列をブラウザで表示し、かつデバッグしたときの様子を示した画像です。ターミナルの画面で投稿した文字列の内容を確認することができます。

JSON_stringify_1

デバッグのポイント

JSON.stringfyの使い方は簡単です。MDNのページ(新しいタブで開く)を見れば分かるでしょう。問題はJSON.stringfyの返り値をどこに挿入するかです。

結論からいえば、上述したコードの24行目にconsole.logを挿入します。コメントアウトをしている箇所のconsole.logは、文字列を投稿したときに何らかのエラーが返されてしまいます。

21行目のconsole.logのエラーについて

ここでconsole.logをすると、そもそもブラウザからローカル開発環境で使用しているURLのページにアクセスできなくなります。おそらく「データの受け渡しの最中で余計なことはするな!」ということでしょう。

32行目のconsole.logのエラーについて

ここでconsole.logをすると、今度は「”query”という変数などない (is not defined)」と怒られてしまいます。これはJavaScriptの文法としてみたときに、ローカル変数の有効範囲外で使っているからでしょう。

JavaScriptのデバッグは好きなところでconsole.logをすれば良いと思っていました。ですが、今回の例でNode.jsやJavaScriptのお作法にのっとってデバッグをしなければならないことがよく分かりました。関係者のみなさまありがとうございました!