Next.js で map 関数を使用したコードの効率化

毎週金曜日に書かれたコードを再評価し、改善の余地があるかどうかを確認しています。繰り返しパターンを発見し、コードの効率性を向上させ、メンテナンスを容易にするために変更してコードを効率化できます。Next.js で map 関数を使用して、重複するコードを効率的に処理する方法について説明します。


既存のコード

複数のソーシャルボタンをレンダリングするコンポーネントがあり、各ボタンは類似した構造を持っています。リンクURLと画像ソースのみが異なります。

components/Home/Button/SocialButton

<button className={group flex h-12 w-12 items-center justify-center rounded-full transition-colors duration-200 ease-in-out}>
    <div className="fill-black transition-colors duration-200 ease-in-out hover:scale-105">
        <Link href="https://kakao.gg">
            <Image alt="home" width={32} height={32} src="img" />
        </Link>
    </div>
</button>
<button className={group flex h-12 w-12 items-center justify-center rounded-full transition-colors duration-200 ease-in-out}>
    <div className="fill-black transition-colors duration-200 ease-in-out hover:scale-105">
        <Link href="https://lol.kakao.gg">
            <Image alt="리그오브레전드_메인" width={32} height={32} src="img"/>
        </Link>
    </div>
</button>
<button className={group flex h-12 w-12 items-center justify-center rounded-full transition-colors duration-200 ease-in-out}>
    <div className="fill-black transition-colors duration-200 ease-in-out hover:scale-105">
        <Link href="https://lostark.kakao.gg">
            <Image alt="lostark_kakao_gg" width={32} height={32} src="img"/>
        </Link>
    </div>
</button>
<button className={group flex h-12 w-12 items-center justify-center rounded-full transition-colors duration-200 ease-in-out}>
    <div className="fill-black transition-colors duration-200 ease-in-out hover:scale-105">
        <Link href="https://maple.kakao.gg">
            <Image alt="maple_kakao_gg" width={32} height={32} src="img"/>
        </Link>
    </div>
</button>
<button className={group flex h-12 w-12 items-center justify-center rounded-full transition-colors duration-200 ease-in-out}>
    <div className="fill-black transition-colors duration-200 ease-in-out hover:scale-105">
        <Link href="https://blog.kakao.gg">
            <Image alt="카카오_블로그" width={32} height={32} src="img"/>
        </Link>
    </div>
</button>

改善されたコード

JavaScriptのmap関数と配列を活用して、コードを効率的に作成できました。まず、各ボタンに必要な情報(リンクURL、画像ソースなど)を配列にまとめます。そして、この配列をmap関数で反復処理して、各アイテムに対するボタンを生成しました。

components/Home/Button/SocialButton

const buttons = [
    { href: 'https://kakao.gg', alt: 'home', src: 'img' },
    {
        href: 'https://lol.kakao.gg',
        alt: '리그오브레전드_메인',
        src: 'img',
    },
    {
        href: 'https://lostark.kakao.gg',
        alt: 'lostark_kakao_gg',
        src: 'img',
    },
    {
        href: 'https://maple.kakao.gg',
        alt: 'maple_kakao_gg',
        src: 'img',
    },
    {
        href: 'https://blog.kakao.gg',
        alt: '카카오_블로그',
        src: 'img',
    },
]

 {buttons.map((button) => (
    <button key={button.href} className={`group flex h-12 w-12 items-center justify-center rounded-full transition-colors duration-200 ease-in-out`}>
      <div className="fill-black transition-colors duration-200 ease-in-out hover:scale-105">
        <Link href={button.href}>
          <Image alt={button.alt} width={32} height={32} src={button.src} />
        </Link>
      </div>
    </button>
  ))}

まとめ

重複するコードが大幅に削減され、新しいボタンを追加したり、既存のボタンを変更したりする際にもはるかに簡単になりました。また、コードが簡潔になり、可読性も向上しました。

JavaScript の map 関数を活用すると、繰り返しパターンを効率的に処理できます。React や Next.js だけでなく、JavaScript を使用するすべてのフロントエンドフレームワークで役立つことでしょう。