アコーディオン

Sample.tsx

TypeScript と React を使ってアコーディオンを作成する方法をご紹介します。以下は、シンプルなアコーディオンコンポーネントの例です。

### 1. 必要な環境をセットアップ

まずはプロジェクトをセットアップし、必要なパッケージをインストールします。

```bash
npx create-react-app my-accordion-app --template typescript
cd my-accordion-app
npm start
```

### 2. アコーディオンコンポーネントの作成

`src` ディレクトリ内に `Accordion.tsx` という名前の新しいファイルを作成します。

```tsx
// src/Accordion.tsx
import React, { useState } from 'react';

interface AccordionItem {
  title: string;
  content: React.ReactNode;
}

interface AccordionProps {
  items: AccordionItem[];
}

const Accordion: React.FC<AccordionProps> = ({ items }) => {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  const toggleItem = (index: number) => {
    setOpenIndex(openIndex === index ? null : index);
  };

  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>
          <button onClick={() => toggleItem(index)}>
            {item.title}
          </button>
          {openIndex === index && (
            <div>
              {item.content}
            </div>
          )}
        </div>
      ))}
    </div>
  );
};

export default Accordion;
```

### 3. アコーディオンを使用する

次に、`App.tsx` ファイルでアコーディオンコンポーネントを使用します。

```tsx
// src/App.tsx
import React from 'react';
import Accordion from './Accordion';

const App: React.FC = () => {
  const accordionItems = [
    { title: 'Item 1', content: 'Content for item 1' },
    { title: 'Item 2', content: 'Content for item 2' },
    { title: 'Item 3', content: 'Content for item 3' },
  ];

  return (
    <div>
      <h1>Accordion Example</h1>
      <Accordion items={accordionItems} />
    </div>
  );
};

export default App;
```

### 4. スタイルを追加（任意）

アコーディオンの見た目を良くするために、CSSを追加することもできます。例えば、`src/App.css` に以下のスタイルを追加します。

```css
button {
  background-color: #f1f1f1;
  border: none;
  padding: 10px;
  text-align: left;
  outline: none;
  transition: 0.4s;
  cursor: pointer;
}

button:hover {
  background-color: #ddd;
}

div {
  margin-bottom: 10px;
}

div > div {
  padding: 10px;
  border: 1px solid #ddd;
}
```

### 5. アプリを実行

すべてのセットアップが完了したら、プロジェクトを実行します。

```bash
npm start
```

### 結果

ブラウザを開くと、アコーディオンが表示され、ボタンをクリックすることで各項目の内容を表示・非表示にできるようになっています。

以上が、TypeScript と React を使用したアコーディオンの基本的な実装方法です。必要に応じて、スタイルや機能を追加してカスタマイズしてください。