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

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

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

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

Q&A

解決済

2回答

1217閲覧

JavaScriptのeval関数の挙動について

theplace

総合スコア24

JavaScript

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

0グッド

0クリップ

投稿2019/09/20 21:18

編集2019/09/21 02:44

以下のJavaScriptですが

var a = {hoge:'aa', b:'bb'}; var prop = 'hoge'; eval('console.log(a.'+prop+')');

結果はaaです。

しかし

console.log(a.'+prop+');

はエラーになります。

eval('console.log(a.'+prop+')');の中のeval関数の引数内のJavaScriptをそのまま書いただけなのにエラーになるのは意味がわかりませんでしたが、これはどうしてでしょうか。

また、evalを用いずに純粋なconsole.logと変数propを用いて変数aのプロパティhogeの値を表示するにはどうしたらいいでしょうか(console.log(a[prop]);と書けば正常に表示できますが、evalで行ったように+演算子を用いて表現することはできないのでしょうか)

(補足)eval('console.log(a.'+prop+')');の中のpropの直前と直後の2つの+演算子の使い方が理解ができず(特に直後のプラスはわかりません)、調べても算術計算や文字列の連結でしか使っていないようなのですが、今回の+演算子はどのような構文・文法なのでしょうか。
上記のeval関数ではシングルクウォート内に使っていますし、シングルクウォート内はJavaScriptとして解釈されるとしても+演算子の直前にピリオドがあるとピリオドの直後はプロパティを指定するのではないかとか、propの後の+演算子の後には何もないですし、文法的にどうなっているのでしょうか。

また、evalの処理過程で文字列が全てJavaScriptとして解釈されるのなら、そのJavaScriptをevalを使わずに書いても正常に実行されるのでは?と思ったのですがどうしてevalを外して、文字列にしているシングルクウォートも外してもうまくいかないのでしょうか。

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

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

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

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

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

guest

回答2

0

ベストアンサー

eval関数は、文字列をコードとして解釈して実行します。

JavaScriptでeval関数の使い方とリスク【初心者向け】 | TechAcademyマガジン

'console.log(a.'+prop+')' は、console.log(a.hoge) という文字列になるので、console.log(a.hoge)というコードとして実行されます。

a.'+prop+'aオブジェクトのあとに文字列が付いているだけですの、コードとして構文エラーになります。

プロパティへのアクセスは a.hoge という方法以外に、a['hoge'] という記述法があります。
こちらだとプロパティを文字列で指定できます。当然、文字列変数を渡してもOKです。

ということで、下記のコードで正常に実行されます。

js

1var a = {hoge:'aa', b:'bb'}; 2var prop = 'hoge'; 3console.log(a[prop]);

コメントへの解説

eval('console.log(a.'+prop+')');について、まず「(a.'+prop+')→(a.+prop+)」と置きかわり、「console.log(a.+prop+)」として実行される、というわけではないですよね?

というわけではないです!

'console.log(a.'+prop+')' の prop の中身は'hoge'ですので、
'console.log(a.' + 'hoge' + ')' ということです。
+演算子は文字列の場合、連結ですので、各文字列が連結されて、
'console.log(a.hoge)'という文字列になります。

この文字列を、EVal関数でスクリプトとして解釈して実行してます。

投稿2019/09/20 21:54

編集2019/09/21 03:11
hatena19

総合スコア33620

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

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

theplace

2019/09/21 02:46

ありがとうございます。 eval('console.log(a.'+prop+')');について、まず「(a.'+prop+')→(a.+prop+)」と置きかわり、「console.log(a.+prop+)」として実行される、というわけではないですよね? 文字列部分がJavaScriptとして解釈されるのなら、そのJavaScriptをevalを使わずにそのまま書いても正常に実行されるのでは?と思ったのですが、どうしてevalを外して、文字列にしているシングルクウォートも外してもうまくいかないのかわかりません。。
Zuishin

2019/09/21 02:47

'console.log(a.' + prop + ')' です。
theplace

2019/09/22 02:47

シングルクウォートの囲む範囲を読み誤っていました。 ありがとうございます。
guest

0

console.log(a.'+prop+');

+演算子はこの文にはありません。
'+prop+'という文字列がくっついてるだけですね。

そりゃエラーになります

投稿2019/09/20 23:19

y_waiwai

総合スコア87719

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

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

Zuishin

2019/09/21 02:23

演算子があればエラーにならないように読めます。
theplace

2019/09/22 02:54

ありがとうございます。 eval内でのシングルクウォートの囲む範囲を読み誤っていました。 evalでは「console.log(a.'+prop+')」全体を’’で囲って文字列にしているのだと思っていました。
y_waiwai

2019/09/22 03:01

全体を囲ったときは、 'console.log(a.' と、 ');' が文字列になりますな
theplace

2019/09/22 03:53

はい、完全に勘違いをしていました。 「console.log(a.'+prop+')」全体が文字列としてevalに渡されると思っていました。 お恥ずかしいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問