【JS/HTML】オブジェクト指向のクラスをなくしたプログラムが知りたいです

html
1<!DOCTYPE html>
2<head>
3  <meta charset="utf-8">
4  <script src=""></script>
5</head>
6<body>
7<input type="text" readonly="readonly" size="3"  value="" id="q_cnt"><br>
8<input type="text" readonly="readonly" size="6"  value="日本語：" id="jn_q" >
9<input type="text" readonly="readonly" size="20" value="" id="one_q"><br>
10[<a href="javascript:void(0);" onClick="switch_jn();"> ↑↓ </a>]<br>
11<input type="text" readonly="readonly" size="6"  value="英語：" id="jn_a" >
12<input type="text" readonly="readonly" size="20" value="" id="one_a"><br>
13<br>
14<a href="javascript:void(0);" onClick="prev_btn();" class="bottum"> BACK </a>/<a href="javascript:void(0);" onClick="next_btn();"class="bottum"> NEXT </a><br>
15
16
17<!--保存-->
18<input type="text" id="en" placeholder="単語">
19<input type="text" id="ja" placeholder="意味">
20<button id="btn">登録</button>
21<p id="total">全0件</p>
22<table id="table"></table>
23
24
25
26  <footer>
27    <p class="bottom"><a href="https://cms-web1.educ.chs.nihon-u.ac.jp/cgi-bin/Login.cgi" target="_blank">template by myrtilles.</a></p>
28  </footer>
29</body>
30</html>
31

js(6/20訂正版)
1window.onload = function () {
2	counter_view();
3  const en=document.getElementById('en');
4	const ja=document.getElementById('ja');
5	const btn=document.getElementById('btn');
6	const total=document.getElementById('total');
7	const table=document.getElementById('table');
8	function Color(en, ja) {
9	  return {
10	      en,
11	      ja,
12				showInfo() {
13	        const temp = document.createElement('template');
14
15	        temp.innerHTML = `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn">削除</button></td>`;
16	        const btn = temp.content.querySelector('.btn');
17	        btn.addEventListener('click', e => {
18	            if (window.confirm('本当に削除しますか？')) {
19	                let parent = e.target.closest('tr');
20									parent.remove();
21	                localStorage.removeItem('temp');
22									//localStorage.clear();//すべて削除
23	            }
24	        });
25	        return temp.content.children;
26	      },
27	      showInfo_test_en() {
28	          return `${this.en}`;
29	      },
30	      showInfo_test_ja() {
31	          return `${this.ja}`;
32	      }
33	  }
34	}
35	let colors=[];
36	const loadData=localStorage.getItem('colors');
37	if(loadData !=null){
38		let jsonArr=JSON.parse(loadData);
39		for(let i=0;i<jsonArr.length;i++){
40			let color=new Color(jsonArr[i].en,jsonArr[i].ja);
41			colors.push(color);
42		}
43		createTable();
44	}
45	btn.addEventListener('click',()=>{
46		let color=new Color(en.value,ja.value);
47		colors.push(color);
48		en.value='';
49		ja.value='';
50		createTable();
51		localStorage.setItem("colors",JSON.stringify(colors));
52	});
53	function createTable(){
54		table.innerHTML='<tr><th>単語</th><th>意味</th></tr>';
55		for(let i=0;i<colors.length;i++){
56			let tr=document.createElement('tr');
57			tr.append(...colors[i].showInfo());
58			table.appendChild(tr);
59			total.textContent=`全${colors.length}件`;
60      words[0][i] = colors[i].showInfo_test_en();
61      words[1][i] = colors[i].showInfo_test_ja();
62		}
63	}
64	createTable();
65};
66
67var n = 5;
68let words = new Array();
69for(var b = 0; b < n; b++) {
70  words[b] = new Array();
71  for(var a = 0; a < n; a++) {
72    words[b][a] = 0;
73  }
74}
75var array = [words[0].length];
76for(var i = 0; i<words[0].length; i++){
77  array[i] = i;
78}
79for (var i = array.length - 1; i >= 0; i--){
80	var rand = Math.floor( Math.random() * ( i + 1 ) );
81	[array[i], array[rand]] = [array[rand], array[i]]
82}
83
84var q_counter = -1;
85var qa_flag = false;
86var qa_lang = false;
87var q_lang = 0;
88var a_lang = 1;
89
90
91function switch_jn(){
92	if ( q_counter < 0 ) { return false; }
93	if ( qa_lang ) {
94		document.getElementById('jn_q').value = '日本語：';
95		document.getElementById('jn_a').value = '英語：';
96		q_lang = "0";
97		a_lang = "1";
98	} else {
99		document.getElementById('jn_q').value = '英語：';
100		document.getElementById('jn_a').value = '日本語：';
101		q_lang = "1";
102		a_lang = "0";
103	}
104	qa_lang = !(qa_lang);
105	qa_view();
106}
107
108function prev_btn(){
109	if (!(qa_flag)) { q_counter--; }
110	if ( q_counter < 0 ) { q_counter = n-1; }
111	qa_flag = !(qa_flag);
112	counter_view();
113	qa_view();
114}
115
116function next_btn(){
117	if ( !(qa_flag) ) { q_counter++; }
118	if ( q_counter >= n ) { q_counter = 0; }
119	qa_flag = !(qa_flag);
120	counter_view();
121	qa_view();
122}
123
124function qa_view(){
125	document.getElementById('one_q').value = words[q_lang][array[q_counter]];
126	if ( qa_flag ) {
127		document.getElementById('one_a').value = '';
128	} else {
129		document.getElementById('one_a').value = words[a_lang][array[q_counter]];
130	}
131}
132
133function counter_view(){
134	document.getElementById('q_cnt').value = q_counter + 1 + '/' + n;
135}
136
137/*
138showInfo() {
139					const i;
140					const btn2=document.getElementsByClassName("btn2");
141	          btn.addEventListener('click', () => {
142	              localStorage.removeItem(words[i][0]);
143	              localStorage.removeItem(words[i][1]);
144	              if (window.confirm('本当に削除しますか？')) {
145	                  let parent = button.parentNode;
146	                  parent.remove();
147	              }
148	          });
149*/

js(classあり)
1window.onload = function () {
2	counter_view();
3  const en=document.getElementById('en');
4	const ja=document.getElementById('ja');
5	const btn=document.getElementById('btn');
6	const total=document.getElementById('total');
7	const table=document.getElementById('table');
8	class Color{
9		constructor(en,ja){
10			this.en=en;
11			this.ja=ja
12		}
13		showInfo(){
14			return `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn">削除</button></td>`;
15      btn.addEventListener('click',()=>{
16    		localStorage.removeItem(words[i][0]);
17        localStorage.removeItem(words[i][1]);
18				if (window.confirm('本当に削除しますか？')) {
19			    let parent = button.parentNode;
20			    parent.remove();
21  			}
22    	});
23		}
24    showInfo_test_en(){
25			return `${this.en}`;
26		}
27    showInfo_test_ja(){
28			return `${this.ja}`;
29		}
30	}
31	let colors=[];
32	const loadData=localStorage.getItem('colors');
33	if(loadData !=null){
34		let jsonArr=JSON.parse(loadData);
35		for(let i=0;i<jsonArr.length;i++){
36			let color=new Color(jsonArr[i].en,jsonArr[i].ja);
37			colors.push(color);
38		}
39		createTable();
40	}
41	btn.addEventListener('click',()=>{
42		let color=new Color(en.value,ja.value);
43		colors.push(color);
44		en.value='';
45		ja.value='';
46		createTable();
47		localStorage.setItem("colors",JSON.stringify(colors));
48	});
49	function createTable(){
50		table.innerHTML='<tr><th>単語</th><th>意味</th></tr>';
51		for(let i=0;i<colors.length;i++){
52			let tr=document.createElement('tr');
53			tr.innerHTML=colors[i].showInfo();
54			table.appendChild(tr);
55			total.textContent=`全${colors.length}件`;
56      words[0][i] = colors[i].showInfo_test_en();
57      words[1][i] = colors[i].showInfo_test_ja();
58		}
59	}
60	createTable();
61};
62
63var n = 15;
64let words = new Array();
65for(var b = 0; b < n; b++) {
66  words[b] = new Array();
67  for(var a = 0; a < n; a++) {
68    words[b][a] = 0;
69  }
70}
71var array = [words[0].length];
72for(var i = 0; i<words[0].length; i++){
73  array[i] = i;
74}
75for (var i = array.length - 1; i >= 0; i--){
76	var rand = Math.floor( Math.random() * ( i + 1 ) );
77	[array[i], array[rand]] = [array[rand], array[i]]
78}
79
80var q_counter = -1;
81var qa_flag = false;
82var qa_lang = false;
83var q_lang = 0;
84var a_lang = 1;
85
86
87function switch_jn(){
88	if ( q_counter < 0 ) { return false; }
89	if ( qa_lang ) {
90		document.getElementById('jn_q').value = '日本語：';
91		document.getElementById('jn_a').value = '英語：';
92		q_lang = "0";
93		a_lang = "1";
94	} else {
95		document.getElementById('jn_q').value = '英語：';
96		document.getElementById('jn_a').value = '日本語：';
97		q_lang = "1";
98		a_lang = "0";
99	}
100	qa_lang = !(qa_lang);
101	qa_view();
102}
103
104function prev_btn(){
105	if (!(qa_flag)) { q_counter--; }
106	if ( q_counter < 0 ) { q_counter = words[0].length - 1; }
107	qa_flag = !(qa_flag);
108	counter_view();
109	qa_view();
110}
111
112function next_btn(){
113	if ( !(qa_flag) ) { q_counter++; }
114	if ( q_counter >= words[0].length ) { q_counter = 0; }
115	qa_flag = !(qa_flag);
116	counter_view();
117	qa_view();
118}
119
120function qa_view(){
121	document.getElementById('one_q').value = words[q_lang][array[q_counter]];
122	if ( qa_flag ) {
123		document.getElementById('one_a').value = '';
124	} else {
125		document.getElementById('one_a').value = words[a_lang][array[q_counter]];
126	}
127}
128
129function counter_view(){
130	document.getElementById('q_cnt').value = q_counter + 1 + '/' + words[0].length;
131}

ここまで正常に動作するプログラムです。

試したこと

js
1文字数制限のため削除させていただきました
2

yambejp

2022/06/15 04:42 編集

「オブジェクト指向のクラスをなくしたい」とは具体的にどういうイメージですか？クラスのメソッドをグローバルな関数で宣言するとかですかね？

hoshi-takanori

2022/06/15 04:52

JavaScript はクラスがなくてもオブジェクトは作れますからね。 var obj = { name: 'Taro', greet: function() { console.log(`Hello, ${this.name}`); } }; var obj2 = { ...obj, name: 'Jiro' }; obj.greet(); // Hello, Taro obj2.greet(); // Hello, Jiro

tetucame

2022/06/15 06:02

オブジェクト指向を使わないというより、クラスを使わないでということです。上手く説明できず、ごめんなさい。クラスを使わずに、for文や配列を用いてできればと思っています。実はいうと、classを作成する知識が十分になく、 -------現在やりたいこととして、・削除ボタン(画像参考)を押したら、その単語だけ消えるようにしたい・js63行目（"window.onload = function () "の次） "var n = 15;"を"var n = colors.length;"にしたいが、colors.lengthがローカル変数であり、グローバル変数にするとうまく動作しなくなる -------です。個人利用のもののため、特にこだわりはなく、上記2つのことができれば、なんでも大丈夫です。よろしくお願いします。

Jon_do

2022/06/15 09:31

正常に動作するコードが正常に動作しないので正常に動作するコードを書いた方が良いですよ。

tetucame

2022/06/16 00:51

htmlを全て載せました。よろしくお願いします。

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

回答1件

ベストアンサー

　クラスを使わないで書くならこんな感じでしょうか。

js
1            function Color(en, ja) {
2                return {
3                    en,
4                    ja,
5                    showInfo() {
6                        return `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn">削除</button></td>`;
7                        btn.addEventListener('click', () => {
8                            localStorage.removeItem(words[i][0]);
9                            localStorage.removeItem(words[i][1]);
10                            if (window.confirm('本当に削除しますか？')) {
11                                let parent = button.parentNode;
12                                parent.remove();
13                            }
14                        });
15                    },
16                    showInfo_test_en() {
17                        return `${this.en}`;
18                    },
19                    showInfo_test_ja() {
20                        return `${this.ja}`;
21                    }
22
23                }
24            }
25            // class Color {
26            //     constructor(en, ja) {
27            //         this.en = en;
28            //         this.ja = ja
29            //     }
30            //     showInfo() {
31            //         return `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn">削除</button></td>`;
32            //         btn.addEventListener('click', () => {
33            //             localStorage.removeItem(words[i][0]);
34            //             localStorage.removeItem(words[i][1]);
35            //             if (window.confirm('本当に削除しますか？')) {
36            //                 let parent = button.parentNode;
37            //                 parent.remove();
38            //             }
39            //         });
40            //     }
41            //     showInfo_test_en() {
42            //         return `${this.en}`;
43            //     }
44            //     showInfo_test_ja() {
45            //         return `${this.ja}`;
46            //     }
47            // }

　この場合、呼び出し時のnewは書いても書かなくても動作するはずです。

削除ボタン(画像参考)を押したら、その単語だけ消えるようにしたい

　とりあえず、return文以降のコードは実行されないので、イベントリスナを前に動かした方がいいかと思います。

　また、btnやiなどを、showInfoの中でconstで宣言してあげれば動作すると思います。

グローバル変数にするとうまく動作しなくなる

　スコープの問題というよりも、colorsの中身が作られるのがvar n = colors.length;が実行された後になるのが原因でしょう。

　window.onload = function () {...}内のコードは、ページの読み込みが終わってから実行されますので、トップレベルにあるコードの後に実行されるはずです。

　ステップ実行をするなどしてコードの実行順について理解を深めるのがいいかと思います。devtools の使い方は大丈夫ですか？

コメントを受けて追記

js
1                    showInfo() {
2                        const temp = document.createElement('template');
3
4                        temp.innerHTML = `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn">削除</button></td>`;
5                        const btn = temp.content.querySelector('.btn');
6                        btn.addEventListener('click', e => {
7                            // localStorage.removeItem(words[i][0]);
8                            // localStorage.removeItem(words[i][1]);
9                            if (window.confirm('本当に削除しますか？')) {
10                                let parent = e.target.closest('tr');
11                                parent.remove();
12                            }
13                        });
14 
15                        return temp.content.children;
16                    },

js
1                    tr.append(...colors[i].showInfo());

投稿2022/06/16 00:58

編集2022/06/17 02:03

Lhankor_Mhy

総合スコア35180

回答へのコメント

tetucame

2022/06/16 10:17 編集

詳しく教えてくださりありがとうございます。クラスを使用しないで無事に実行でき、window.onloadがロードされた後に実行されることも理解できました。ディベロッパーツールはあまり使用したことがありません。実行順やonload以外に何があるかも確認してみようかと思います。【　以下、上手くできなかったことです。】・window.onload = function内の要素数を取得できないようなので、このコードでは実行できないという解釈でよろしいでしょうか? ・また、削除ボタンを押して、単語を削除する処理についてですが、 btn や i をconstするというのは具体的にどうすれば良いのでしょうか。下記のように書いたのですが実行できません。(見にくいため、本文に同様のものを記載させていただきます (とりあえず要素を詰める処理は後で書こうと思っています) class名である"btn2"が複数できてしまい、できないのだと思います。配列を用いるのだと思うのですが、上手くできなく、ご教授のほどお願いできればと思います。 showInfo() { const i; const btn2=document.getElementsByClassName("btn2"); btn.addEventListener('click', () => { ocalStorage.removeItem(words[i][0]); localStorage.removeItem(words[i][1]); if (window.confirm('本当に削除しますか？')) { let parent = button.parentNode; parent.remove(); } }); 　　　return `<td>${this.en}</td><td>${this.ja}</td><td><button class="btn2">削除</button></td>`; },

Lhankor_Mhy

2022/06/17 01:13

> window.onload = function内の要素数を取得できないようなので、このコードでは実行できないという解釈でよろしいでしょうか? そうですね、修正が必要です。具体的には colors のスコープを外にするか、初期化部分のコードのスコープを中にするか、です。わかりやすいのは後者だと思います。 --- > btn や i をconstするというのは具体的にどうすれば良いのでしょうか。 i については、コードを見ても何をしたいのかわからない（word には 0 が入っているだけだと思う）ので、具体的なことはお答えできません。コードの意図をご説明いただければ何か言えることがあるかもしれません。 btn については、showInfo関数内でボタンを作成していますので、その参照を持っておけばいい、ということになります。そのためには、ボタンのDOMを作る必要があるため、showInfo関数はDOMを返すように変更する必要があります。具体的なコードですが、回答に追記します。

tetucame

2022/06/18 06:17

ありがとうございます。単語の削除は実行できたのですが、再読み込みをすると、削除する前の状態に戻ってしまいます。 LocalStorageからデータを削除したいです。(parent.remove();の箇所) 調べたところだと、localStorage.removeItem('');で一部データ削除が行えるようなのですが、クラス名は何にすればよろしいのでしょうか。 localStorage.clear();を実行してすべてのデータを削除されるのは確認できました。よろしくお願いします。

Lhankor_Mhy

2022/06/20 06:16

繰り返しになってしまうのですが、words などにどういう意図があるのかわからないので、これ以上のことは申し上げにくいです。コードを書いた意図を教えていただければもう少し言えることがあるかもしれません。たとえば、localStorage.removeItem がなぜ2行なのか、とか、words には何が入っているつもりなのか、とか、i には何が入っているつもりなのか、とか、そのあたりの説明はできますか？

tetucame

2022/06/20 10:44

二次元配列であるwordsに日本語と英語の単語が入り、 localStorage.removeItem([i][0])とlocalStorage.removeItem([i][1])とおくことで、1行のみ削除するイメージです。このプログラムiが存在していなく、これが実行できないことは理解しています。ただ、行ごとにボタンが押されたかチェックをしていき、ボタンが押されたら、その行(日本語と英語)を削除し、配列を詰めることができればと思っています。(削除したことで0の要素ができるため) wordsを削除すると結果が表示されなくなるのですが、wordsは0しか入っていないのでしょうかまた、教えていただいた、 let parent = e.target.closest('tr'); parent.remove(); 上記の2行のコードで削除ができるということは(localStorageからではない)、 localStorage.removeItem(parent)を実行すればできるのだと思っていたのですが、できないのでしょうか。ごめんなさい。18日に教えていただいたことを書いたプログラムを更新したのでよろしくお願いします。それ以前にコードがぐちゃぐちゃなのが要因だと思うので、難しそうなら自ら時間をかけて勉強しながら取り組もうと思います。

Lhankor_Mhy

2022/06/21 00:56

> localStorage.removeItem([i][0])とlocalStorage.removeItem([i][1])とおくことで、1行のみ削除するイメージです。 1行を削除するのに、localStorage.removeItemが2行ある意図は説明できますか？ --- > wordsを削除すると結果が表示されなくなるのですが、wordsは0しか入っていないのでしょうかご質問の意図がよくわからない（wordsを削除する、とはどういう意味でしょう？）ですが、words には0以外のものが入っているようです。 --- > localStorage.removeItem(parent)を実行すればできるのだと思っていたのですが、できないのでしょうか。できないです。 localStorage で保存されているのはただの文字列です。 --- > それ以前にコードがぐちゃぐちゃなのが要因だと思うので、難しそうなら自ら時間をかけて勉強しながら取り組もうと思います。 localStorage の理解が足りないように思います。また、devtools をあまり使っていないようにも見えます。 devtools を使わずにコードを書いていくことは、本職のプログラマにとっても苦行だと思いますので、避けた方がいいのでは。

Lhankor_Mhy

2022/06/21 08:14

コードを眺め直したのですが、単語の削除は、DOMにアクセスするのではなくて、Colors オブジェクトを削除してから createTable() で再表示しつつ localStorage.setItem("colors", JSON.stringify(colors)); でローカルストレージを更新した方が楽そうですね。

Lhankor_Mhy

2022/06/21 08:43

コードとしては、こうですかね。 if (window.confirm('本当に削除しますか？')) { colors = colors.filter(x => x !== this); createTable(); localStorage.setItem("colors", JSON.stringify(colors));

tetucame

2022/06/22 02:36

ありがとうございました。無事にやりたかったことが実装できました。多重配列の1列目と2列目をそれぞれ削除しようとlocalStorage.removeItemを2行書きましたが、私自身の認識が間違っているのだと思います。プログラム初心者かつ、jsも触れ始めたばかりで、説明不足な点、失礼しました。今後は今回のプログラムを整理して、回答していただいた内容も見返しながら、見やすいコードにしていけたらと思っています。 devtoolsは全く使ったことがないため、勉強したいと思います。分かりやすく書いてくださり、ありがとうございました。

Lhankor_Mhy

2022/06/22 03:40

ご解決されて何よりです。ご存知かと思いますが、array の処理ができていませんので、QA側の方はおかしなことになっていると思います。お気を付けください。

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