TL;DR

この記事では、JavaScript の表現力を飛躍的に向上させるテンプレートリテラルについて詳しく解説します。Next.js と TypeScript の組み合わせで実装する際の注意点やベストプラクティスについても触れていきます。

テンプレートリテラルとは

バッククオートで囲う文字リテラルです。テンプレートリテラルは、JavaScript の表現法の 1 つで、文字列の中に変数や式を埋め込むことができます。従来の文字列表現では + や連結関数を用いて変数と文字列をつなげる必要がありましたが、テンプレートリテラルを用いると、より直感的で読みやすい形で文字列と変数を結合することが可能になります。

変数や式は ${} の中に記述します。以下に基本的なテンプレートリテラルの使用例を示します。

const name = 'John Doe'
const age = 25

// テンプレートリテラルを使用して文字列と変数を結合
const message = `Hello, ${name}! You are ${age} years old.`

console.log(message) // "Hello, John Doe! You are 25 years old." が出力される

このように、テンプレートリテラルは文字列と変数を直感的に結合できるため、コードの可読性を向上させることができます。また、改行や空白もそのまま反映されるため、複数行に渡る文字列を表現するのにも適しています。

Next.js でテンプレートリテラルを実装する

以下に示すコードは、Next.js と TypeScript を用いてテンプレートリテラルを利用した例です。

ファイル名: pages/index.tsx

type UserProps = {
  name: string
  age: number
}

const UserComponent = ({ name, age }: UserProps) => {
  const message = `Hello, ${name}! You are ${age} years old.`

  return <div>{message}</div>
}

export default function Home() {
  const user = { name: 'John Doe', age: 25 }

  return <UserComponent {...user} />
}

コード解説

今回の例では、テンプレートリテラルを使ってユーザーへの挨拶メッセージを作成しています。まず UserProps という型を定義し、それをもとに UserComponent という関数コンポーネントを作りました。

UserComponent 内でテンプレートリテラルを使用しています。${name} と ${age} は、テンプレートリテラル内で変数を展開するための記法ですね。これにより、文字列と変数を綺麗に結合することができます。

そして、このコンポーネントを Home 関数内で使用しています。UserComponent への props をスプレッド構文（...user）で渡しています。こうすることで、props を一括してコンポーネントに渡すことができるんですよ。

Emotion.js でテンプレートリテラルを実装する

Emotion.js は CSS-in-JS の一つで、JavaScript 内で CSS を直接書くことができます。これを使うことで、コンポーネントのスタイルをコードと一緒に管理することができ、可読性とメンテナンス性が向上します。

そしてもちろん、Emotion.js の中でテンプレートリテラルを活用することができます。これにより、プロパティや状態に応じて動的にスタイルを変更することが可能になります。三項演算子も含め、JavaScript の機能は全て使用可能です。

以下に、Emotion.js とテンプレートリテラルを使った例を示します。

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

type ButtonProps = {
  primary: boolean
}

const Button = ({ primary }: ButtonProps) => {
  return (
    <button
      css={css`
        background-color: ${primary ? 'blue' : 'white'};
        color: ${primary ? 'white' : 'black'};
      `}
    >
      Click me
    </button>
  )
}

export default function Home() {
  return (
    <>
      <Button primary={true} />
      <Button primary={false} />
    </>
  )
}

この例では、Button コンポーネントの primary プロパティに応じてボタンの背景色と文字色を変更しています。テンプレートリテラルと三項演算子を組み合わせることで、動的にスタイルを切り替えることが可能になります。

このように、Emotion.js とテンプレートリテラルを活用することで、JavaScript の強力な表現力をスタイリングにも活かすことができます。

終わりに

テンプレートリテラルは、簡単に文字列と変数を組み合わせることができるのが一番のメリットです。また、改行や空白もそのまま反映されるため、複数行に渡る文字列を表現するのにも便利です。

さらに、関数を埋め込むことも可能です。これにより、文字列生成の際に計算を行うなど、さらに高度な操作が可能になります。

以上が、Next.js と TypeScript でテンプレートリテラルを活用する方法とそのメリットになります。一見、難しそうなテンプレートリテラルも実際にはシンプルで、色々な場面で活躍する便利な機能なんですよ。JavaScript の表現力を更に引き立ててくれるツールとして、ぜひ積極的に活用してみてください。