閉じた入力欄の文字は、どこへ行く？非表示と取り外しを比べる

StoryDiaryの折りたたみ部分を読むと、閉じても中身を取り外さない作りになっていました。見た目は消えるのに、入力途中の文字は残るのでしょうか。実コンポーネントを小さな検証ページで動かすと、閉じて開いた入力欄は文字を保ち、取り外して作り直した比較用の入力欄は空に戻りました。

閉じても、中身を画面の構造に残す

StoryDisclosureは、開いているかを状態として持ちます。その値で折りたたみ表示を切り替えますが、子要素そのものは描画し続けます。DOMという画面の構造に、入力欄を残す方法です。 同じ入力要素が残れば、ブラウザーがその要素に持っている入力値も残せます。実装のコメントも、閉じるアニメーションとフォーム値の維持を理由にしています。

二つの入力欄を閉じて、再び開いてみる

比較用には、表示の条件が偽なら要素を取り外す入力欄を用意しました。どちらも値を親のReact状態へ保存していない、いわゆる非制御の入力欄です。最初は空で、ブラウザー上で別々の文字を入力します。 実コンポーネント側を閉じ、比較側を取り外してから、両方を再表示しました。閉じた段階のDOMと再表示後の値を読むと、次の違いがありました。

見えなくするだけでは、操作や読み上げは別問題

閉じたパネルにはaria-hiddenとinertも指定されています。今回DOMで確かめた値は、閉じたときにaria-hiddenがtrue、inertもtrueでした。ボタン側のaria-expandedもfalseへ変わります。 視覚上の折りたたみ、支援技術へ示す状態、閉じた内部を操作対象から外すことを合わせて扱う設計です。ただし、今回の確認は属性と画面・入力値の変化までです。すべての読み上げソフトやキーボード操作を網羅した試験ではありません。

取り外せば、あらゆるデータが消えるわけではない

今回空になったのは、入力値をその要素だけに持たせた比較例です。親の状態や別の保存先へ値を持たせ、再表示時に渡せば、要素を取り外しても内容を復元できます。Reactの状態も、どのコンポーネントを同じ位置に残すかで保持のされ方が変わります。 そのため「非表示なら必ず残る」「条件付き描画なら必ず全部消える」という覚え方は避けます。入力値を誰が持ち、その持ち主が操作後にも残るかを追う方が、目の前の挙動を説明できます。

折りたたみで残った文字は、まだ保存とは限らない

この検証ページにはDB保存がありません。文字が残ったのは、そのページ内で同じ入力欄を保っていたからです。再読み込みや画面移動の後まで残ることを保証しません。 使う人にとっては、閉じても書きかけが失われないのは助かります。それでも保存済みかどうかは別です。画面の開閉とデータ保存を分けて見ると、便利な見た目の裏で何を維持しているのかが分かります。

参照：React公式「Preserving and Resetting State」。実StoryDisclosureと、その専用検証ページで確認しました。

確認日：2026年9月22日。画面・実装・検証結果は確認時点のものです。