アコーディオンの基本構造
アコーディオンは、クリックやタップによってコンテンツが展開・縮小される UI コンポーネントです。まず、アコーディオンの基本構造を作成していきましょう。以下のコードはアコーディオンの構造を定義したコンポーネントです。
type AccordionProps = {
title: string
content: string
isOpen: boolean
onToggle: () => void
}
const Accordion = ({ title, content, isOpen, onToggle }: AccordionProps) => {
return (
<div>
<button onClick={onToggle}>{title}</button>
{isOpen && <div>{content}</div>}
</div>
)
}
アコーディオンの状態管理
続いて、アコーディオンの状態を管理するための機能を追加します。React の useState フックを利用して、アコーディオンが開いているか閉じているかを管理することができます。
import { useState } from 'react'
type AppProps = {
title: string
content: string
}
const App = ({ title, content }: AppProps) => {
const [isOpen, setIsOpen] = useState(false)
const handleToggle = () => {
setIsOpen(!isOpen)
}
return (
<div>
<Accordion title={title} content={content} isOpen={isOpen} onToggle={handleToggle} />
</div>
)
}
複数のアコーディオンを管理
複数のアコーディオンを表示し、それぞれの状態を管理する方法を見ていきましょう。まず、アコーディオンのデータを配列で定義します。
const accordionsData = [
{
title: 'タイトル1',
content: 'コンテンツ1',
},
{
title: 'タイトル2',
content: 'コンテンツ2',
},
{
title: 'タイトル3',
content: 'コンテンツ3',
},
]
次に、useState フックを使って、複数のアコーディオンの開閉状態を管理します。また、map メソッドを使って、アコーディオンのデータをループして表示しましょう。
import { useState } from 'react'
type AccordionData = {
title: string
content: string
}
type AppProps = {
accordionsData: AccordionData[]
}
const App = ({ accordionsData }: AppProps) => {
const [openIndexes, setOpenIndexes] = useState<number[]>([])
const handleToggle = (index: number) => {
const currentIndex = openIndexes.indexOf(index)
const newOpenIndexes = [...openIndexes]
if (currentIndex === -1) {
newOpenIndexes.push(index)
} else {
newOpenIndexes.splice(currentIndex, 1)
}
setOpenIndexes(newOpenIndexes)
}
return (
<div>
{accordionsData.map((accordionData, index) => (
<Accordion key={index} title={accordionData.title} content={accordionData.content} isOpen={openIndexes.includes(index)} onToggle={() => handleToggle(index)} />
))}
</div>
)
}
このコードでは、openIndexes という配列を使って、開いているアコーディオンのインデックスを管理しています。handleToggle 関数では、引数で渡されたインデックスが openIndexes 配列に含まれているかどうかを確認し、含まれている場合は配列から削除し、含まれていない場合は配列に追加しています。
まとめ
この記事では、Next.js と TypeScript を使って、アコーディオンを実装する方法を解説しました。アコーディオンの基本構造を定義し、useState フックを使って開閉状態を管理し、複数のアコーディオンを表示できるようにしました。この実装方法を参考に、独自のアコーディオンコンポーネントを作成してみてください。