javascriptとejsの変数の受け渡しについて

Question

    <script type="text/javascript">
      var board= "<%= board %>";
      alert(board);
      alert(board.x);
    </script>

レンダリングする時に定義したboardの中身にはclassが入っており、これは自身の変数xを持っているのですが、一つ目のアラートでは「object object」と表示されるのですが
二つ目のアラートではundefinedとなってしまいます。
ちなみに下記のようにやるとうまくいきます

    <script type="text/javascript">
    alert("<%= board.x %>")
    </script>

違いがわかりません。教えていただけると助かります。

Answer 1

javascriptとejsの変数の受け渡しについて

文字列以外は無理です。
後で具体的に何をするか解説します。

var board= "<%= board %>";

まずはこの辺を解説します。
JavaScriptというのはWebサーバーからHTMLファイルを受け取ったユーザーのブラウザが、
「おっ、スクリプトタグあるやんけ、実行したろ」と実行するものです。

ejsのこの書き方では文字列として出力しているので、
実際には下記のようなことになっています。

> ({name: "taro"}).toString()
"[object Object]"

オブジェクトやClassのインスタンスを無理やり文字列(String型)にキャストすると
"[object Object]"という文字列になります。
つまりJS内のboard変数は"[object Object]"という文字列が格納され、
文字列はxプロパティなんて持っていないのでundefinedになるというからくりです。

どうすれば解決するか

シリアライズしましょう。
JSON形式の文字列にして持ち込むのが基本です。

<script type="text/javascript">
  var board= JSON.parse("<%= JSON.stringify(board) %>");
  alert(board);
  alert(board.x);
</script>

Classのインスタンスを直接JSON化するとそれなりに頑張ってくれますが、
メソッドが捨てられたりプロパティが抜け落ちたりするので
汎用オブジェクトに一度変換するなどしてください。

> class hoge {
  }
> i = new hoge()
> i.name = "taro"

> JSON.stringify(i)
"{"name":"taro"}" <- ちゃんと変換されはしてるのね

Comments

[babbleman]

とてもわかりやすく素早い回答を誠にありがとうございます。
文字列だったとは。。。
自分が渡したいのは本当は配列なのですけれど、JSONに直接変換しないといけないとなると、javascriptでクラスを作ってしまった方が無難でしょうか？

[miyabi-sun]

JSONは1個の値しか表現出来ないファイル様式で
2個以上持ち込みたい人の為にオブジェクトと配列が準備されています。
一度`JSON.stringify`を使って持ち込んでみてください。

[babbleman]

わかりました。
JSONを使ってみるのは初めてです。
回答どうもありがとうございます。