Snackgirls コーディングノート · 04
確かに書いたのに……再読み込みしたら消えちゃった!
ゲームのメモを入力することと保存することを分け、保存した内容を読み込むところまで見てみます。
さっき書いたメモはどこへ?
こんにちは、レッドです。「プレイノート」の練習用メモ欄に「ボス撃破!」と書いてみました。でも、再読み込みすると入力欄が空になってしまいました。
画面に文字があったよね。それなら覚えているんじゃなかったの?
この例では、入力した文章をブラウザーのメモリだけに置いていました。保存先に書き込む機能は、まだつないでいなかったんです。アイコが「今使っている値」と「次にも読めるよう保存した値」を分けて説明してくれました。
入力したあとと、開き直したあとを比べよう

最後のコマは、これからつなぐ機能を示しています。まず保存先に記録し、次に開いたときに読み込む必要があります。すでに消えたメモが、自動で戻るという意味ではありません。
今使う記憶と、あとで読む記録
メモリと状態:実行中に持っている値
選択したゲームや入力途中の文章のように、プログラムが現在持っている値を状態(ステート)と呼びます。実行中のプログラムは、こうした値をメモリに置いて使えます。
ブラウザーのメモリだけに置き、保存していない値は、ページを読み直すと初期値に戻ることがあります。実際に何が残るかは、そのアプリが値をどこに保存し、どう読み込むかによって変わります。
保存:あとで読める場所に記録すること
値を残すには、DBなどの保存先に書き込む処理が必要です。「ボス撃破!」という文章をそこに残します。DBを接続しただけで、画面のすべての値が自動保存されるわけではありません。
復元:保存した値を読み直して画面に反映すること
保存先に文章があっても、読み込まなければ画面には出ません。アプリも、次に開いたときに保存した値を読み込む処理があって初めて表示できます。
次にも同じ内容を見るには、記録することと読み込むことの両方が必要なんですね。
フィルターで選んだ期間も保存するの?
初期値が7日の期間フィルターを30日に変えたとしましょう。別途、保存と復元を行わない例なら、再読み込みで7日に戻ることがあります。画面の選択が変わっても、保存まで済んだとは限りません。
useStateやZustandを使えば保存もできる?
useStateはReactのコンポーネントに状態を持たせる機能です。Zustandは複数の部品で共有する状態の管理にも使えるライブラリです。どちらも、使うだけで再読み込み後の保存まで保証されるわけではありません。
Zustandには保存・復元の機能を組み合わせられます。ブラウザーのlocalStorageなどに保管する方法もありますが、同じブラウザーに残すことと、同じアカウントで別の端末から読むことは別の要件です。何をどこまで残したいか、先に決める必要があります。
再読み込みすると、なぜ消える?
下の動画ではゲームの記録と期間フィルターを見ていきます。画面で変えた値が再読み込み後にも残るか、考えながら見てみましょう。
元の動画 · 音声は韓国語です。
保存したら、もう一度開いてみよう
メモを入力すること、保存先に書くこと、次に読み込むことは、それぞれ必要でした。保存機能を作ったら、再読み込みしても同じメモが出るか確認します。
保存したあと、再読み込みもしてみよう。メモがまた出てくるか見たいな。
今日のノートには「保存したら開き直す」と書きました。残したゲームの記録を、次にも読みたいからです。
小さな練習 · 3問
メモを残す二つの処理を分けてみよう
保存と復元が何をするか思い出して解いてみてください。最後は、確認する順番も書いてみましょう。解答例は考えてから開いてください。
1. 消えた理由を考えよう
最初のコマの状態表示を読んでください。この例で、再読み込み後にメモが消えたのはなぜでしょう?
解答例を開く
まだ保存していないメモだったからです。ブラウザーのメモリにしかなく、保存・復元の処理がつながっていませんでした。
2. 二つの機能を結ぼう
「保存先に記録する」と「保存先から読み込んで画面に出す」を、保存・復元と結んでください。
解答例を開く
記録することが保存、読み込んで画面に反映することが復元です。次に開いたときにも見えるようにするには、両方必要です。
3. 再読み込みで確認する順番を書こう
練習用メモアプリで「ボス撃破!」を保存したあと、何を確認するか順番を書いてください。アプリがあれば、消えても困らないメモで試してもかまいません。
解答例を開く
入力 → 保存 → 再読み込み → 同じメモがあるか確認。残っていても、DBに保存したのかブラウザーに保存したのかは、別に確認する必要があります。

コメント
0ログイン不要。投稿したブラウザから編集・削除できます。
すべてのコメント 0
한국어 · English · 日本語まだコメントはありません。最初のひとことをどうぞ。