フラッシュカードでローカルストレージのデータを使いたい

こちらのフラッシュカードのコードで、

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>Document</title>
8
9    <style>
10        body {
11            margin: 0;
12            background: #e0e0e0;
13            text-align: center;
14            font-family: Verdana, sans-serif;
15            color: #fff;
16        }
17
18        #btn {
19            width: 200px;
20            margin: 0 auto;
21            padding: 7px;
22            border-radius: 5px;
23            background: #00aaff;
24            box-shadow: 0 4px 0 #0088cc;
25            cursor: pointer;
26        }
27
28        #btn:hover {
29            opacity: 0.8;
30        }
31
32        #card {
33            margin: 60px auto 20px;
34            width: 400px;
35            height: 100px;
36            cursor: pointer;
37            font-size: 38px;
38            line-height: 100px;
39            perspective: 100px;
40            transform-style: preserve-3d;
41            transition: transform 0.8s;
42        }
43
44        #card-front,
45        #card-back {
46            width: 100%;
47            height: 100%;
48            border-radius: 5px;
49            position: absolute;
50            backface-visibility: hidden;
51        }
52
53        #card-front {
54            background: #fff;
55            color: #333;
56        }
57
58        #card-back {
59            background: #00aaff;
60            transform: rotateY(180deg);
61        }
62
63        .open {
64            transform: rotateY(180deg);
65        }
66    </style>
67</head>
68
69<body>
70    <div id="card">
71        <div id="card-front"></div>
72        <div id="card-back"></div>
73    </div>
74    <div id="btn">NEXT</div>
75
76
77    <script>
78        (function () {
79            'use strict';
80
81            let words = [
82                { 'en': 'read', 'ja': '読む' },
83                { 'en': 'write', 'ja': '書く' },
84                { 'en': 'eat', 'ja': '食べる' },
85                { 'en': 'run', 'ja': '走る' },
86                { 'en': 'walk', 'ja': '歩く' }
87            ];
88
89            let card = document.querySelector('#card');
90            let cardFront = document.querySelector('#card-front');
91            let cardBack = document.querySelector('#card-back');
92            let btn = document.querySelector('#btn');
93
94            card.addEventListener('click', function () {
95                flip();
96            });
97            btn.addEventListener('click', function () {
98                next();
99            })
100
101            function next() {
102                if (card.className === 'open') {
103                    flip();
104                    card.addEventListener('transitionend', setCard);
105                } else {
106                    setCard();
107                }
108            }
109
110            function setCard() {
111                let num = Math.floor(Math.random() * words.length);
112                cardFront.innerHTML = words[num]['en'];
113                cardBack.innerHTML = words[num]['ja'];
114                card.removeEventListener('transitionend', setCard);
115            }
116
117            setCard();
118
119            window.addEventListener('keyup', function(e) {
120                // e.keyCode  f:70, n:78
121                // console.log(e.keyCode);
122                if(e.keyCode === 70) {
123                    flip();
124                } else if(e.keyCode === 78) {
125                    next();
126                }
127            });
128
129            function flip() {
130                card.className = card.className === '' ? 'open' : '';
131            }
132        })();
133    </script>
134</body>
135
136</html>

こちらの単語帳のコードで作ったローカルストレージのデータを使いたく、90～103行をフラッシュカードのコードにコピーしてみたのですが上手くいかなかったです。どうしたら良いでしょうか？。よろしくお願いします。
ローカルストレージのデータをファイルに移したり出来ますか？それをどう使うか分かりませんが

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

yambejp

2024/11/11 02:21

ローカルストレージはクライアント側のデータを一時的に保存する仕組みですからローカルストレージのデータを利用してなにか処理をするというのは合理的ではありません

juner

2024/11/11 04:09

どうしたらいいかわからないというのはどういう意味でしょうか？ localStorage を使っている方には読み込むコードも書き込むコードもあるはずですが…… （ただし、他のページでも同じデータを使いたい場合は同じオリジンの必要があるのでサブドメインで別のドメインにしているとかあるとアクセスできないので注意が必要です。

zawber

2024/11/11 06:24

コメントありがとうございます。質問を修正したのでご確認よろしくお願いいたします。

juner

2024/11/11 07:05 編集

フラッシュカードがカードを出す仕組みは理解しておられますでしょうか……？変数 `words` に所定の形式で設定した値を元に切り替えを行っているので初回の `setCard()` を呼び出す前に反映すればいいのではないでしょうか……？一度 F12 でローカルストレージのテキストを確認したり、ブレークポイントを張って、ステップ実行してみた方がいいのではないでしょうか……？ playground フラッシュカード: https://livecodes.io/?x=id/d647uw9kbdg 単語帳: https://livecodes.io/?x=id/btturmgj3zf

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

回答1件

ベストアンサー

まず、フラッシュカードのデータ形式を確認してください

js
1let words = [
2  { en: "read", ja: "読む" },
3  { en: "write", ja: "書く" },
4  { en: "eat", ja: "食べる" },
5  { en: "run", ja: "走る" },
6  { en: "walk", ja: "歩く" },
7];

単語帳で作成したローカルストレージのデータを確認してください

F12 からアプリケーション＞ローカルストレージより

https://learn.microsoft.com/ja-jp/microsoft-edge/devtools-guide-chromium/storage/localstorage

json
1[{"en":"cat","ja":"🐈"},{"en":"dog","ja":"🐕"},{"en":"dragon","ja":"🐉"}]

同じ形式なのが確認できると思います。（配列で中のオブジェクトに en と ja のプロパティがある構造）

つまり words の宣言あとくらいにでも次の様なコードを入れて変数を上書きすれば解決する話となります。

js
1//localStorageからwordsというキーがついた項目を取得
2const loadData = localStorage.getItem("words");
3
4console.trace(loadData);
5//データがあれば
6if (loadData !== null) {
7  //取得したJSON形式のデータをオブジェクトの配列に変換
8  words = JSON.parse(loadData);
9}

playground

以上。

参考

単語帳: https://livecodes.io/?x=id/btturmgj3zf
フラッシュカード: https://livecodes.io/?x=id/d647uw9kbdg

投稿2024/11/11 07:21

編集2024/11/11 07:22

juner

総合スコア453

zawber

2024/11/12 01:53

こうですか？ https://github.com/zawber/flash-cards/blob/main/index%20use-localstorage.html ローカルストレージのデータは取り込まれてるようですが反映されません。ダブルクォーテーションにしたほうが良いですか？ブレークポイントはどこに設定したら良いですか？そっから1行づつ実行ですか？

juner

2024/11/12 02:12

代入先の変数が新しく作った const な words 変数（別のブロックスコープなので宣言できる）だからですね。ブレークポイントを張るならとりあえず `let words` のところあたりから1行ずつステップ実行していくとわかりやすいと思います。（設定後ブロック抜けたときあたりでの違いがわかると思います。

zawber

2024/11/12 06:36

やってみましたがローカルストレージからデータが来てるのは分かるかなっていう感じです。そこからカードが選ばれたらいいんですけど。

juner

2024/11/12 07:07 編集

> データが来てるブロック抜けた際の値はどうなっていましたか？そのブロックで同名の変数を宣言してそこに入れているだけなのでそもそもそのブロックを抜けられないと思うのですが。 const let は別のブロックであれば新たに宣言が可能でそれぞれそのブロックの中でだけ有効であることに注意が必要です。（新たに同名で宣言すると、その宣言したブロック内だけ変数が別の変数に置き換えられます参考: https://livecodes.io/?x=id/y7mphegyxfi

zawber

2024/11/12 08:43

https://github.com/zawber/flash-cards/blob/main/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-11-12%20172400.png ｛｝内がブロックなんですね。124行とかを見るとデータは入ってないようですが

juner

2024/11/12 09:56

その図の 124行目だと要素の情報が出ているだけでは……？むしろその前の words に 5 つ入っているとかな気がしますが……？

zawber

2024/11/12 11:38

･･･ですからね。上の方で配列が映ってる所があるので大丈夫だと思ってましたね。

juner

2024/11/12 12:51

最初の let words で定義しているものですね。一応F12 で止めているときは右の方にあるように変数の中身見れますし、コンソールで変数操作したり中身見たりできますよ………？