【javascript】可変変数で動的に変数を作成してみた！
はじめに
この記事の概要
こんにちは。エンジニア（コーディング）のタクヤです。
今回のテーマはJavaScriptで可変変数で動的に変数を作成してみた！です。
対象となる方
- JavaScriptを勉強中の方
- Web制作でコーディングをしている方
- JavaScriptで可変変数で動的に変数を作成してみたい方
可変変数とは
可変変数とは、文字列などの変数の値に対してさらに変数を入れ込んだものです。
変数を変数で作る感じで変数を動的に作成することが可能です。
例(PixiJS)
PixiJSというJavaScriptのライブラリを使い、ひとつの画像から複数のオブジェクトを作成することを想定します。
let sampleTexture = new PIXI.Texture.from("./img/sample.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/sample.png");
for ( let i = 1; i < 10; i++ ) {
let "sampleSprite0" + i = new PIXI.Sprite(sampleTexture);
}
// こんなの書き方できないよね.....こんな書き方はできないので、変数を動的に変えていく必要があります。
可変変数を使う
evalを使用する
let sampleTexture = new PIXI.Texture.from("./img/sample.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() - JavaScript | MDN
eval() 関数は、文字列として表現された JavaScript コードを評価します。ソースはスクリプトとして解釈されます。
developer.mozilla.org配列を使用する（推奨）
連番で管理する場合は、配列を使うのが最も一般的で適切な方法です。
let sampleTexture = new PIXI.Texture.from("./img/sample.png")
let sampleSprites = [] // 空の配列を用意
for (let i = 0; i < 9; i++) {
sampleSprites[i] = new PIXI.Sprite(sampleTexture)
app.stage.addChild(sampleSprites[i])
}配列を使うとlengthプロパティやforEach、mapなどのメソッドが使えるため、後からの操作がしやすくなります。
// 全てのスプライトに対して処理を行う例
sampleSprites.forEach((sprite) => {
sprite.visible = false
})オブジェクトを使用する
意味のあるキー名で管理したい場合は、オブジェクトを使って動的にプロパティを追加できます。
let sampleTexture = new PIXI.Texture.from("./img/sample.png")
let sampleSprite = {} // 空のオブジェクトを用意
for (let i = 1; i < 10; i++) {
sampleSprite[`sprite${i}`] = new PIXI.Sprite(sampleTexture)
app.stage.addChild(sampleSprite[`sprite${i}`])
}オブジェクトのブラケット記法（[]）を使うことで、動的にキーを指定してプロパティにアクセスできます。
さいごに
「JavaScriptで可変変数で動的に変数を作成してみた！」を解説してきました。
変数を動的に作成したい場合があるときは、この可変変数を使用する方法を試しても良いかもしれません。
Web制作におけるJavaScriptの基礎固め学習には以下の書籍がおすすめです。
是非ご覧になってJavaScriptの知識を深めていきましょう。
Amazon
Amazon
amzn.toこの記事を書いた人
