【React】ReactとTypeScriptを使用してリストボックスを実装したい！

投稿者 投稿日:

1. TypeScript設定の作成

TypeScriptの設定ファイル（tsconfig.json）を作成します

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "jsx": "react",
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

詳細に説明！

compilerOptions セクションは、TypeScript コンパイラに対するオプションを指定します

  • target: es5
    • 生成する JavaScript のターゲットバージョンを指定します
      ここでは ECMAScript 5 をターゲットにしています
      古いブラウザでも動作する JavaScript を生成するためです
  • module: commonjs
    • モジュールの生成方法を指定します
      Node.js 環境では commonjs が一般的です
  • strict: true
    • TypeScript の厳格モードを有効にします
      これにより、noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, alwaysStrict といった一連の厳格なチェックが有効になります
      （それぞれは今後まとめてみますwww）
  • jsx: react
    • JSXを使用するときの設定を指定します
      Reactを使用している場合はこのオプションをreactに設定します
      「react」を設定によってJSX 構文が React.createElement 呼び出しに変換されます
  • esModuleInterop: true
    • ES モジュールの互換性を向上させるための設定です
      この設定を有効にすると、CommonJS モジュールを ES6 スタイルのインポート（import 文）でインポートできるようになります
      具体的にはdefault のインポートと named のインポートの間の互換性が改善されます！
  • skipLibCheck: true
    • TypeScript コンパイラが型定義ファイル（.d.ts ファイル）をチェックするのをスキップする設定です
      設定することでプロジェクトのビルド速度が向上します
      ちなみに、外部ライブラリの型定義に問題があっても、コンパイルは続行されます
  • include: [“src”]
    • プロジェクトに含めるファイルやディレクトリを指定します
      ここでは「src」ディレクトリ内のすべてのファイルが TypeScript コンパイラによって処理されるように指定しています

2. コンポーネントの作成

リストボックスコンポーネントを作成します

import React, { useState } from 'react';

interface ListBoxProps {
  items: string[];
}

const ListBox: React.FC<ListBoxProps> = ({ items }) => {
  const [selectedItem, setSelectedItem] = useState<string | null>(null);

  const handleClick = (item: string) => {
    setSelectedItem(item);
  };

  return (
    <div style={styles.listBox}>
      {items.map((item) => (
        <div
          key={item}
          style={{
            ...styles.item,
            backgroundColor: item === selectedItem ? '#007BFF' : '#fff',
            color: item === selectedItem ? '#fff' : '#000',
          }}
          onClick={() => handleClick(item)}
        >
          {item}
        </div>
      ))}
    </div>
  );
};

// 必要に応じて、スタイルを調整してください！
const styles = {
  listBox: {
    border: '1px solid #ccc',
    borderRadius: '4px',
    overflow: 'hidden',
    maxWidth: '200px',
  },
  item: {
    padding: '10px',
    cursor: 'pointer',
    borderBottom: '1px solid #ccc',
    transition: 'background-color 0.3s',
  },
};

export default ListBox;

3. 使用例の作成

App.tsxを作成して、ListBoxコンポーネントを使用します

import React from 'react';
import ReactDOM from 'react-dom';
import ListBox from './ListBox';

const App: React.FC = () => {
  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

  return (
    <div>
      <h1>React ListBox Example</h1>
      <ListBox items={items} />
    </div>
  );
};

export default App;

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

是非ご参考ください！

是非フォローしてください

最新の情報をお伝えします

投稿者: Mon