React-Selectの基本的な使い方を解説！複数選択やTypeScriptとの組み合わせまで

2023-11-15

当サイトでは一部リンクに広告が含まれています

React-Selectとは

React-Selectは、Reactというウェブサイトを作るためのプログラミング言語で使う、選択ボックス（ドロップダウンリストとも呼ばれます）を作るためのライブラリです。

※「ライブラリ」はプログラミングの世界では、特定の機能を手軽に使えるようにしたものを指します。

このReact-Selectを使うことで、見た目や挙動が美しい選択ボックスを、簡単にウェブサイトに追加することができます。

React-Selectの特徴

React-Selectには次のような特徴があります。

多彩なカスタマイズ: React-Selectは、選択ボックスの見た目や挙動を細かく調整することができます。色やサイズ、挙動などを自由に設定できるため、自分のウェブサイトにピッタリの選択ボックスを作れます。
多機能: 単一選択だけでなく、複数選択も可能です。また、動的に選択肢を追加することも、React-Selectなら簡単です。
ユーザーフレンドリー: 検索機能があり、大量の選択肢から簡単に目的の項目を探すことができます。これにより、ユーザー体験が向上します。

React-Selectの基本的な使い方

次に、React-Selectの基本的な使い方について説明します。

React-Selectのインストール方法

まずはReact-Selectをインストールします。
コンピュータの「コマンドプロンプト」または「ターミナル」と呼ばれるアプリケーションを開き、以下のコマンドを打ち込みます。

npm install react-select

これで、React-Selectのライブラリがあなたのプロジェクトに追加されます。

単一選択の実装

次に、一つだけ選べる（単一選択）選択ボックスを作ってみましょう。

import React from "react";
import Select from "react-select";

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

function App() {
  return (
    <Select options={options} />
  );
}

export default App;

以上のように書くと、チョコレート、ストロベリー、バニラから一つを選べる選択ボックスが作れます。

複数選択の実装

同じように、複数の選択肢を選べる（複数選択）選択ボックスも作ってみましょう。

import React from "react";
import Select from "react-select";

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

function App() {
  return (
    <Select
      isMulti
      options={options}
    />
  );
}

export default App;

今度はisMultiという設定を追加しました。これにより、複数の選択肢を選べるようになります。
このように、React-Selectは単一選択も複数選択も、簡単に作ることができます。

React-Selectの値(value)の取得方法

次に、React-Selectで選択された値を取得する方法を学びましょう。
選択された値を取得することで、ユーザーが何を選んだのかをプログラムで扱うことができます。

単一選択時の値取得

まずは単一選択時の値の取得方法です。
以下の例では、選択肢が変更されたとき（onChangeイベント）に選択された値を表示します。

import React from "react";
import Select from "react-select";

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

function App() {
  const handleChange = selectedOption => {
    console.log(`Option selected:`, selectedOption);
  };

  return (
    <Select
      options={options}
      onChange={handleChange}
    />
  );
}

export default App;

上記の例では、選択肢が変更されると、その選択肢の情報がconsole.logにより表示されます。
表示される情報は選択された選択肢のvalueとlabelです。

複数選択時の値取得

次に複数選択時の値の取得方法です。
基本的には単一選択時と同じですが、複数選択時には複数の選択肢が選ばれるので、その全ての情報を取得することが可能です。

import React from "react";
import Select from "react-select";

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

function App() {
  const handleChange = selectedOptions => {
    console.log(`Options selected:`, selectedOptions);
  };

  return (
    <Select
      isMulti
      options={options}
      onChange={handleChange}
    />
  );
}

export default App;

上記の例では、複数の選択肢が選ばれると、その全ての選択肢の情報がconsole.logにより表示されます。

これらの方法を用いて、React-Selectで選択された値を取得することができます。

React-SelectのonChangeイベントについて

前の章で少し触れましたが、次にReact-SelectのonChangeイベントについて詳しく説明します。
onChangeイベントとは、選択肢が変更されたときに発生する動作のことを指します。

onChangeイベントとは

ReactやReact-Selectでは、ユーザーが何かアクションを起こした時（ボタンを押す、テキストを入力する、選択肢を選ぶ等）に実行される関数を設定することができます。これを「イベント」と呼びます。

そして、選択肢が変わった時に実行されるイベントをonChangeイベントと言います。
これを使うと、「選択肢が変わった時に何をするか」をプログラムで指定できます。

onChangeイベントの使い方

次に、具体的な使い方を示します。

import React from "react";
import Select from "react-select";

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

function App() {
  const handleChange = selectedOption => {
    console.log(`Option selected:`, selectedOption);
  };

  return (
    <Select
      options={options}
      onChange={handleChange}
    />
  );
}

export default App;

上記の例では、選択肢が変わるとhandleChangeという関数が実行され、選択された選択肢の情報がconsole.logにより表示されます。

以上がReact-SelectのonChangeイベントについての説明です。
onChangeイベントを使うことで、ユーザーが選択肢を変更したときの動作を自由に設定することができます。

React-Selectでデフォルト値(default value)を設定する方法

React-Selectでは選択肢の初期値としてデフォルト値を設定することが可能です。これにより、最初から特定の選択肢が選ばれた状態にすることができます。

デフォルト値とは

まず、デフォルト値とは何かを理解しましょう。デフォルト値とは、「初期設定値」を意味します。
React-Selectでは、ページをロードしたときに、あらかじめ選択されている選択肢を設定することができます。これをデフォルト値と言います。

デフォルト値の設定方法

次に具体的な設定方法を見ていきましょう。React-Selectでは、defaultValueプロパティを使ってデフォルト値を設定します。

import React from "react";
import Select from "react-select";

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

function App() {
  return (
    <Select
      defaultValue={options[0]}
      options={options}
    />
  );
}

export default App;

上記の例では、初期値としてoptionsの最初の要素（つまり、「Chocolate」）が選択された状態になっています。

複数選択時のデフォルト値の設定

また、複数選択可能な場合もデフォルト値を設定することができます。

import React from "react";
import Select from "react-select";

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

function App() {
  return (
    <Select
      defaultValue={[options[0], options[1]]}
      isMulti
      options={options}
    />
  );
}

export default App;

この例では、「Chocolate」と「Strawberry」がデフォルトで選択された状態になります。

これらの方法を使って、React-Selectのデフォルト値を設定することができます。

React-Selectでプレースホルダーを設定する方法

React-Selectでは、選択肢が未選択の状態で表示されるテキスト、つまり「プレースホルダー」を設定することが可能です。
プレースホルダーを利用すると、ユーザーに対してどのような選択肢を選ぶことが求められているのかを示す手助けをすることができます。

プレースホルダーとは

まず、プレースホルダーとは何かを説明しましょう。プレースホルダーとは、「場所を保つもの」を意味します。
フォームや選択肢などの初期表示時に、「ここに入力してください」や「選択してください」などのガイダンスのためのテキストを表示することができます。

プレースホルダーの設定方法

次に、React-Selectでプレースホルダーを設定する方法を見ていきましょう。以下はその一例です。

import React from "react";
import Select from "react-select";

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

function App() {
  return (
    <Select
      placeholder="Select your favorite flavor"
      options={options}
    />
  );
}

export default App;

この例では、選択肢が未選択の状態では「Select your favorite flavor」というテキストが表示されます。
ユーザーが選択肢を選ぶと、その選択肢のラベルに置き換えられます。

以上がReact-Selectのプレースホルダーの設定方法です。
これを利用すると、選択肢が未選択のときにどのような選択をすればよいのかをユーザーに示すことができます。

React-SelectとTypeScriptを一緒に使う方法

最後に、React-SelectをTypeScriptと一緒に使う方法を見ていきましょう。TypeScriptを利用することで、より安全にコードを書くことが可能になります。

TypeScriptとは

TypeScriptとは、JavaScriptに静的型付けとクラスベースのオブジェクト指向を追加したプログラミング言語です。
JavaScriptのスーパーセット（上位互換）であり、JavaScriptのコードはそのままTypeScriptとして動作します。

TypeScriptを利用することで、型の間違いによるバグを防ぐ、コードの自動補完を強化する、大規模なプロジェクトを管理しやすくするなどのメリットがあります。

React-SelectとTypeScriptの組み合わせ

React-SelectはTypeScriptを完全にサポートしています。そのため、TypeScriptを使ってReact-Selectのコンポーネントを安全に使用することができます。
以下に、React-SelectとTypeScriptを組み合わせた使用例を示します。

import React, { ChangeEvent } from "react";
import Select, { ValueType, ActionMeta } from "react-select";

interface OptionType {
  value: string;
  label: string;
}

const options: OptionType[] = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

function App() {
  const handleChange = (selectedOption: ValueType<OptionType>, actionMeta: ActionMeta<OptionType>) => {
    console.log(`Option selected:`, selectedOption);
  };

  return (
    <Select
      options={options}
      onChange={handleChange}
    />
  );
}

export default App;

この例では、選択肢の型をOptionTypeと定義し、それを元にReact-Selectを使用しています。
また、選択肢が変わった時に実行される関数も、引数の型を明示的に指定しています。

これにより、選択肢やハンドラー関数の引数の型が間違っていると、コンパイル時にエラーが出るため、バグの発見が容易になります。