Next.js と TypeScript で、論理積演算子と論理和演算子を扱う

TwitterFacebookHatena

TL;DR

この記事では、論理積演算子と論理和演算子の使い方について解説します。Next.js と TypeScript を用いて、これらの演算子がどのように動作し、それらがコードの効率性と可読性をどのように改善するかについて学びます。

開発環境 バージョン
Next.js 13.4.3
TypeScript 5.0.4
Emotion 11.11.0
React 18.2.0

論理積 (&&)演算子と論理和 (||)演算子とは？

論理積演算子と論理和演算子は、論理値（真または偽）の操作に使用される基本的な演算子です。

論理積演算子 (&&)は、両方のオペランド（つまり演算子が作用する値）が真であるときに真を返します。

「論理積」という言葉は「AND」演算子を表し、それ自体が論理学とプログラミングの両方でよく使われる用語ですね。論理積は全ての条件が真であるときのみ真となる論理演算を指します。JavaScript や TypeScript では && 演算子がこれに対応しています。

同様に、「論理和」は「OR」演算子を指し、少なくとも一つの条件が真であるときに真となる論理演算を指します。JavaScript や TypeScript では || 演算子がこれに対応しています。

論理和演算子 (||)は、少なくとも一方のオペランドが真であるときに真を返します。

let isSunny = true
let isHoliday = false

console.log(isSunny && isHoliday) // false
console.log(isSunny || isHoliday) // true

次は複数のコンポーネントを制御する例。

type Props = {
  isRed: boolean
  isYellow: boolean
  isGreen: boolean
}

const TrafficLight = ({ isRed, isYellow, isGreen }: Props) => {
  return (
    <div>
      {isRed && <p>赤信号です。止まりましょう。</p>}
      {isYellow && <p>黄信号です。注意しましょう。</p>}
      {isGreen && <p>緑信号です。進みましょう。</p>}
      {!isRed && !isYellow && !isGreen && <p>信号故障中です。十分に注意してください。</p>}
    </div>
  )
}

export default TrafficLight

このコンポーネントでは、信号機の各状態（赤、黄、緑）に対応する 3 つのプロパティを受け取ります。論理積演算子 (&&) を使用して、各信号状態が true のときに対応するメッセージを表示します。また、すべての信号状態が false の場合（信号機が故障していると想定）には、別のメッセージを表示します。これは ! 演算子（否定演算子）と && 演算子を組み合わせて表現されています。

Next.js で、論理積演算子と論理和演算子を実装

Next.js では、論理積演算子と論理和演算子を使用して、コンポーネントの表示を制御することが多いです。

components/WeatherReport.tsx:

type Props = {
  isSunny: boolean
  isHoliday: boolean
}

const WeatherReport = ({ isSunny, isHoliday }: Props) => {
  return (
    <div>
      {isSunny && isHoliday && <p>素晴らしい日ですね！</p>}
      {isSunny || isHoliday ? <p>楽しんでください！</p> : <p>頑張ってください！</p>}
    </div>
  )
}

export default WeatherReport

このコンポーネントでは、isSunny と isHoliday の 2 つのプロパティを受け取り、論理積演算子と論理和演算子を使用して表示するメッセージを制御します。

ここで論理積演算子 (&&) は、両方の条件が真である場合にのみ <p>素晴らしい日ですね！</p> をレンダリングします。つまり、isSunny と isHoliday が両方とも true の場合にのみ表示されます。

一方で、論理和演算子 (||) は、少なくとも一方の条件が真である場合に <p>楽しんでください！</p> をレンダリングします。そうでなければ、 <p>頑張ってください！</p> が表示されます。これは、晴れているか、休日である場合にメッセージが表示されるという意味です。

短絡評価

論理積演算子 (&&) と論理和演算子 (||) は、短絡評価と呼ばれる特別な動作をします。

短絡評価（Short-Circuit Evaluation）は、論理演算子が左から右に評価される時、最初の値だけで結果が確定する場合に、残りの値の評価をスキップする動作を指します。JavaScript や TypeScript では、&&（論理積）と ||（論理和）の 2 つの論理演算子が短絡評価を行います。

&&演算子の場合、最初の値が falsy（false として扱われる値）である場合、その時点で評価は終了し、その値がそのまま返されます。逆に、最初の値が truthy（true として扱われる値）であれば、次の値に進んで評価が行われます。

console.log(false && 'Hello') // Output: false
console.log(true && 'Hello') // Output: 'Hello'

||演算子の場合、最初の値が truthy である場合、その時点で評価は終了し、その値がそのまま返されます。逆に、最初の値が falsy であれば、次の値に進んで評価が行われます。

console.log(false || 'Hello') // Output: 'Hello'
console.log(true || 'Hello') // Output: true

短絡評価は、条件式を簡略化したり、特定の条件下でだけある処理を実行したりする際に便利です。例えば、オブジェクトのプロパティにアクセスする前にそのオブジェクトが null または undefined でないことを確認する際などによく使用されます。

他の例として、次のコードは、環境変数process.env.BASE_URLの値が設定されているかどうかにより、どの URL を使用するかを決定するコードです。

process.env.BASE_URL || 'http://localhost:3000'

この式は、||（論理和）演算子を使用しています。この演算子は左から右に評価され、最初に truthy（true と同等の値）が見つかった時点でその評価を停止します。そしてその truthy な値を返します。

Vercel で、環境変数process.env.BASE_URLが設定（truthy）されている場合、その設定値が使用されます。逆にprocess.env.BASE_URLが設定（truthy）されていない場合（つまり falsy の場合、例えば undefined や空文字列など）、デフォルト値として'http://localhost:3000'が使用されます。

このような構造は、開発環境と本番環境で異なる設定をする場合などに便利です。開発環境では環境変数を設定せず、デフォルトの URL を使用し、本番環境では環境変数を設定して本番用の URL を使用する、といった使い方ができます。

もう一つの例として、こちらをご覧ください。

process.env.NODE_ENV !== 'development' && 本番環境でのみ実行したい処理

この条件式process.env.NODE_ENV !== 'development'は、「現在の環境が開発環境（development）ではない場合」を意味します。

process.env.NODE_ENVは、多くの JavaScript 環境（特に Node.js やそのフレームワーク）で、現在の実行環境を識別するために使用されます。典型的な値は 'development'、'production'、'test'などです。

!==は、JavaScript や TypeScript の厳密な不等価演算子で、左辺と右辺が厳密に等しくないときに true を返します。この演算子は、左右の値の型も考慮するため、型変換による誤解釈を防ぐことができます。

したがって、process.env.NODE_ENV !== 'development'という表現は、「現在の環境が "development" ではないとき（つまり "production" や "test" などの場合）」を判断しています。

そして、この条件式の後に&&演算子が続いている場合、この条件が真（true）であるときのみ、その後ろの処理が実行されます。これは短絡評価の特性を利用したもので、現在の環境が開発環境ではないときに特定の操作を行うようなケースで使用されます。

例えば、アドセンス広告を本番のみ表示して、ローカルでは非表示にするときに使えます。

終わりに

論理演算子は JavaScript の基本的な要素であり、TypeScript も同様です。これらを上手に活用することで、コードの条件分岐を簡潔に表現できますよね。さらに深く理解するためには、実際に手を動かしてみることが一番です。ぜひとも試してみてくださいね！

Jamstack での制作を依頼する

Next.js と TypeScript で、論理積演算子と論理和演算子を扱う