エレメントの配列を作ってみたい

こう言う風に言うのが正しいのかわからないけれど、エレメントの配列を作ってみたかった。実際に使用している例はたくさんあるけれど、contactページのskillが一番わかりやすいかな？

そもそも何で必要？

エレメントを一つ一つ作ってそれをまた一つずつ表示するのは保守の観点からあまり良くない気がする。データ指向で考えるのが好きなだけかもしれないけれど、単純に見づらい+間違ったところを見つけるのが面倒なので、流石に実装しようと思った。一番はデータを入力したらオートマトン的に処理されるって言うのが楽なところかも。

実際に作ってみる(+コード)

まずは表示したいデータについて、配列を作ってみる。

const data_array: string[] = ["hoge","fuga","piyo"]; 

「それぞれの要素に対して、一つずつ取り出して、classNameで修飾する」と言うことを考えると、map()がちょうどいいだろう。 map()はC++でいう、「for(auto &x : array)」が感覚としては似ていて、TSならmap()の2番目の引数にインデックスが取れるので、ついでにうまく利用する。表示するページの関数名をNyaanとすると、

export default function Nyaan() {
  const data_array: string[] = ["hoge","fuga","piyo"];
  return (
    {data_array.map((factor, index) => (
      <span 
        key={index} 
        className="いい感じの修飾"
      >
        {factor}
      </span>
    ))}
  );
}

と言う感じで、keyにインデックスを取りながら、要素を修飾したものを返す(ここで使ったのはspan)ものが作れる。このコードは実装部しか書いていないのでそれ以外の部分はご愛嬌。 もちろんデータの型を変えればもっと複雑なものを実装することもできて、実際ブログ一覧ページにはもう少し複雑な構造体を使って、いい感じに表示をしている。

いかがでしたか！？

備忘録兼誰かの役に立てればと言う感じの記事なのでλ式に慣れてない人が見ると何のことか分かりにくいかもしれない。そもそもコードブロックがうまく機能するかのテストも兼ねた記事なので。多分zennとかqiitaにいい記事はたくさんあると思う。ゴメンナサイ。