「中身のないリスト」ってどうすればいいの？HTMLの落とし穴と解決策
Webサイトを作っていると、必ずと言っていいほどお世話になるのが `
- ` や `
- 現在、表示できる項目はありません。
- リストの中身が空なら、無理に表示しない。
- 表示するなら、「今は空ですよ」と教えてあげる。
- ` といった「リスト」タグです。メニューを作ったり、お知らせを並べたりと、まさに現場の「頼れる相棒」ですよね。
でも、ふとこんな疑問が浮かんだことはありませんか？
「もし、リストの中に表示する項目がひとつもなかったら、その空っぽのリストはどう書けばいいの？」
これ、実は駆け出しの頃に多くの人が一度は悩む、ちょっとした「沼」なんです。今日は、この空のリストをどう扱うのがベストなのか、現場の視点から優しくひも解いていきましょう。
—
1. そもそも「空のリスト」は置いちゃダメ？
結論から言うと、HTMLの仕様上、`
` とだけ書いて中身を空っぽにすることは可能です。でも、あまりおすすめはしません。
たとえるなら、これって「誰もいない空っぽの店舗に、看板だけ出している状態」なんです。通りがかったお客さん（ブラウザや検索エンジン）は、「お、ここには何かあるのか？」と期待して入るのに、中がガランとしていたら「あれ？ 何もないのか……」と少し残念な気持ちになりますよね。
なぜ良くないのか？
1. 意味がない： リストとは本来「項目を並べるもの」です。項目がないなら、そもそもリストという箱を出す必要はありません。
2. デザインの崩れ： CSSで「リストに余白（marginやpadding）」を指定している場合、中身がなくてもその余白だけが残り、レイアウトが不自然に凹んで見えることがあります。
—
2. 「動的に生成する」現場のリアル
今のWebサイトは、JavaScriptを使って「サーバーから取ってきたデータ」をリストとして表示することがほとんどです。
例えば、「お気に入りリスト」を表示する機能を作ったとします。ユーザーがお気に入りをまだ登録していないとき、JavaScriptは「表示するデータがない」という状態を受け取ります。
このとき、「とりあえずリストの枠（`
- `）だけ書いて、中身は空っぽにしておこう」とすると、先ほどお話しした「空の看板」問題が発生します。
ベストプラクティス：条件分岐で「そもそも出さない」か「メッセージを出す」
賢いやり方は、JavaScriptでデータを処理する際に「データがあるときだけリストを作る」というルールにすることです。
// JavaScriptでの賢い書き方例
const items = []; // サーバーから来たデータ（今は空っぽ）
if (items.length > 0) {
// データがあるならリストを生成する
console.log(“リストを表示します！”);
} else {
// データがないなら、リストそのものを出さずに「メッセージ」を出す
const message = document.createElement(‘p’);
message.textContent = “まだ項目はありません。”;
document.body.appendChild(message);
}
「リストという箱を作る」前に、「中身があるかどうかチェックする」。これがバグを防ぎ、きれいなHTMLを保つための第一歩です。
—
3. どうしてもリストの枠を残したい場合
「いや、デザインの都合上、どうしても枠（`
- `）は固定しておきたいんだ！」という場面もあるかもしれません。そんなときは、「空っぽのままにしない」のが鉄則です。
以下のように、中身が空であることを示す要素を一つ入れておくと、ブラウザにもユーザーにも親切ですよ。
こうしておけば、CSSで「項目が1つしかないときは、このメッセージを消す」といった制御もしやすくなりますし、何よりレイアウトが崩れにくくなります。
—
まとめ：HTMLは「おもてなし」の心で
HTMLを書くとき、つい「コードの正しさ」ばかりを気にしてしまいがちですが、実は「その先に見る人がどう感じるか」を想像することが一番の近道です。
このたった2つのポイントを守るだけで、あなたの書くコードはグッとプロっぽく、そして誰にとっても優しいものに変わります。
もし、「空のリストを作っちゃった！」と気づいても大丈夫。それは成長の証です。一つひとつ、丁寧にお掃除してあげればいいだけですから。ぜひ、次の実装から意識してみてくださいね。応援しています！
コメント