TL;DR
このページでは、JavaScript の includes() メソッドの実装方法について解説しますね。一言でいうと includes() メソッドとは、ある配列や文字列に特定の要素が含まれているかどうかを確認する機能です。
| 開発環境 | バージョン |
|---|---|
| Next.js | 13.4.4 |
| TypeScript | 5.0.4 |
| Emotion | 11.11.0 |
| React | 18.2.0 |
includes() メソッドとは？
includes() メソッドとは、JavaScript において文字列や配列に特定の要素や文字が存在するかどうかを真偽値で返すメソッドです。この機能は、特定のデータが含まれているかを調べる際に非常に便利です。
例えば、次のような配列があったとします。
const fruits = ['apple', 'banana', 'cherry']
この配列に「banana」が含まれているかを調べたい場合、includes() メソッドを使うと次のようにできます。
const hasBanana = fruits.includes('banana')
console.log(hasBanana) // true が出力されます
配列での基本的な使い方
では、配列に対して includes() メソッドを使ってみましょう。以下の例では、数字の配列に特定の数字が含まれているかを確認しています。
const numbers = [1, 2, 3, 4, 5]
const targetNumber = 3
if (numbers.includes(targetNumber)) {
console.log(`${targetNumber} は配列に含まれています。`)
} else {
console.log(`${targetNumber} は配列に含まれていません。`)
}
このコードでは、「3」が配列に含まれているかを確認しています。includes() メソッドが true を返すため、コンソールには「3 は配列に含まれています。」と表示されます。
文字列での使い方
includes() メソッドは文字列に対しても使うことができます。以下は文字列での基本的な使い方です。
const greeting = 'Hello, world!'
const targetWord = 'world'
if (greeting.includes(targetWord)) {
console.log(`${targetWord} は文字列に含まれています。`)
} else {
console.log(`${targetWord} は文字列に含まれていません。`)
}
この場合も、includes() メソッドが true を返すため、「world は文字列に含まれています。」と表示されます。
オプションでの使い方
includes() メソッドには、オプションとして検索を開始するインデックスを指定することができます。以下はその使い方です。
const colors = ['red', 'green', 'blue']
const colorToFind = 'green'
const startIndex = 2
if (colors.includes(colorToFind, startIndex)) {
console.log(`${colorToFind} は配列に含まれています。`)
} else {
console.log(`${colorToFind} は配列に含まれていません。`)
}
このコードでは、startIndex として 2 を指定しているため、2 番目のインデックスから検索が始まります。このため、「green」は検索範囲外となり、結果は「green は配列に含まれていません。」となります。
TypeScript での使い方
TypeScript でincludes()メソッドを使う使用例です。
const fruits: string[] = ['apple', 'banana', 'cherry']
const hasBanana = fruits.includes('banana')
if (hasBanana) {
console.log('バナナがあります。')
} else {
console.log('バナナがありません。')
}
このコードでは、fruits 配列に 'banana' という文字列が含まれているかを確認し、結果に応じてメッセージをコンソールに表示します。バナナが含まれていれば、「バナナがあります。」と表示されます。
Next.js での使い方
以下は、Next.js のページコンポーネントで、配列に特定の要素が存在するかどうかを includes() メソッドでチェックする例です。
import { NextPage } from 'next'
const items: string[] = ['Next.js', 'React', 'TypeScript']
const IncludesExample: NextPage = () => {
const hasReact = items.includes('React')
return (
<div>
<h1>技術リスト</h1>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
{hasReact ? <p>このリストには React が含まれています。</p> : <p>このリストには React が含まれていません。</p>}
</div>
)
}
export default IncludesExample
このコードは、items 配列に 'React' が含まれているかどうかを確認し、結果に応じて異なるメッセージを表示します。
このコンポーネントを pages フォルダ内の適切な場所に配置すると、Next.js プロジェクト内でこのページにアクセスできます。