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

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

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

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

Q&A

解決済

3回答

5777閲覧

javascript 変数を変数名にする方法

abouch

総合スコア15

JavaScript

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

0グッド

0クリップ

投稿2016/10/18 06:12

編集2016/10/18 10:29

###前提・実現したいこと
javascriptでとあるゲームのダメージ計算をするプログラムを書いているのですが、
以下のようなことができると非常に便利であります。

  1. inputタグに入力された文字を変数名として扱う方法

あるキャラクターがいて、そのキャラクターの能力を配列で管理しています
例えばキャラクター名’CharaA'がいてその能力を var CharaA=[100,200,300]で管理します。
仮にこのキャラクターの300の部分の能力を表示したいとして
console.log(CharaA[2]) とすると300が表示されます。
今回inputタグがあるとして、そこにCharaAと入力し
これを console.log(input.value[2])のように表したいです。
もちろんinputタグにCharaAの名前を入力すると CharaAの二番目の文字aが返ってきます。
私の意図通りにするにはどうしたらよいのでしょうか。
//
//
//

  1. 以下の3つの変数がありこれらを関数の引数を使い表示させたい。

var attack= 200
var defence = 100
var hp = 500

イメージとしては
function func(val){
console.log(val)
}
func(attack) //200が表示
func(defence) //100が表示
func(hp) //500が表示

別の変数を介したり幾つか試したのですがうまく汎用性があるものを作れません。
変数についての知識が足りないのはわかりきっているのですが、ここで質問させていただきます。

(追記)
オブジェクトを使ってうまくいきました。

<!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <body> <p>キャラクターの名前を入力してください</p> <input id="inp"></input> <button onclick=func()>クリック</button> <p> chara1 = {attack: 200, defence: 100, hp: 500};<br> chara2 = {attack: 300, defence: 200, hp: 600};<br> chara3 = {attack: 400, defence: 300, hp: 700}; </p> <script> var inp=document.getElementById('inp') var chara_1={attack: 200, defence: 100, hp: 500}; chara_2={attack: 300, defence: 200, hp: 600}; chara_3={attack: 400, defence: 300, hp: 700}; var character={ chara1 : chara_1, chara2 : chara_2, chara3 : chara_3 }; function func(){ console.log(character[""+inp.value+""]) } </script> </body></html>

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

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

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

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

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

kei344

2016/10/18 08:09

「汎用性」を考えるのであれば、コードを部分ではなく提示されたほうが回答しやすいと思います。また、コードは```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押してコードブロックをお使いください。
guest

回答3

0

同様の構造のオブジェクトを使い回したいなら適当なコンストラクタを定義するのはどうでしょう。

javascript:

1function Character(attack, defence, hp) { 2 this.attack = attack; 3 this.defence = defence; 4 this.hp = hp; 5} 6 7var characterA = new Character(100, 200, 300); 8console.log(characterA.attack); //=> 100 9console.log(characterA.defence); //=> 200 10console.log(characterA.hp); //=> 300 11 12var characterB = new Character(400, 500, 600); 13console.log(characterB.attack); //=> 400 14console.log(characterB.defence); //=> 500 15console.log(characterB.hp); //=> 600 16 17// characterBのステータスを更新してもcharacterAのステータスは保持されている 18console.log(characterA.attack); //=> 100 19console.log(characterA.defence); //=> 200 20console.log(characterA.hp); //=> 300

投稿2016/10/18 06:29

carimatics

総合スコア740

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

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

abouch

2016/10/18 08:54

回答ありがとうございます 数値を羅列した配列だと見にくいですし オブジェクトを作ることにします
guest

0

例示のコード

JavaScript

1var attack= 200; 2var defence = 100; 3var hp = 500; 4 5function func (val) { 6 console.log(val); 7} 8func(attack); //200が表示 9func(defence); //100が表示 10func(hp); //500が表示

ご掲示のコードはすべて期待通りに動作します。

オブジェクトのプロパティ

変数名を文字列で指定する場合なら、対象をオブジェクトのプロパティにするのが良いと思います。
(オブジェクトのプロパティになっていれば、どんな形でプロパティを持ってもかまいません。)

JavaScript

1var creature = {attack: 200, defence: 100, hp: 500}; 2console.log(creature['attack']); // 200 3console.log(creature['defence']); // 100 4console.log(creature['hp']); // 500

また、下記スレッドでも同様の質問があるので参考にしてみてください。

Map (ES6)

ES6 の Map も「オブジェクトのプロパティ」と同様の実装が出来ます。

JavaScript

1'use strict'; 2var map = new Map([['attack', 200], ['defence', 100], ['hp', 500]]); 3console.log(map.get('attack')); // 200 4console.log(map.get('defence')); // 100 5console.log(map.get('hp')); // 500

eval is evil

eval はローカル変数を文字列で参照する為の手段となりえますが、扱いが難しいので基本的にはお勧めしません。

Re: churabou さん

投稿2016/10/18 06:20

編集2016/10/18 09:03
think49

総合スコア18156

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

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

abouch

2016/10/18 08:53

回答ありがとうございます。 質問用に簡潔に書いたところ、綺麗に動作してました。 もう一回見てまいります
think49

2016/10/18 09:04

少し説明を書き足しました。 私としては「オブジェクトのプロパティ」もしくはMap(ES6)をお勧めします。
abouch

2016/10/18 09:15

丁寧にありがとうございます。 今回は私の質問が不明確だったと思うので、 改めて質問させていただきます
abouch

2016/10/18 10:34

これまたありがとうございます。 私もうまくできました。 今回のように変数のアクセス方法がもっと知りたいので 質問させていただきます。
guest

0

ベストアンサー

一応evalなるものがあり、以下のように使えるはずです。
簡潔ですが、input.valueをいじられた場合に大変なことになるので、使わないほうがよろしいです。

eval("console.log(" + input.value + "[2])");

私がやるのであれば、連想配列を使ってやってしまいます。

var CharaA = [100,200,300]; var charactors = { "CharaA": CharaA }; function func (val) { console.log(charactors[val][2]); } func("CharaA");

投稿2016/10/18 08:30

moredeep

総合スコア1507

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

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

abouch

2016/10/18 08:57

回答ありがとうございます。 evalでできるような動作をしたかったですがちょっとややこしいみたいですね 連想配列を使えばもう少し複雑なところも綺麗にできそうです
think49

2016/10/18 09:07

To: churabou さん 解決したようですが、個人的にはevalは推奨しません。理由は回答欄に追記しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問