TL;DR

このページでは、JavaScript の Truthy（ツゥルーシー）と Falsy（フォルシー）の概念について、Next.js と TypeScript の観点から詳しく解説します。Truthy と Falsy の概念は、JavaScript を使った開発において頻繁に遭遇するので、しっかり理解しておくことは大切です。

Truthy と Falsy とは？

JavaScript では、ブール値として評価されるときに「真」とみなされる値を Truthy、逆に「偽」とみなされる値を Falsy と言います。これらは Boolean 型に変換される時の結果を表しています。

Falsy な値は次のものです。

• false
• 0
• ""（空文字列）
• null
• undefined
• NaN

これ以外の値は全て Truthy です。

Next.js で、Truthy と Falsy を活用

Truthy と Falsy の概念は、条件文やショートサーキット評価で頻繁に利用されます。以下に、Next.js のコンポーネントでその利用例を見てみましょう。

ファイル名：components/TruthyFalsyExample.tsx

type Props = {
  name?: string
}

const TruthyFalsyExample = ({ name }: Props) => {
  return <div>{name || 'Guest'}</div>
}

export default TruthyFalsyExample

このコンポーネントは、name プロパティが存在すればその値を表示し、存在しない（つまり、Falsy な値）場合は "Guest" を表示します。これがショートサーキット評価の一例で、JavaScript の Truthy と Falsy の特性を活用したものです。

このコードは、「nameが Truthy ならそれを返す、Falsy なら "Guest" を返す」というロジックを簡潔に表現しています。

ちょっとした UI の切り替えやデフォルト値の設定など、こういった Truthy と

Falsy の特性を活用することで、コードが簡潔で理解しやすくなりますよね。

ただし、このようなショートサーキット評価は Falsy な値が意図した値である場合には注意が必要です。上述の例で name が空文字列（""）であることが意図されている場合でも "Guest" が表示されてしまいます。このようなケースでは、明示的なチェックを行う必要があります。

Nullish Coalescing Operator の活用

JavaScript の ES2020 では、Nullish Coalescing Operator (??) が導入されました。これは左辺が nullish（null または undefined）である場合にのみ、右辺を評価する演算子です。

これを使うことで、上述のようなケースでも、意図したデフォルト値を適用することが可能となります。以下にその例を示します。

ファイル名：components/NullishCoalescingExample.tsx

type Props = {
  name?: string
}

const NullishCoalescingExample = ({ name }: Props) => {
  return <div>{name ?? 'Guest'}</div>
}

export default NullishCoalescingExample

このコンポーネントでは、name プロパティが null や undefined の場合のみ "Guest" を表示し、それ以外（空文字列や 0 など）では name の値をそのまま表示します。これにより、Falsy な値が意図した値である場合でも適切にハンドリングできます。

Nullish Coalescing Operator は TypeScript でも利用可能で、型安全なデフォルト値の設定などに利用できます。JavaScript の Truthy と Falsy の概念と一緒に、Nullish Coalescing Operator の使用方法も覚えておくと、より強力なコードを書くことができるようになると思います。

さらに実践的な Truthy と Falsy の活用例をご紹介しましょう。

フォームのバリデーション

Web アプリケーション開発において、フォームのバリデーションはよく見かける課題ですよね。入力項目が正しい形式であるか、必要な項目が全て入力されているかなど、多くのチェックが必要になる場合があります。Truthy と Falsy の概念はこうしたバリデーションを簡潔に記述するのに役立ちます。

以下に、Next.js と TypeScript を使用して、フォームのバリデーションを行うシンプルなコンポーネントを示します。

ファイル名：components/FormValidationExample.tsx

import { useState } from 'react'

type FormState = {
  name: string
  email: string
}

const FormValidationExample = () => {
  const [formState, setFormState] = useState<FormState>({
    name: '',
    email: '',
  })

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setFormState({
      ...formState,
      [event.target.name]: event.target.value,
    })
  }

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault()

    if (!formState.name || !formState.email) {
      alert('名前とメールアドレスの入力は必須です。')
      return
    }

    // 続けてサーバーへの送信などの処理を行う
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" value={formState.name} onChange={handleChange} placeholder="名前" />
      <input type="email" name="email" value={formState.email} onChange={handleChange} placeholder="メールアドレス" />
      <button type="submit">送信</button>
    </form>
  )
}

export default FormValidationExample

このコンポーネントでは、フォームの状態を useState フックで管理し、handleChange 関数で入力の変更をハンドリングしています。handleSubmit 関数では、フォームが送信されたときに実行されるバリデーションを行っています。

ここでのポイントは、if (!formState.name || !formState.email) の部分です。ここでは、formState.name と formState.email が Falsy（空文字列など）であるかどうかをチェックし、もし Falsy であればエラーメッセージを表示して処理を終了しています。このように Truthy と Falsy の概念を活用することで、簡潔かつ直感的なバリデーションを行うことができるんですね。