動的変数名でJavaScriptがもっと便利！初心者でも分かる７つの方法

はじめに
●動的変数名とは
●動的変数名の基本的な使い方
- ○サンプルコード1：オブジェクトのプロパティ名を動的に設定する
- ○サンプルコード2：変数名を動的に生成する
●動的変数名の応用例
●注意点と対処法
まとめ

※本記事のコンテンツは、利用目的を問わずご活用いただけます。実務経験10000時間以上のエンジニアが監修しており、基礎知識があれば初心者にも理解していただけるように、常に解説内容のわかりやすさや記事の品質に注力しております。不具合・分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。(理解できない部分などの個別相談も無償で承っております)
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptで動的変数名を使いこなす方法が分かるようになります。

初心者向けに分かりやすく説明し、実用的なサンプルコードも紹介しています。

これにより、コードの柔軟性が向上し、プログラミングがもっと便利になります。

●動的変数名とは

動的変数名とは、プログラム実行中に変数名が変わることが可能な変数のことです。

JavaScriptでは、オブジェクトのプロパティ名や関数名、イベントリスナーなどを動的に生成することができます。

これにより、コードの柔軟性が向上し、プログラミングがより便利になります。

●動的変数名の基本的な使い方

○サンプルコード1：オブジェクトのプロパティ名を動的に設定する

const obj = {};
const propName = "name";
obj[propName] = "John Doe";
console.log(obj); // { name: 'John Doe' }

このサンプルコードでは、オブジェクトobjのプロパティ名nameを動的に設定しています。

まず、空のオブジェクトobjを定義し、次にプロパティ名を表す変数propNameに文字列"name"を代入しています。

その後、obj[propName]を使って、オブジェクトのプロパティ名を動的に設定し、値に"John Doe"を代入しています。

最後にconsole.log(obj)でオブジェクトを表示すると、{ name: 'John Doe' }のようにプロパティ名が動的に設定されていることがわかります。

○サンプルコード2：変数名を動的に生成する

for (let i = 1; i <= 3; i++) {
  window["variable" + i] = i * 10;
}

console.log(variable1); // 10
console.log(variable2); // 20
console.log(variable3); // 30

このサンプルコードでは、forループを使って変数名を動的に生成しています。

ループ内でwindow["variable" + i]を使い、variable1、variable2、variable3といった変数名を動的に生成し、それぞれにi * 10の値を代入しています。

ループが終了した後、console.log(variable1)などで動的に生成された変数の値を表示しています。

●動的変数名の応用例

○サンプルコード3：関数名を動的に生成する

function createFunction(name, func) {
  window[name] = func;
}

createFunction("hello", function () {
  console.log("こんにちは");
});

hello(); // こんにちは

このサンプルコードでは、createFunction関数を使って関数名を動的に生成しています。

createFunction関数は、引数nameで指定された関数名をwindowオブジェクトに登録し、引数funcで指定された関数を関数本体として定義します。

この例では、createFunction関数を使ってhello関数を定義し、その後hello()で関数を呼び出しています。

○サンプルコード4：イベントリスナーを動的に生成する

const button = document.createElement("button");
button.innerText = "クリックしてください";
document.body.appendChild(button);

const events = ["click", "mouseover", "mouseout"];

for (const event of events) {
  button.addEventListener(event, function () {
    console.log(`${event} イベントが発生しました`);
  });
}

このサンプルコードでは、button要素に対して複数のイベントリスナーを動的に生成しています。

まず、button要素を作成し、テキストを設定して画面に表示します。

次に、events配列にイベント名を格納し、forループを使ってイベントリスナーを動的に生成しています。

イベントリスナーは、イベント名とともにコンソールにログを出力する機能を持ちます。

○サンプルコード5：オブジェクトのメソッド名を動的に生成する

const obj = {
  createMethod(name, func) {
    this[name] = func;
  },
};

obj.createMethod("sayHello", function () {
  console.log("こんにちは");
});

obj.sayHello(); // こんにちは

このサンプルコードでは、オブジェクトのメソッド名を動的に生成しています。

createMethod関数を使って、引数nameで指定されたメソッド名をオブジェクトに登録し、引数funcで指定された関数をメソッド本体として定義しています。

この例では、obj.createMethod関数を使ってsayHelloメソッドを定義し、その後obj.sayHello()でメソッドを呼び出しています。

○サンプルコード6：データ構造の管理を簡単にする

const data = {
  users: {},
  addUser(id, name) {
    this.users[id] = { name };
  },
  getUser(id) {
    return this.users[id];
  },
};

data.addUser(1, "Alice");
data.addUser(2, "Bob");

console.log(data.getUser(1)); // { name: 'Alice' }
console.log(data.getUser(2)); // { name: 'Bob' }

このサンプルコードでは、オブジェクトを使ってデータ構造を管理し、データの追加や取得を簡単に行えるようにしています。

addUserメソッドを使ってユーザーを追加し、getUserメソッドを使ってユーザー情報を取得できます。

○サンプルコード7：クラス名やID名を動的に設定する

const div = document.createElement("div");
const className = "container";
const idName = "main";

div.className = className;
div.id = idName;

document.body.appendChild(div);

このサンプルコードでは、div要素のクラス名とID名を動的に設定しています。

まず、div要素を作成し、変数classNameとidNameにそれぞれクラス名とID名を格納しています。

次に、div要素にクラス名とID名を設定し、最後にdiv要素を画面に表示します。