TL;DR
このページでは、indexOf() メソッドの実装方法について解説しますね。一言でいうと indexOf() メソッドとは、文字列や配列の中から特定の値がどこに位置しているかを探し出す方法です。
| 開発環境 | バージョン |
|---|---|
| Next.js | 13.4.4 |
| TypeScript | 5.0.4 |
| Emotion | 11.11.0 |
| React | 18.2.0 |
indexOf() メソッドとは？
JavaScript の文字列や配列を操作するためのメソッドの一つが indexOf() メソッドです。これは、文字列や配列の中から指定した要素が最初に現れるインデックスを返します。指定した要素が見つからなかった場合は、-1 を返します。
文字列の場合の基本的な使用法は以下のようになります。
let str = 'Hello, world!'
let index = str.indexOf('world')
console.log(index) // 7 を返します
配列の場合の基本的な使用法は以下のようになります。
let array = ['apple', 'banana', 'cherry']
let index = array.indexOf('cherry')
console.log(index) // 2 を返します
このように、indexOf() メソッドを用いることで、文字列や配列の中から目的の値が存在する場所を見つけ出すことができます。
Next.js で、indexOf() メソッドを実装
では、Next.js と TypeScript を用いて、この indexOf() メソッドをどのように実装するのか見ていきましょう。
pages/index.tsx
import { useState } from 'react'
type Props = {
items: string[]
}
const IndexPage = ({ items }: Props) => {
const [query, setQuery] = useState('')
const handleSearch = () => {
const index = items.indexOf(query)
if (index !== -1) {
alert(`Item found at position: ${index}`)
} else {
alert('Item not found')
}
}
return (
<>
<input type="text" onChange={(e) => setQuery(e.target.value)} />
<button onClick={handleSearch}>Search</button>
</>
)
}
export default IndexPage
上記のコードは Next.js で作成した単純なページで、文字列の配列から指定した文字列を探す機能を持っています。ユーザーがテキストフィールドに文字列を入力し、検索ボタンをクリックすると、その文字列が配列内に存在するかをチェックします。もし存在すれば、その位置をアラートダイアログで表示し、存在しなければ「Item not found」を表示します。
TypeScript で型チェック
JavaScript では、文字列や配列のどちらでも indexOf()メソッドを利用することができますが、TypeScript では型が厳密にチェックされるため、文字列のメソッドを配列に適用すると型エラーが発生します。
これは、TypeScript が JavaScript のスーパーセットであり、JavaScript の柔軟性を持ちながらも、より厳格な型システムを提供するためです。この厳格な型システムにより、コードのバグを早期に発見でき、より安全なコードを書くことができます。
以下に、文字列と配列のそれぞれについて、indexOf()メソッドの使用方法と型チェックの例を示します。
let str: string = 'Hello, world!'
let indexStr: number = str.indexOf('world')
console.log(indexStr) // 7 を返します
let array: string[] = ['apple', 'banana', 'cherry']
let indexArray: number = array.indexOf('cherry')
console.log(indexArray) // 2 を返します
このように、TypeScript を使用すると、コンパイル時に変数の型がチェックされ、期待する型と一致しない場合はエラーが発生します。これにより、コードの安全性を向上させ、ランタイムエラーを予防することができます。
プラクティカルな使用例
上記で説明した基本的な使用例をもとに、もう少しプラクティカルな indexOf()メソッドの使用例を見てみましょう。例えば、ユーザーが指定した商品がカートに含まれているかどうかをチェックする機能などが考えられます。
type CartItem = {
id: string
name: string
price: number
}
type Props = {
cart: CartItem[]
}
const ShoppingCart = ({ cart }: Props) => {
const [query, setQuery] = useState('')
const checkItemInCart = () => {
const itemNames = cart.map((item) => item.name)
const index = itemNames.indexOf(query)
if (index !== -1) {
alert(`Item is in the cart`)
} else {
alert('Item is not in the cart')
}
}
return (
<>
<input type="text" onChange={(e) => setQuery(e.target.value)} />
<button onClick={checkItemInCart}>Check</button>
</>
)
}
このコンポーネントでは、ユーザーがテキストフィールドに文字列を入力し、"Check"ボタンをクリックすると、その文字列がカート内の商品の名前に含まれているかをチェックします。商品の名前はcart配列から抽出され、indexOf()メソッドが使用されています。存在すれば「Item is in the cart」を表示し、存在しなければ「Item is not in the cart」を表示します。
このように、indexOf()メソッドは配列内の特定の要素が存在するかどうかをチェックするのに便利な方法を提供します。また、TypeScript を使用すれば、安全なコードを保証するとともに、コードのエラーを早期に発見できるため、より堅牢なアプリケーションを構築することができます。