React で「データがあるときだけ一覧を出す」つもりで書いたのに、データが空のときに、一覧が出るはずの場所に「0」とだけ表示される。こんな現象に出会ったことはありませんか。

原因は、&& の書き方にあります。この記事では、なぜ 0 が出るのかと、出さないための書き方を整理します。

下のコードの結果は、React 19.3.0 で部品が作る HTML を書き出して確認しました（<div>0</div> はその出力です）。

0 が出るのは、この書き方

function TodoList({ items }) {
  return (
    <div>
      {items.length && <ul>...</ul>}
    </div>
  );
}

「items.length があれば一覧を出す」という意味のつもりですが、items が空の配列だと、画面には 0 が出ます。

実際に試すと、こうなりました。

  • items が空 → <div>0</div>（0 が表示される）
  • items が3件 → <div><ul>...</ul></div>（一覧が表示される）

なぜ 0 が出るのか

理由は2つの仕組みの組み合わせです。

1つ目は、&& の動きです。A && B は「A が false 扱いなら A を、そうでなければ B を返す」という式です。items.length が 0 のとき、0 は false 扱いなので、式全体の結果は false ではなく 0 そのものになります。

2つ目は、React の表示ルールです。React は、false・null・undefined・true は画面に何も出しませんが、数字はそのまま表示します。0 は数字なので、画面に「0」と出ます。

式は 0 を返しているのに、書いた側は「何も出ない」つもりでいる。このずれが原因です。

React に渡した値と、画面に出るものの関係を、実際に試した結果でまとめると次のとおりです。

  • 0 → 「0」と表示される
  • NaN → 「NaN」と表示される
  • 空の文字列 ""・false・null・undefined・true → 何も表示されない

0 を出さない書き方

左側が必ず true か false になるようにすれば解決します。いちばん読みやすいのは、比べる形にする書き方です。

{items.length > 0 && <ul>...</ul>}

ほかにも、次の書き方で 0 は出なくなります（どれも試して確認しました）。

{items.length ? <ul>...</ul> : null}
{Boolean(items.length) && <ul>...</ul>}
{!!items.length && <ul>...</ul>}

データが空のときに「まだ何もありません」と表示したい場合は、最初から三項演算子で両方を書いておくと、空のときの見た目も決められます。

{items.length > 0 ? <ul>...</ul> : <p>まだ何もありません</p>}

0 になりうるものを、&& の左に置かない

この現象は、items.length だけで起きるわけではありません。数字が入るものなら、その値が 0 になったときに同じことが起きます（NaN なら「NaN」が出ます）。

  • 件数（count、items.length など）
  • 未読数や金額などの数字

逆に、isLoggedIn のように最初から true か false しか入らない値なら、&& の左にそのまま置いて問題ありません。

AI が書いたコードにこの形があったら、データが入っている状態で確認すると正しく見えるので、データを空にした状態でも一度表示を確かめておくと安心です。どんなときに画面がどうなるかを自分で確かめる習慣は、AI が書いたコードを受け取るときの大きな助けになります。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを公開するまで を全24セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください