React でのカンマ区切りのリンクリストレンダリング：パフォーマンスとアクセシビリティを両立させる

2024-06-27

ReactJS でカンマ区切りのリンクリストをレンダリングする

方法 1: map 関数を使用する

map 関数は、配列の各要素に対して関数を適用し、新しい配列を生成します。この方法は、カンマ区切りのリンクリストをレンダリングするのに最適です。

const links = ["https://www.example.com", "https://www.google.com", "https://www.youtube.com"];

const LinkList = () => {
  return (
    <ul>
      {links.map((link) => (
        <li key={link}>
          <a href={link}>{link}</a>
        </li>
      ))}
    </ul>
  );
};

上記のコードは、以下の HTML を生成します。

<ul>
  <li><a href="https://www.example.com">https://www.example.com</a></li>
  <li><a href="https://www.google.com">https://www.google.com</a></li>
  <li><a href="https://www.youtube.com">https://www.youtube.com</a></li>
</ul>

reduce 関数は、配列の要素を 1 つの値にまとめます。この方法は、カンマ区切りのリンクリストをレンダリングするのに少し複雑ですが、より柔軟な方法です。

const links = ["https://www.example.com", "https://www.google.com", "https://www.youtube.com"];

const LinkList = () => {
  const linkList = links.reduce((list, link) => {
    return `${list}, <a href="${link}">${link}</a>`;
  }, "");

  return (
    <div dangerouslySetInnerHTML={{ __html: linkList }} />
  );
};

<div>
  , <a href="https://www.example.com">https://www.example.com</a>
  , <a href="https://www.google.com">https://www.google.com</a>
  , <a href="https://www.youtube.com">https://www.youtube.com</a>
</div>

map 関数は、よりシンプルで分かりやすい方法です。
reduce 関数は、より柔軟な方法ですが、少し複雑です。

補足

key 属性は、リストアイテムを個別に識別するために使用されます。
dangerouslySetInnerHTML 属性は、HTML コードを直接レンダリングするために使用されます。

import React from 'react';

const links = ["https://www.example.com", "https://www.google.com", "https://www.youtube.com"];

const LinkList = () => {
  return (
    <ul>
      {links.map((link) => (
        <li key={link}>
          <a href={link}>{link}</a>
        </li>
      ))}
    </ul>
  );
};

export default LinkList;

import React from 'react';

const links = ["https://www.example.com", "https://www.google.com", "https://www.youtube.com"];

const LinkList = () => {
  const linkList = links.reduce((list, link) => {
    return `${list}, <a href="${link}">${link}</a>`;
  }, "");

  return (
    <div dangerouslySetInnerHTML={{ __html: linkList }} />
  );
};

export default LinkList;

説明

上記のコードは、React コンポーネントを定義しています。
コンポーネントは、カンマ区切りのリンクリストをレンダリングします。
map 関数は、配列の各要素に対して関数を適用します。この関数は、リンクを li 要素に変換します。

実行方法

上記コードを保存して、React アプリケーションで実行します。

上記のコードは、あくまでもサンプルです。必要に応じて、コードをカスタマイズすることができます。

ReactJS でカンマ区切りのリンクリストをレンダリングするその他の方法

Fragment コンポーネントは、複数の要素を単一の要素としてグループ化するために使用できます。この方法は、カンマ区切りのリンクリストをレンダリングするのにシンプルで分かりやすい方法です。

import React from 'react';

const links = ["https://www.example.com", "https://www.google.com", "https://www.youtube.com"];

const LinkList = () => {
  return (
    <ul>
      {links.map((link) => (
        <React.Fragment key={link}>
          <li>
            <a href={link}>{link}</a>
          </li>
        </React.Fragment>
      ))}
    </ul>
  );
};

export default LinkList;

import React from 'react';

const links = ["https://www.example.com", "https://www.google.com", "https://www.youtube.com"];

const LinkList = () => {
  return (
    <ul>
      {links.forEach((link) => (
        <li key={link}>
          <a href={link}>{link}</a>
        </li>
      ))}
    </ul>
  );
};

export default LinkList;

方法 5: useEffect フックを使用する

useEffect フックは、コンポーネントのマウント、アンマウント、更新時にコードを実行するために使用できます。この方法は、カンマ区切りのリンクリストをレンダリングするのに少し複雑な方法ですが、柔軟な方法です。

import React, { useState, useEffect } from 'react';

const links = ["https://www.example.com", "https://www.google.com", "https://www.youtube.com"];

const LinkList = () => {
  const [linkList, setLinkList] = useState("");

  useEffect(() => {
    const list = links.reduce((list, link) => {
      return `${list}, <a href="${link}">${link}</a>`;
    }, "");

    setLinkList(list);
  }, [links]);

  return (
    <div dangerouslySetInnerHTML={{ __html: linkList }} />
  );
};

export default LinkList;