JavaScriptとCSSでのレスポンシブ対応の差異

目的

下記について、どのような差異があるのかをまとめておく。
・JavaScriptでクライアントサイドでデバイスタイプを取得し、表示非表示を切り替える
・CSSのメディアクエリを使って表示非表示を切り替える

まとめ

JavaScript

{isPc ? (
　// PCでのみ表示
  <Image src="/computer01_smile.png" width={619} height={578} />
) : (
　// スマートフォンでのみ表示
  <Image src="/smartphone01_smile.png" width={593} height={712} />
)}

・計算完了までに一瞬初期値の状態が表示される。
→ 初期値がPCで計算後スマートフォンと判断される場合、一瞬PC版が表示されてしまう
→ これにより、レイアウトシフトが起こる可能性もある

・DOMは生成されない
→ 不要なDOMの生成を抑えることが出来る

CSS

※例はTailwindCSSでの記述
https://tailwindcss.com/docs/screens

// PCでのみ表示
<Image src="/computer01_smile.png" width={619} height={578} className="hidden lg:block" />
// スマートフォンでのみ表示
<Image src="/smartphone01_smile.png" width={593} height={712} className="block lg:hidden"/>

・メディアクエリを利用する場合、メディアクエリに当てはまる状態のみ表示される
→ 初期表示に影響がない

・DOMは生成される
→ スマートフォンの場合もPCのDOMは生成されるので、DOMが無駄に深くなってしまう可能性がある

おまけ

clsx

https://www.npmjs.com/package/clsx

clsxを利用すると、TailwindCSSにてJavaScriptの条件分岐が利用できる。

// PCでのみ表示
        <Image
          src="/computer01_smile.png"
          width={619 / 2}
          height={578 / 2}
          className={clsx(isPc ? "block" : "hidden")}
        />
	
// スマートフォンでのみ表示
        <Image
          src="/smartphone01_smile.png"
          width={593 / 2}
          height={712 / 2}
          className={clsx(isPc ? "hidden" : "block")}
        />

レスポンシブはメディアクエリで対応可能なのであまり恩恵を感じないかもしれないが、別の要素の条件分岐でCSSだけ変更したい場合に便利である。
(例えば、パスが一致した時のみ背景色を赤にしたい等…)

display:none / visibility:visible

clsx等でJavaScriptとかけ合わせた場合、レイアウトシフトが起こる可能性があるので下記も使い分ける必要がある。
・display:none...完全に非表示にする(Tailwindの場合hidden)
・visibility: hidden...透明で表示する(Tailwindの場合invisible)