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

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

新規登録して質問してみよう
ただいま回答率
85.69%
DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1270閲覧

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

mizunodesu

総合スコア3

DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

1クリップ

投稿2022/11/24 13:31

前提

javascriptで「文字を表示する要素」と「テキストボックス」と「ボタン」を適当に10個ほど表示して、テキストボックスに値を入力してボタンを押すと、おのおのの文字が変わって、"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/ツールのバージョンなど)

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

Cocode👍を押しています

気になる質問をクリップする

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

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

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

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

maisumakun

2022/11/24 13:38

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

2022/11/24 19:11

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

回答1

2

ベストアンサー

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

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

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}

投稿2022/11/24 14:25

編集2022/11/24 14:28
Cocode

総合スコア2314

spoofy_dragon, mizunodesuを押しています

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

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

このような回答には修正を依頼しましょう。

また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。

回答へのコメント

mizunodesu

2022/11/24 19:43

staticの説明、わかりやすかったです。 とても便利そうなのでstatic使わせていただきます。 ありがとうございました!

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.69%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。