コンポーネントを特定のページでのみ非表示にする

contact ページだけ あるコンポーネントを非表示にしたい場合、どうすればよいでしょうか？

コンポーネントを特定のページでのみ非表示にする方法は、通常、条件付きレンダリングを用いて実装します。その際の条件は、そのページが表示されているかどうかとします。

特定のページを特定するためには、ページの URL やルートに基づいて判断することが一般的です。これを Next.js で実現するには、 useRouter フックを使用します。

以下に、 Contact ページであるコンポーネント（例えば MyComponent）を非表示にするサンプルコードを示します：

import { useRouter } from 'next/router'
import MyComponent from './MyComponent'

export default function Page() {
  const router = useRouter()

  // router.pathname を使用して現在のページが 'contact' ページかどうかを判断します
  const isContactPage = router.pathname === '/contact'

  return <div>{!isContactPage && <MyComponent />}</div>
}

このコードは、現在のページが 'contact' ページでない場合にのみ MyComponent を表示します。そのため、'contact' ページでは MyComponent は非表示になります。論理 AND 演算子 については後述します。

これが最もシンプルで直接的な方法ですが、他にもさまざまな方法があります。

コンポーネント自体に組み込む

例えば、特定のページでのみ特定のコンポーネントを非表示にするロジックを、そのコンポーネント自体に組み込むことも可能です。

その際も useRouter フックを使用しますが、今度は MyComponent 内で使用します：

import { useRouter } from 'next/router'

export default function MyComponent() {
  const router = useRouter()
  const isContactPage = router.pathname === '/contact'

  // 'contact' ページでは何も描画しない
  if (isContactPage) return null

  // それ以外のページでは通常通り描画する
  return (
    // MyComponent の内容
  )
}

これらの方法を適切に使い分けることで、Next.js でのページごとのコンポーネントの表示・非表示を制御することが可能です。

論理 AND 演算子 && を解説

JavaScript では && は論理 AND 演算子として使われます。論理 AND 演算子 && は、左側の式と右側の式の両方が "truthy"（真と評価される）である場合に true を返します。それ以外の場合（つまり、左側か右側、あるいは両方が "falsy"（偽と評価される）である場合）は false を返します。

しかし、JavaScript の論理 AND 演算子は「短絡評価」（short-circuit evaluation）という特性を持っています。これは、左側の式が "falsy" である場合、右側の式は評価されずにすぐにその "falsy" な値が返されるというものです。左側の式が "truthy" である場合のみ、右側の式が評価されます。

この特性を利用すると、JavaScript では以下のように条件付きレンダリングを行うことがよくあります：

{
  condition && <Component />
}

上記のコードでは、condition が "truthy" である場合にのみ <Component /> がレンダリングされます。condition が "falsy" である場合、<Component /> はレンダリングされません。

それでは、あなたが質問された {!isContactPage && <MyComponent />} のコードについて見てみましょう。これは、isContactPage が "falsy"（つまり、現在のページが 'contact' ページでない）である場合にのみ <MyComponent /> をレンダリングするという意味になります。isContactPage が "truthy"（つまり、現在のページが 'contact' ページである）である場合、<MyComponent /> はレンダリングされません。

要約すると、{!condition && <Component />} の形式のコードは、「condition が "falsy" である場合にのみ <Component /> をレンダリングする」という意味になります。

エクスクラメーションマーク「!」の意味

JavaScript ではエクスクラメーションマーク ! は論理否定（NOT）演算子として使われます。これは、与えられた値をブール値（true または false）に変換し、その逆の値を返します。つまり、true を false に、false を true にします。

以下にいくつかの例を示します：

console.log(!true) // false
console.log(!false) // true

JavaScript では 0, null, undefined, NaN, ''（空文字列）などは "falsy" 値として扱われ、これらの値に対して ! を適用すると true を返します。それ以外の値は "truthy" 値として扱われ、これらの値に対して ! を適用すると false を返します。

console.log(!0) // true
console.log(!null) // true
console.log(!undefined) // true
console.log(!NaN) // true
console.log(!'') // true

console.log(!1) // false
console.log(!-1) // false
console.log(!'hello') // false
console.log(!{}) // false

エクスクラメーションマークを 2 つ !! 使うことで、任意の値を直接ブール値に変換することができます。最初の ! で論理否定を行い、その結果を再度論理否定するため、元の値が "truthy" なら true を、"falsy" なら false を返します。

console.log(!!0) // false
console.log(!!null) // false
console.log(!!undefined) // false
console.log(!!NaN) // false
console.log(!!'') // false

console.log(!!1) // true
console.log(!!-1) // true
console.log(!!'hello') // true
console.log(!!{}) // true

JavaScript では条件式やブール値が期待される箇所でエクスクラメーションマークを頻繁に使用します。