ローディング表示——待っている顔を作る

前の章の「時間の流れ」のステップ3、覚えていますか——データが届くまで、画面は空のまま。ローカルの練習では一瞬ですが、現実の通信は0.5秒、遅い回線なら数秒かかります。その間、ユーザーが見ているのは真っ白な画面です。

真っ白な画面をユーザーがどう解釈するか。「壊れてる?」「押し間違えた?」——待たされること自体より、「何が起きているか分からないこと」がユーザーを不安にさせます。だからプロのアプリは必ず「読み込み中です」という顔を持っています。今日はそれを作ります。stateがひとつ増えるだけです。

「待っているかどうか」もstateである

画面の状態を言葉にすると、こうです——「読み込み中か、読み込み終わったか」。時間とともに変わり、画面の見た目を左右する情報。つまり、stateの出番です(React教材チャプター14の定義そのままです)。