javascriptでグローバルな配列を使わずに、一つの要素のイベントが他の要素にも影響を与えるプログラムを書きたいです。

前提

javascriptで「文字を表示する要素」と「テキストボックス」と「ボタン」を適当に１０個ほど表示して、テキストボックスに値を入力してボタンを押すと、おのおのの文字が変わって、"All"と入力したときだけ、他のすべての要素の文字も「All!!」となるようなテストプログラムを書いてみました。

実現したいこと

グローバルな配列を使わずに一つの関数かクラスのようなもので完結したプログラムにしたいです。

発生している問題・エラーメッセージ

このように、特定の条件の時に関連する他のオブジェクトにも影響を与えたい時に、オブジェクトを配列に入れといてループ処理でできることはわかったのですが、他のプログラムに組み込みたい時に、グローバル変数を使っていると、少し変数の名前が変わったりしただけで、中身のプログラムも書き換えなくてはならないのが不便だと思い、知恵をお借りしたいと思いました。

該当のソースコード

javascript
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <mata charset="utf-8">
6        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7        <title>test</title>
8</head>
9
10<body>
11    <div></div>
12    <script type="text/javascript">
13
14        const elements = [];
15
16        const generateInput = class {
17            constructor() {
18                const div = this.createInputForm();
19                this.changeOperation(div);
20                elements.push(div);
21                return div;
22            }
23            createInputForm = () => {
24                const div = document.createElement("div");
25                const createHTwo = () => {
26                    const hTwo = document.createElement("h2");
27                    hTwo.textContent = "初期値！";
28                    return hTwo;
29                }
30                const createInput = () => {
31                    const input = document.createElement("input");
32                    input.type = "text";
33                    return input;
34                }
35                const createButton = () => {
36                    const button = document.createElement("button");
37                    button.type = "button";
38                    button.textContent = "更新！"
39                    return button;
40                }
41                div.append(createHTwo(), createInput(), createButton());
42                return div;
43            }
44            changeOperation = (element) => {
45                const hTwo = element.children[0];
46                const input = element.children[1];
47                const button = element.children[2];
48                button.addEventListener('click', () => {
49                    if (input.value === "All") {
50                        elements.forEach((element, index) => {
51                            elements[index].children[0].textContent = "All!!";
52                        });
53                    } else {
54                        hTwo.textContent = input.value;
55                    }
56                }, false);
57            }
58        }
59
60        const body = document.querySelector("body");
61        for (i = 0; i < 10; i++) {
62            const input = new generateInput();
63            body.append(input);
64        }
65
66    </script>
67</body>
68
69</html>

試したこと

コード全体を関数でくくって、その関数内で配列を定義してグローバルからforループで呼び出してみても、関数が一回実行されるたびに、関数内の配列に一個だけエレメントが入って、処理から抜けての繰り返しになってしまいます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

maisumakun

2022/11/24 13:38

「コード全体を関数でくくって」と言われた場合、JavaScriptでは本当に全部（forループを回すところも）入れるコードを書くことも可能なのですが、それでは何か問題がある状況なのでしょうか？

mizunodesu

2022/11/24 19:11

forループで呼び出すのは、使いたい時にグローバルスコープから呼び出すことを想定しておりまして、一行目の"const elements = [];"を関数かクラス内に閉じ込められないかなと思った意図でした。ご指摘ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

質問の意図を誤って解釈していたらすみません…。
const elements = [];をグローバル空間で定義しているのを避けたいという意味と受け取って以下をご提案します。

static キーワードをつけると、クラスに静的メソッドや静的プロパティを定義できます。
どういう意味かというと、インスタンス固有ではなく、クラス共通のメソッドやプロパティということです。

動作確認用サンプル：https://jsfiddle.net/atghqsky/

javascript
1const generateInput = class {
2  static elements = []; // 追加
3
4  constructor() {
5    const div = this.createInputForm();
6    this.changeOperation(div);
7    generateInput.elements.push(div); // 変更
8    return div;
9  }
10  createInputForm = () => {
11    const div = document.createElement("div");
12    const createHTwo = () => {
13      const hTwo = document.createElement("h2");
14      hTwo.textContent = "初期値！";
15      return hTwo;
16    }
17    const createInput = () => {
18      const input = document.createElement("input");
19      input.type = "text";
20      return input;
21    }
22    const createButton = () => {
23      const button = document.createElement("button");
24      button.type = "button";
25      button.textContent = "更新！"
26      return button;
27    }
28    div.append(createHTwo(), createInput(), createButton());
29    return div;
30  }
31  changeOperation = (element) => {
32    const hTwo = element.children[0];
33    const input = element.children[1];
34    const button = element.children[2];
35    button.addEventListener('click', () => {
36      if (input.value === "All") {
37        generateInput.elements.forEach((element, index) => { // 変更
38          generateInput.elements[index].children[0].textContent = "All!!"; // 変更
39        });
40      } else {
41        hTwo.textContent = input.value;
42      }
43    }, false);
44  }
45}
46
47const body = document.querySelector("body");
48for (i = 0; i < 10; i++) {
49  const input = new generateInput();
50  body.append(input);
51}