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

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

ただいまの
回答率

88.83%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,688

abouch

score 15

前提・実現したいこと

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が返ってきます。
    私の意図通りにするにはどうしたらよいのでしょうか。
    //
    //
    //

  2. 以下の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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/10/18 17:09

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

    キャンセル

回答 3

+2

 例示のコード

var attack= 200;
var defence = 100;
var hp = 500;
>
function func (val) {
  console.log(val);
}
func(attack);  //200が表示
func(defence); //100が表示
func(hp);      //500が表示

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

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

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

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

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

 Map (ES6)

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

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

 eval is evil

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

Re: churabou さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/18 18:15

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

    キャンセル

  • 2016/10/18 19:05

    追記を読みましたが、回答した内容を応用すれば実装可能です。
    オブジェクト版 https://jsfiddle.net/xy98jhps/
    Map版 https://jsfiddle.net/xy98jhps/1/

    キャンセル

  • 2016/10/18 19:34

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

    キャンセル

+2

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

function Character(attack, defence, hp) {
  this.attack = attack;
  this.defence = defence;
  this.hp = hp;
}

var characterA = new Character(100, 200, 300);
console.log(characterA.attack);  //=> 100
console.log(characterA.defence); //=> 200
console.log(characterA.hp);      //=> 300

var characterB = new Character(400, 500, 600);
console.log(characterB.attack);  //=> 400
console.log(characterB.defence); //=> 500
console.log(characterB.hp);      //=> 600

// characterBのステータスを更新してもcharacterAのステータスは保持されている
console.log(characterA.attack);  //=> 100
console.log(characterA.defence); //=> 200
console.log(characterA.hp);      //=> 300

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/18 17:54

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

    キャンセル

checkベストアンサー

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 17:57

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

    キャンセル

  • 2016/10/18 18:07

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

    キャンセル

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

  • ただいまの回答率 88.83%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る