TL;DR

このページでは、JavaScript の基本となるAND演算子の実装方法について解説しますね。一言でいうと、AND演算子とは、すべての条件が真であるときに真となる論理演算子です。

AND 演算子 とは？

JavaScript では、&&というシンボルを使って AND 演算子を表現します。AND 演算子は 2 つの値を取り、両方の値がtrueの場合にのみtrueを返します。もし一方または両方の値がfalseであれば、結果もfalseとなります。

const a = true
const b = false
console.log(a && b) // falseが出力されます。

この考え方は複数の条件を一度に確認する場合に非常に役立ちます。例えば、ユーザーがログインしていて、そのユーザーが特定の役割を持っているかどうかをチェックするケースなどです。

短絡評価

JavaScript の AND 演算子 (&&) は、「短絡評価」または「短絡論理」を行います。これは、左辺の評価結果が false の場合、右辺は評価されずにすぐに false を返すことを意味します。それにより、不必要な計算を避けることができます。

しかしながら、左辺の評価結果が true の場合、右辺が評価され、その結果が最終的な結果として返されます。

以下に簡単な例を示します。

console.log(true && 'hello') // "hello"
console.log(false && 'hello') // false

上記の例では、最初の行では左辺が true なので、右辺の 'hello' が出力されます。一方、2 行目では左辺が false なので、その結果は評価されずに false が出力されます。

オプショナルチェイニングと併用

AND 演算子はとても多用途で、特にオプショナルチェイニング（?.）と併用した場合、Null または Undefined が参照されるエラーを回避するのに有効です。

例えば、次のようなコードがあるとします。

const userInfo = {
  name: 'Taro',
  address: {
    city: 'Tokyo',
    country: 'Japan',
  },
}

console.log(userInfo.address.city) // "Tokyo"と出力

この場合、addressプロパティが存在するときは問題ありませんが、それが存在しない場合にはエラーが発生します。

const userInfo = {
  name: 'Taro',
}

console.log(userInfo.address.city) // エラー: Cannot read property 'city' of undefined

この問題を回避するために、オプショナルチェイニングと AND 演算子を組み合わせて利用することができます。

const userInfo = {
  name: 'Taro',
}

console.log(userInfo.address?.city && userInfo.address.city) // Undefined

このコードでは、addressプロパティが存在しない場合でもエラーを回避でき、undefinedが返されます。これは、JavaScript のショートサーキット評価の原則に基づいています。&&演算子の前半の式（userInfo.address?.city）がfalseを返すと（つまり、addressが存在しないと）、その後の式は評価されません。

このような方法で、AND 演算子はコードの安全性を高め、予期せぬエラーを避けるための重要なツールとなります。

Next.js で、AND 演算子を実装

このセクションでは、Next.js と TypeScript で、AND 演算子を活用した具体的なコード例を見てみましょう。まずは、ログイン状態とユーザーの権限をチェックする簡単なコンポーネントを作ります。

ファイル名: components/CheckUser.tsx

import { useContext } from 'react'
import { UserContext } from '../contexts/UserContext'

type Props = {
  requiredRole: string
}

const CheckUser = ({ requiredRole }: Props) => {
  const { user } = useContext(UserContext)

  if (user.isLoggedIn && user.role === requiredRole) {
    return <p>許可されたアクセスです。</p>
  } else {
    return <p>許可されていないアクセスです。</p>
  }
}

export default CheckUser

このコードの中で、user.isLoggedIn && user.role === requiredRoleという部分が AND 演算子を活用した箇所です。ユーザーがログインしていて、そのユーザーが必要な権限を持っている場合にのみ、「許可されたアクセスです。」というメッセージを表示します。

ショートサーキット評価

前述した短絡評価と同じ意味である「ショートサーキット評価」があります。これは、JavaScript が AND 演算子を評価する際に、最初の値がfalseであるとすぐに全体の評価を終える特性を活用したものです。次のコードはその例です。

ファイル名: components/ShowGreeting.tsx

import { useContext } from 'react'
import { UserContext } from '../contexts/UserContext'

const ShowGreeting = () => {
  const { user } = useContext(UserContext)

  return <>{user.isLoggedIn && <p>こんにちは、{user.name}さん。</p>}</>
}

export default ShowGreeting

このコードでは、ユーザーがログインしている場合にのみ、そのユーザー名で挨拶を表示します。もしユーザーがログインしていない場合（user.isLoggedInがfalse）、&&の後ろの部分は評価されず、何も表示されません。

以上のように、AND 演算子はその基本的な特性を活用するだけでなく、JavaScript の特性を巧みに利用することでコードをより洗練されたものにできます。