【第7回】ReactのuseStateで画面の表示・非表示を切り替える

今回は、株アプリの「銘柄詳細画面を閉じる機能」に挑戦しました。

動画はこちらです。

今回やりたかったこと

現在作成している株アプリは、次の3つのエリアに分かれています。

・左側：検索条件
・中央：銘柄一覧
・右側：選択した銘柄の詳細情報

右側の銘柄詳細には、割安性・財務安定性・成長性・株主還元性・ストーリーなどの情報を表示する予定です。

今回は、銘柄詳細にある×ボタンを押すと右側の画面が閉じ、その分だけ中央の銘柄一覧が広がる機能を作ろうとしました。

しかし、コードを書いてみたものの、仕組みを十分に理解できませんでした。

そこで、いきなり株アプリに実装するのではなく、まずは表示と非表示だけを試せる簡単な練習ページを作ることにしました。

Reactでは、画面に表示する内容を状態に応じて変えることができます。

今回の練習ページでは、useStateを使って表示状態を管理しました。

const [isOpen, setIsOpen] = useState(true);

それぞれの役割は次のとおりです。

・isOpen：現在の表示状態
・setIsOpen：isOpenの値を変更する関数
・true：表示する
・false：表示しない

初期値をtrueにすると、最初から対象の内容が表示されます。

反対に、初期値をfalseにすると、最初は表示されません。

表示されている内容を閉じるときは、ボタンがクリックされたタイミングでisOpenをfalseにします。

<button onClick={() => setIsOpen(false)}>
  閉じる
</button>

ボタンを押すと、setIsOpenによってisOpenの値がtrueからfalseに変わります。

そして、isOpenがtrueのときだけ対象を表示するように条件を指定します。

{isOpen && (
  <div>
    <p>この文章を閉じる</p>
    <button onClick={() => setIsOpen(false)}>
      閉じる
    </button>
  </div>
)}

isOpenがfalseになると条件に当てはまらなくなるため、画面から内容が消えます。

非表示になった内容をもう一度表示するには、isOpenがfalseのときに「再表示する」ボタンを表示します。

{!isOpen && (
  <button onClick={() => setIsOpen(true)}>
    再表示する
  </button>
)}

先頭の「!」は、値を否定する意味です。

そのため、!isOpenは「isOpenがfalseの場合」という条件になります。

再表示するボタンを押すとisOpenがtrueになり、先ほど非表示になった内容が再び表示されます。

今回の練習で、次の流れまでは理解できました。

useStateの値が変わると、それに合わせて画面の表示も変わります。

これがReactで画面を切り替える基本的な仕組みのようです。

練習ページでは、表示する文章とボタンを同じ場所に書いています。

しかし、実際の株アプリで閉じたい銘柄詳細は、ある程度大きな画面です。

そのため、銘柄詳細を子コンポーネントとして分けて管理し、ページ全体を管理する親コンポーネントから表示状態を操作する必要があります。

ここで必要になるのが、親コンポーネントと子コンポーネントの間でデータや関数を受け渡す仕組みです。

表示状態をどちらで管理するのか、閉じる処理をどのように子コンポーネントへ渡すのかという部分が、今回はまだ十分に理解できませんでした。

今回は、銘柄詳細画面を閉じる機能を作るため、useStateを使った表示・非表示の切り替えを練習しました。

簡単な内容であれば、trueとfalseを切り替えることで、画面に表示する内容を変更できることが分かりました。

一方で、実際のアプリに組み込むには、親コンポーネントと子コンポーネントの関係も理解する必要があります。

次回は、今回理解できなかった親子コンポーネント間のデータや関数の受け渡しについて整理し、実際の株アプリへの実装を進めたいと思います。

▶ 動画
https://youtu.be/BMPfgYokjSI