TL;DR
この記事では、Next.js と TypeScript を使用した三項演算子の活用方法について解説します。三項演算子は一見シンプルですが、それを適切に使用することでコードの可読性と効率性を飛躍的に向上させることが可能です。本記事ではその具体的な実装法を学び、日々の開発に役立てていきましょう。
| 開発環境 | バージョン |
|---|---|
| Next.js | 13.4.3 |
| TypeScript | 5.0.4 |
| Emotion | 11.11.0 |
| React | 18.2.0 |
三項演算子とは？
三項演算子は、JavaScript 及び TypeScript における特殊な演算子で、三つのオペランドを取ります。その形式は condition ? exprIfTrue : exprIfFalse となります。条件式（condition）が真（truthy）である場合、exprIfTrue が評価され、偽（falsy）である場合、exprIfFalse が評価されます。
const isEven = (num: number) => (num % 2 === 0 ? 'Even' : 'Odd')
console.log(isEven(5)) // "Odd"
console.log(isEven(6)) // "Even"
Next.js で、三項演算子を活用
コンポーネント内で三項演算子を用いることで、柔軟にレンダリングを制御できます。具体的な例を見ていきましょう。
ファイル名: components/ThemeSwitcher.tsx
import { css } from '@emotion/react'
type ThemeProps = {
theme: 'light' | 'dark'
}
const ThemeSwitcher = ({ theme }: ThemeProps) => {
return (
<div
css={css`
background-color: ${theme === 'light' ? '#FFF' : '#333'};
color: ${theme === 'light' ? '#333' : '#FFF'};
`}
>
{theme === 'light' ? 'Light Theme' : 'Dark Theme'}
</div>
)
}
export default ThemeSwitcher
このコンポーネントは、渡されたthemeプロパティがlightかdarkに応じて、異なるスタイルとテキストをレンダリングします。三項演算子を使用して、これを一つのコンポーネント内で実現しています。
三項演算子の高度な活用
次に、三項演算子を使ったもう少し高度な例を見てみましょう。
ファイル名: pages/index.tsx
import { useState } from 'react'
import ThemeSwitcher from '../components/ThemeSwitcher'
const HomePage = () => {
const [theme, setTheme] = useState<'light' | 'dark'>('light')
const handleThemeSwitch = () => {
setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'))
}
return (
<div>
<ThemeSwitcher theme={theme} />
<button onClick={handleThemeSwitch}>Switch Theme</button>
</div>
)
}
export default HomePage
ここでは、useState フックと三項演算子を組み合わせてテーマの切り替えを実装しています。ボタンがクリックされるたびに、handleThemeSwitch関数が呼び出され、三項演算子を使用して現在のテーマを切り替えます。
以上が三項演算子の基本的な活用方法になります。このように三項演算子は、一見シンプルな機能ですが、Next.js と TypeScript のコードの中で効率的に利用することで、可読性や保守性を向上させ、コードの効率を高めることができます。
Emotion との組み合わせ
Emotion を用いた高度な例を挙げてみましょう。
Emotion の一部として提供されているcss関数は、プロパティの値として関数を受け取ることができます。これを利用して、引数に応じて動的にスタイルを変更することが可能です。
以下にその例を示します。
ファイル名: components/ResponsiveContainer.tsx
import { css } from '@emotion/react'
type ResponsiveContainerProps = {
width: string
children: React.ReactNode
}
const responsiveWidthStyles = (width: string) => css`
width: 100%;
@media (min-width: 768px) {
width: ${width};
}
`
const ResponsiveContainer = ({ width, children }: ResponsiveContainerProps) => {
return <div css={responsiveWidthStyles(width)}>{children}</div>
}
export default ResponsiveContainer
このResponsiveContainerコンポーネントは、widthプロパティを受け取り、それを基にレスポンシブな幅を持つコンテナを生成します。ここでのポイントは、responsiveWidthStyles関数です。この関数は、width引数を受け取り、それを基に CSS を生成します。
そして、これをcss関数の中で利用することで、受け取ったwidthに応じて動的にスタイルを生成することが可能になります。
利用例は以下の通りです。
import ResponsiveContainer from '../components/ResponsiveContainer'
const HomePage = () => {
return (
<ResponsiveContainer width="800px">
<h1>Welcome to My Website!</h1>
<p>This is some sample text.</p>
</ResponsiveContainer>
)
}
export default HomePage
ここでは、ResponsiveContainerコンポーネントに800pxを指定しています。これにより、ビューポートが 768px 以上の時、このコンテナの幅は 800px になります。それ以下のビューポート幅では、100%になります。
以上が Emotion と三項演算子を活用した高度な使用例になります。これを使えば、props によって動的にスタイルを変更することが可能となり、大変パワフルなツールとなりますよ。