配列のデータからHTMLを表示しよう

配列とDOM生成を組み合わせると、データ件数に応じて記事や商品の一覧を表示できます。

前回は入力のたびに一つの要素を作りました。今回は、表示内容を配列で管理し、配列の現在状態から一覧全体を作り直します。この「データを変更してから表示を更新する」考え方は、今後学ぶUI制作の基礎です。

今回使用するファイル構成

javascript-practice/
├── index.html
└── js/
    └── script.js

データから一覧を描画する流れ

表示するデータを用意する

const articles = [
  { title: 'JavaScriptの歴史', category: '入門' },
  { title: 'DOM操作', category: '基礎' },
  { title: 'イベント', category: '基礎' },
];

一覧全体を配列、一件分をオブジェクトで表します。

一件分の要素を作る

function createArticleElement(article) {
  const item = document.createElement('article');
  const title = document.createElement('h2');
  const category = document.createElement('p');

  title.textContent = article.title;
  category.textContent = article.category;
  item.append(title, category);

  return item;
}

一件分のDOM生成を関数へ分けると、一覧処理が読みやすくなります。

配列を一覧へ描画する

<div id="article-list"></div>

const articleList = document.querySelector('#article-list');

articles.forEach((article) => {
  articleList.append(createArticleElement(article));
});

再描画するときは既存要素を消す

function renderArticles(items) {
  articleList.replaceChildren();

  items.forEach((article) => {
    articleList.append(createArticleElement(article));
  });
}

replaceChildren()で古い一覧を削除してから描画すると、重複を防げます。

カテゴリで記事を絞り込む

操作用のHTMLを用意する

<h1>記事一覧</h1>

<label for="category-filter">カテゴリ</label>
<select id="category-filter">
  <option value="all">すべて</option>
  <option value="入門">入門</option>
  <option value="基礎">基礎</option>
</select>

<p id="article-count" aria-live="polite"></p>
<div id="article-list"></div>

記事データに必要な項目を持たせる

const articles = [
  { id: 1, title: 'JavaScriptの歴史', category: '入門', url: '/articles/history' },
  { id: 2, title: 'DOM操作', category: '基礎', url: '/articles/dom' },
  { id: 3, title: 'イベント', category: '基礎', url: '/articles/events' },
];

画面に必要なタイトルとカテゴリだけでなく、リンク先と一意なIDもデータとして持たせます。DOMの見た目と元データを分離すると、並べ替えや絞り込みを追加しやすくなります。

リンクを含む一件分を作る

function createArticleElement(article) {
  const item = document.createElement('article');
  const heading = document.createElement('h2');
  const link = document.createElement('a');
  const category = document.createElement('p');

  item.dataset.id = article.id;
  link.href = article.url;
  link.textContent = article.title;
  category.textContent = `カテゴリ：${article.category}`;

  heading.append(link);
  item.append(heading, category);

  return item;
}

hrefはsetAttribute()でも設定できますが、既知の属性はlink.hrefのようにプロパティで設定できます。タイトルは外部から来たデータを想定し、textContentで安全に表示します。

選択値に応じて再描画する

const categoryFilter = document.querySelector('#category-filter');
const articleCount = document.querySelector('#article-count');
const articleList = document.querySelector('#article-list');

function renderArticles(items) {
  articleList.replaceChildren();

  items.forEach((article) => {
    articleList.append(createArticleElement(article));
  });

  articleCount.textContent = `${items.length}件の記事があります。`;
}

categoryFilter.addEventListener('change', () => {
  const selectedCategory = categoryFilter.value;
  const filteredArticles = articles.filter((article) => {
    return selectedCategory === 'all' || article.category === selectedCategory;
  });

  renderArticles(filteredArticles);
});

renderArticles(articles);

filter()は条件に合う要素だけを含む新しい配列を返します。元のarticlesは変更しないため、「すべて」に戻したときも全件を表示できます。

最下部のrenderArticles(articles)は初期表示です。イベントが起きる前にも一覧を表示する必要があるため、忘れずに呼び出します。

空の一覧を扱う

検索結果が0件の場合は、何も表示されない状態ではなく理由を伝えます。

if (items.length === 0) {
  const emptyMessage = document.createElement('p');
  emptyMessage.textContent = '条件に合う記事はありません。';
  articleList.append(emptyMessage);
  return;
}

この処理はreplaceChildren()の後、forEach()の前へ追加します。

動作を確認する

カテゴリを切り替え、件数、一覧内容、リンク先が連動することを確認します。表示が重複する場合はreplaceChildren()の位置、初期表示がない場合は最後の関数呼び出しを確認してください。

まとめ

データ、要素生成、一覧描画を分けると、表示条件が増えても整理しやすくなります。次の記事では、HTMLのdata-*属性から要素固有の値を取得します。