ゆめさくエンジニア研究所女性向けエンジニアスクール女性向けエンジニアスクール
ログイン
JavaScript

フロントエンドの状態は、どう分けて持ちますか

状態を、サーバーから来たデータ、画面の一時的な状態、アプリ全体で共有する状態、URL に持たせる状態の 4 つに分け、それぞれ合う置き場に置く、と答える問い。何でも 1 か所に集めない理由まで話します。

答えてみる

面接官に「フロントエンドの状態は、どう分けて持ちますか」と聞かれたつもりで、答えを見る前に自分の言葉で答えます。

声に出して答えた人は「書かずに答えを見る」で開けます。

解説を読む

聞かれ方から関連するコースまで、この問いの解説を全部ここに置いています。

こう聞かれます

  • 「フロントエンドの状態は、どう分けて持ちますか」
  • 「サーバーから取ったデータも、全部グローバルな置き場に入れますか」
  • 「検索の条件やページの番号は、どこに持たせますか」

面接官が見ている点

  • 状態を種類で分けて考えられるか (全部を 1 つの置き場に集めない)
  • サーバーのデータは「借りている写し」で、キャッシュと取り直しの問題だ、と分かっているか
  • URL に持たせると、共有や再読み込みでも同じ画面に戻れる、と言えるか
  • 道具の名前より、選ぶ理由を話せるか

短い答え

  • 状態を、サーバーから来たデータ、画面の一時的な状態、アプリ全体で共有する状態、URL に持たせられる状態、の 4 つに分けます。
  • サーバーのデータは TanStack Query や SWR のようなキャッシュと取り直しの道具に任せ、開閉や入力中の値は useState、ログイン中の利用者や表示のテーマは Context や Zustand に置きます。
  • 検索の条件やページの番号は URL に持たせ、共有や再読み込みでも同じ画面に戻れるようにします。1 か所に全部集めると、要らない描き直しと古いデータの問題が増えます。

少し詳しい答え

4 つの種類と置き場

種類例置き場
サーバーのデータ商品の一覧、利用者のプロフィールTanStack Query、SWR
画面の一時的な状態モーダルの開閉、入力中の文字useState
アプリ全体の状態ログイン中の利用者、テーマ、カートContext、Zustand
URL に持たせる状態検索の言葉、並べ方、ページの番号URL (?q= の部分)

サーバーのデータは「写し」

サーバーから取ったデータの本物はサーバーにあり、画面が持っているのは、ある時点の写しです。だから、「いつ取り直すか」「同じデータを 2 か所で取っていないか」「保存したあと写しをどう新しくするか」が問題になります。

TanStack Query や SWR は、この問題のための道具です。同じ鍵のデータを 1 回の取り出しで共有し、画面に戻ったときなどに取り直し、保存のあとに写しを古い印にして取り直します。

TypeScript (JSX)

const { data, isLoading, error } = useQuery({
  queryKey: ["items", page],
  queryFn: () => fetchItems(page),
});

自分で useEffect と useState で書くと、読み込み中、失敗、取り直し、同時に 2 回呼ばれたときの順番の入れ違い、を全部自分で扱うことになります。

URL に持たせる

検索の言葉やページの番号を URL のクエリパラメータ (?q=靴&page=2 のような部分) に入れると、そのまま友だちに送れて、再読み込みしても、戻るボタンを押しても同じ画面に戻れます。state だけに持たせると、これが全部消えます。

トレードオフ

何でもアプリ全体の置き場に入れると、どこからでも書き換えられて流れを追いにくくなり、関係ない部品まで描き直されます。一方で、細かく分けすぎると、どこに何があるかを覚える手間が増えます。

小さなアプリなら、useState と props だけで足ります。props のバケツリレー (何段も下の部品に props を渡し続けること) がつらくなったら Context、Context の値が頻繁に変わって描き直しが重くなったら Zustand のような道具、と困りごとが出てから足します。サーバーのデータを扱う道具も、取り出しが数か所しかないなら、まずは手書きで足りることもあります。

話すときは、自分が作った画面の状態を 1 つ挙げ、「最初は全部親の state にしていたが、検索の条件は URL へ、一覧のデータは取り出しの道具へ移した」のように、移した理由と一緒に話します。

よくある間違い

  • サーバーのデータを全部グローバルな置き場に写す 取り直しや古さの管理を全部自分で抱えます。キャッシュの道具に任せます
  • 検索の条件を state だけに持つ共有も再読み込みもできず、戻るボタンで条件が消えます
  • 最初から大きな状態管理の道具を入れる小さいうちは useState と props で足ります。困りごとが出てから足します

深掘りの問い

  • 「フォームの入力中の値は、どこに持ちますか」送るまではその画面だけの一時的な状態なので、フォームの部品の中に持つ、と答えます
  • 「保存したあと、一覧を新しくするには」保存が成功したら、その一覧のキャッシュを古い印にして取り直す、と答えます
  • 「Context と Zustand は、どう使い分けますか」あまり変わらない値は Context、頻繁に変わり、使う部品ごとに一部だけ読みたい値は Zustand のような道具、と答えます

確認日 2026年10月24日

技術面接問題の一覧へ戻る