背景と実施したこと

map関数を使った実装中に「最後の要素だけはこのスタイルを適用したい！」と思ったことはないでしょうか。
この実装に少し苦戦したので、備忘録を残します。

今回やりたかったのは、以下のような実装でmapで各コンテンツを繰り返し表示させるわけですが
区切りのborderは真ん中の2本だけで、右端には表示させたくないのです。
こうなると単純な繰り返し（mapd関数）だけでは実現できないので少し工夫が必要でした。

今回使用している技術の情報は以下の通りです。

next: 12.0.7
react: 17.0.2
TailwindCSS: 3.01
typescript: 4.5.4

【追記】
今回のケースでは「divide」を使うのが一番早いということをご指摘いただきました。
遠回りしたけど、結果としてmapと三項演算子の組み合わせという武器が増えたのでヨシッ！
（まだまだCSS勉強しないとだめですね。。。）

テンプレートリテラル（バッククォート）を活用することで、三項演算子とmapを組み合わせることができるよ
単純に子要素だけ、ということであれば「last」というCSSがあるのでそれでもいいよ
lastだけでは解決できない場合があるからやっぱり、mapと三項演算子の組み合わせは知っておいたほうがいいよ

mapと三項演算子を組み合わせる

結論からいうと以下のような記載で実現できました

        <div className='flex-row justify-between md:flex'>
          {items.map((item: valueItems, index: number) => (
            <div key={index} className='basis-1/3 '>
              <div
                className={`pt-2 mx-8 text-center md:border-r-4 md:border-[#c5eaea] ${
                  items.length - 1 === index ? 'border-none' : ''
                }`}
              >
                <Image src={item.src} alt={item.alt} width={184} height={157}></Image>
              </div>
              <h3
                id='values'
                className={`pt-2 mx-8 text-lg font-bold text-center text-secondary-black md:border-r-4 md:border-[#c5eaea] ${
                  items.length - 1 === index ? 'border-none' : ''
                }`}
              >
                {item.name}
              </h3>
              <p
                className={`px-4 pt-2 mx-8 text-left md:border-r-4 md:border-[#c5eaea] ${
                  items.length - 1 === index ? 'border-none' : ''
                }`}
              >
                {item.text}
              </p>
            </div>
          ))}
        </div>

classNameを

{`px-4 pt-2 mx-8 text-left md:border-r-4 md:border-[#c5eaea] 
${items.length - 1 === index ? 'border-none' : ''}`}

こんな感じでバッククォーテーションでくくっているのがポイントです。
これはES6から出た「テンプレートリテラル」と呼ばれるもので、${hoge} という記述をするだけで
変数を展開してくれます。
このテンプレートリテラルの中で三項演算子を記述することで、最後の要素の時のCSSを記述できます。

lastを使うという選択肢もある

CSSではlast-childやfirst-childという指定の仕方もあり、これを使って最初の要素または最後の要素のCSSを変更することもできます。
ただ、私が少し動かしてみたところ

<div className='flex-row justify-between md:flex'>
          {items.map((item: valueItems, index: number) => (
            <div key={index} className='basis-1/3 last:hogehoge'>
              <div
                className='pt-2 mx-8 text-center md:border-r-4 md:border-[#c5eaea]'>

この指定ちゃんと適用されるのですが

<div className='flex-row justify-between md:flex'>
          {items.map((item: valueItems, index: number) => (
            <div key={index} className='basis-1/3'>
              <div
                className='pt-2 mx-8 text-center md:border-r-4 md:border-[#c5eaea] last:hogehoge'>

この指定では適用されませんでした。（繰り返しの中の最初の要素にしか適用されない？？）
ここはもし良いやり方をご存じの方がいればコメントをいただきたいです。

ということで、今回の実装ではlastは使わず（使えず）、三項演算子を組み合わせたのでした。
つぶしがきくので、このやり方を知っておいても損はないでしょう。

まとめ

今回は、三項演算子とmapの組み合わせ方をご紹介しました。
以下が本記事のまとめです。
テンプレートリテラルは便利そうですし、もっと活用していきたいですね。

テンプレートリテラル（バッククォート）を活用することで、三項演算子とmapを組み合わせることができるよ
単純に子要素だけ、ということであれば「last」というCSSがあるのでそれでもいいよ
lastだけでは解決できない場合があるからやっぱり、mapと三項演算子の組み合わせは知っておいたほうがいいよ

map関数と三項演算子を組み合わせる方法 with TailwindCSS

背景と実施したこと

目次

概要

mapと三項演算子を組み合わせる

lastを使うという選択肢もある

まとめ