質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

13390閲覧

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

babbleman

総合スコア107

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/01/21 09:05

編集2020/01/21 09:06

ejs

1 <script type="text/javascript"> 2 var board= "<%= board %>"; 3 alert(board); 4 alert(board.x); 5 </script>

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

ejs

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

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

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

js

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

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

どうすれば解決するか

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

ejs

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

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

js

1> class hoge { 2 } 3> i = new hoge() 4> i.name = "taro" 5 6> JSON.stringify(i) 7"{"name":"taro"}" <- ちゃんと変換されはしてるのね

投稿2020/01/21 09:40

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

babbleman

2020/01/21 10:00

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

2020/01/21 10:36

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

2020/01/21 10:40

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問