【javascript】可変変数で動的に変数を作成

はじめに
- この記事の概要
- 対象となる方
可変変数とは
例(Pixijs)
- とりあえずfor文で回してみる
可変変数を使う
- evalを使用する
- 連想配列を使用する
まとめ

はじめに

この記事の概要

こんにちは。エンジニア（コーディング）のタクヤです。
今回のテーマはJavascriptで可変変数で動的に変数を作成してみた！です。

対象となる方

Javascriptを勉強中の方
Web制作でコーディングをしている方
Javascriptで可変変数で動的に変数を作成してみたい方

可変変数とは

可変変数とは、文字列などの変数の値に対してさらに変数を入れ込んだものです。

変数を変数で作る感じで変数を動的に作成することが可能です。

例(Pixijs)

PixiJSというJavascriptのライブラリを使い、ひとつの画像から複数のオブジェクトを作成することを想定します。


let sampleTexture = new PIXI.Texture.from("./img/saple.png");// このオブジェクトをもとにいろんなオブジェクトを作りたい
let sampleSprite01 = new PIXI.Sprite(sampleTexture);
let sampleSprite02 = new PIXI.Sprite(sampleTexture);
let sampleSprite03 = new PIXI.Sprite(sampleTexture);
let sampleSprite04 = new PIXI.Sprite(sampleTexture);
let sampleSprite05 = new PIXI.Sprite(sampleTexture);

ひとつひとつ作っていく、これはやばいですね…..

とりあえずfor文で回してみる

とりあえずforで回してみたいと思います。


let sampleTexture = new PIXI.Texture.from("./img/saple.png");
for ( let i = 1; i < 10; i++ ) {
  let "sampleSprite0" + i  = new PIXI.Sprite(sampleTexture);
}
// こんなの書き方できないよね.....

こんな書き方はできないので、変数を動的に変えていく必要があります。

可変変数を使う

evalを使用する


let sampleTexture = new PIXI.Texture.from("./img/saple.png");
for (var i = 1; i < 10; i++) {
  eval("var sampleSprite0" + i + "= new PIXI.Sprite(sampleTexture);app.stage.addChild(sampleSprite0" + i + ");");
}

eval()という関数を使用すれば、この様な形で動的に変数を作成することができます。
eval()は、文字列として表された JavaScript コードを式として評価する関数です。

とても便利ですが、
・スコープの関係でvarしか使えない
・セキュリティ的な脆弱性がある
という問題があり、非推奨とされています。

参考
eval()https://developer.mozilla.org

連想配列を使用する


let sampleTexture = new PIXI.Texture.from("./img/saple.png");
let sampleSprite = {}; // 空の連想配列を用意
for (let i = 1; i < 10; i++) {
  sampleSprite[i] = new PIXI.Sprite(sampleSpriteTexture);
  app.stage.addChild(sampleSprite[i]);
}

可変変数を使用して動的に変数を作成し、コピーが9個生成できました。
連想配列を用いた方法のほうがコードも見やすいですね。