ローカルストレージに保存可能に　続き

前回の続きです。お手数ですがよろしくお願いします。

コメントに基づきコードを変えてみました。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>単語帳</title>
8</head>
9
10<body>
11    <h1>プログラミング必須英単語600+</h1>
12    <input type="text" placeholder="単語">
13    <input type="text" placeholder="意味">
14    <button id="btn">登録</button>
15    <p id="total">全0件</p>
16    <table id="table">
17        <tr>
18            <th>単語</th>
19            <th>意味</th>
20        </tr>
21        <tr>
22            <td colspan=2 id="class">BASIC 300</td>
23        </tr>
24    </table>
25
26
27    <style>
28        h1 {
29            font-family: "Yu Gothic";
30        }
31
32        /*idにテーブルがついている要素*/
33        #table {
34            /* テーブルの境界線を重ねて表示し、隣接するセルの境界線を1本にまとめる */
35            border-collapse: collapse;
36        }
37
38        /*td要素とth要素*/
39        td,
40        th {
41            /*1px実践の罫線(色は#333)*/
42            border: 1px solid #333;
43            /*上下0 左右10pxのパディング*/
44            padding: 0 10px;
45            /*テキストを中央揃えにする */
46            text-align: center;
47        }
48
49        th {
50            background: #0000ff;
51            /*文字色を白に設定*/
52            color: white;
53        }
54
55        #class {
56            background: pink;
57        }
58    </style>
59
60
61    <script>
62        'use strict';
63
64        //文書が読み込み終わったら処理を実行
65        window.onload = () => {
66            class Word {
67                //コンストラクター
68                constructor(en, ja) {
69                    this.en = en;
70                    this.ja = ja;
71                }
72
73                //メソッド
74                showInfo() {
75                    return `<td>${this.en}</td><td>${this.ja}</td>`;
76                }
77            }
78
79            //input要素をNodeListとして取得
80            const inputs = document.querySelectorAll('input');
81            //セレクタをもとに要素を取得
82            const btn = document.querySelector('#btn');
83            const total = document.querySelector('#total');
84            const table = document.querySelector('#table');
85
86            //空の配列を準備
87            let list = [];
88
89            //localStorageからwordsというキーがついた項目を取得
90            const loadData = localStorage.getItem('words');
91
92            //データがあれば
93            if (loadData !== null) {
94                //取得したJSON形式のデータをオブジェクトの配列に変換
95                const words = JSON.parse(loadData);
96                //配列から1件ずつwordとして取り出す
97                words.forEach((word) => {
98                    //listにWordインスタンスを追加
99                    list.push(new Word(word.en, word.ja));
100                });
101                updateTable();
102            }
103
104            //btnにクリックイベントを登録
105            btn.addEventListener('click', () => {
106                // 入力値を取得(前後についた無駄なスペースを除去)
107                const enValue = inputs[0].value.trim();
108                const jaValue = inputs[1].value.trim();
109
110                if (enValue === '' || jaValue === '') {
111                    alert('単語と意味を両方入力してください。');
112                    return;  // 入力が不正な場合は処理を中断
113                }
114
115                //Wordインスタンスを作成
116                let word = new Word(enValue, jaValue);
117                //インスタンスを配列に追加
118                list.push(word);
119                //すべてのinput要素を空欄にする
120                inputs.forEach((input) => {
121                    input.value = '';
122                });
123                updateTable();
124                //配列の単語リストをJSON形式に変換し、localStorageに保存
125                localStorage.setItem('words', JSON.stringify(list));
126            });
127
128            function updateTable() {
129                //見出し行を作成
130                table.innerHTML = '<tr><th>単語</th><th>意味</th></tr>';
131                table.innerHTML += '<tr><td>BASIC 300</td></tr>';
132
133                //配列から1件1件取り出しながら処理を行う(取り出した1件をwordとして扱う)
134                list.forEach((word) => {
135                    //tr要素を作成
136                    let tr = document.createElement('tr');
137                    //trの子要素をhtmlが含まれた文字列で設定
138                    tr.innerHTML = word.showInfo();
139                    //table要素の子要素として作成したtr要素を追加
140                    table.appendChild(tr);
141                });
142
143                //total要素のテキストコンテントを設定
144                total.textContent = `全${list.length}件`;
145            }
146
147            updateTable();
148        };
149    </script>
150
151</body>
152
153</html>

結果は以下のようになり、表の重複は解消されています。
しかし、BASIC 300のcolspan(２２行）とCSS加飾が無くなっています。
どうやったら戻せますか？

以前は

quickquip

2024/10/26 01:52

https://teratail.com/questions/q5q2zsg5ci5dq1 が参考になると思いますが? 忘れてますか?

zawber

2024/10/26 02:14

覚えてます。JavaScript側で付けれますか？

juner

2024/10/26 03:57 編集

innerHTMLで書いていることはタグと同等ですよ……？もしも、二重引用符がダブっててうまくいかないと言われるのでしたらバッククォートを使うと良いです。

zawber

2024/10/26 04:40

戻りました！なぜhtml側のは機能しない。JavaScriptが優先なんですか？

juner

2024/10/26 12:40

innerHTML に設定していることが何をしているかを認識できていますでしょうか？どのタイミングでやっていますでしょうか？

zawber

2024/10/26 21:45

あんまり分かってないと思います。初めて見ました。

juner

2024/10/27 16:14

innerHTML により <table> タグの中身の部分を書き換えていますのでつまり、既に書いていても上書きされるということです。（だからこそヘッダ部分をわざわざ updateTable() 内で書き替えているわけですなので私としては書き換えたくないところは tbody とかで分離することをお勧めします（table に於ける tbody タグは複数書くことができるため

zawber

2024/10/28 01:10

上書きされるんですね。ありがとうございます。

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

回答3件

ざっくりこんなかんじですかね
おそらく学習用なのでWordクラスを使う前提にしてありますが
データの接続方法は調整してあります

html
1<style>
2#table { border-collapse: collapse;}
3td,th {
4border: 1px solid #333;
5padding: 0 10px;
6text-align: center;
7}
8th {
9background: #0000ff;
10color: white;
11}
12#class {background: pink;}
13</style>
14<script>
15'use strict';
16function updateTable(words=[]) {
17  const tbody=table.querySelector('tbody');
18  tbody.innerHTML = '';;
19  if(words.length==0){
20    tbody.innerHTML = '<tr><td colspan=2 id="class">BASIC 300</td></tr>';;
21  }
22  words.forEach((word) => {
23    let tr = document.createElement('tr');
24    tr.innerHTML = word.showInfo();
25    tbody.appendChild(tr);
26  });
27  total.textContent = `全${words.length}件`;
28}
29class Word {
30  constructor(en, ja) {
31    this.data={key:en,value:ja};
32    this.name="Word";
33  }
34  showInfo(){
35    return `<td>${this.data.key}</td><td>${this.data.value}</td>`;
36  }
37}
38window.addEventListener('DOMContentLoaded', ()=>{
39  const inputs = document.querySelectorAll('input');
40  const btn = document.querySelector('#btn');
41  const total = document.querySelector('#total');
42  const table = document.querySelector('#table');
43  const loadData = localStorage.getItem('words');
44  const words = (JSON.parse(loadData)||[]).map(word=>new Word(word.data.key,word.data.value));
45  updateTable(words);
46  btn.addEventListener('click', () => {
47    const enValue = inputs[0].value.trim();
48    const jaValue = inputs[1].value.trim();
49    if (enValue === '' || jaValue === '') {
50      alert('単語と意味を両方入力してください。');
51      return;  // 入力が不正な場合は処理を中断
52    }
53    let word = new Word(enValue, jaValue);
54    words.push(word);
55    inputs.forEach((input) => {
56      input.value = '';
57    });
58    localStorage.removeItem('words');
59    localStorage.setItem('words', JSON.stringify(words));
60    updateTable(words);
61  });
62  remove.addEventListener('click', () => {
63    words.length=0;
64    localStorage.removeItem('words');
65    updateTable();
66  });
67});
68</script>
69
70<h1>プログラミング必須英単語600+</h1>
71<input type="text" placeholder="単語">
72<input type="text" placeholder="意味">
73<button id="btn">登録</button>
74<p id="total">全0件</p>
75<table id="table">
76<thead>
77<tr>
78<th>単語</th>
79<th>意味</th>
80</tr>
81</thead>
82<tbody>
83</tbody>
84</table>
85<button id="remove">remove</button>

※一部調整

投稿2024/10/28 01:34

編集2024/10/28 02:39

yambejp

総合スコア116623

zawber

2024/10/28 06:50

ありがとうございます。ゆっくり見てみます。

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

ベストアンサー

ここを

html
1<table id="table">
2    <tr>
3        <th>単語</th>
4        <th>意味</th>
5    </tr>
6    <tr>
7        <td colspan=2 id="class">BASIC 300</td>
8    </tr>
9</table>

こうして

html
1<table>
2    <thead>
3        <tr>
4            <th>単語</th>
5            <th>意味</th>
6        </tr>
7        <tr>
8            <td colspan=2 id="class">BASIC 300</td>
9        </tr>
10    </thead>
11    <tbody id="table"></tbody>
12</table>

ここを

js
1function updateTable() {
2    //見出し行を作成
3    table.innerHTML = '<tr><th>単語</th><th>意味</th></tr>';
4    table.innerHTML += '<tr><td>BASIC 300</td></tr>';
5    // ...
6}

こうすれば

js
1function updateTable() {
2    //内容をクリア
3    table.innerHTML = '';
4    // ...
5}

うまくいくのではないでしょうか？
そうすれば不必要なクリアは発生しないかと思われます。

上記を反映した playground はこちらです。
https://livecodes.io/?x=id/5v84fisxi6a

※ onload は javascript モジュールにすることで省略しています。

以上。

参考リンク

投稿2024/10/30 02:33

juner

総合スコア483

zawber

2024/11/01 00:06 編集

onlordは、そのままですが上手くいっています。ありがとうございます。やっぱりよく分からないのが、 list.push(new Word(word.en, word.ja)); と let word = new Word(enValue, jaValue); の違いです。 Wordのクラスが２つになったんでしょうか？

juner

2024/11/01 00:56 編集

それは ```js list.push(new Word(word.en, word.ja)); ``` という表現が ```js let word = new Word(word.en, word.ja); list.push(word); ``` 実行順上同じ動作なのですが、どうわからないのでしょうか？ > Wordのクラスが２つになったんでしょうか？クラス自体は先頭で宣言している ```js class Word { ... } ``` がクラスなので一つでは？クラスが2つにのニュアンスがわからないです。

zawber

2024/11/04 04:54

つまり今までのenValue, jaValueはどこ行ったんっていうことです。

juner

2024/11/04 12:45

json の構造として en と ja を取り込んでるって話では……？

zawber

2024/11/06 00:07

1．enValueとjaValueでlistを作る。 2．1.のlistをJSON形式でlocalStorageに保存する。 3．localStorageに保存しただけでは只の配列なのでnew Word(word.en, word.ja)でクラスを作り、それで新しい？listを作成する。これによってメソッドであるshowInfo() が使えるようになる。これで合ってますか？

juner

2024/11/06 00:31

- enValue / jaValue: click 時に生成している各入力項目の一時変数 - list: updateTable() 時に画面に反映する復元元のリスト - Word : メモリ上で扱いやすい様にする為の構造 en / ja のプロパティにそれぞれ英語と日本語が入っている JSON.stringify されると {en:"", ja: ""} の形式になる - updateTable(): list に格納された Word の showInfo() を呼び出してテーブルに反映する - click 時に enValue / jaValue を元にして Word を作成して list に格納した上で localStorage にも保存する - 画面読み込み時に localStorage から json を元に Word に変換して list に格納するあたり？

zawber

2024/11/06 01:34

たぶん。ありがとうございました。

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

皆様のおかげで助かりました。ありがとうございます。

投稿2024/10/28 01:15

zawber

総合スコア14