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

2024-03-12

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

選択ボックス（セレクトボックス）をただ作るだけであれば簡単ですが、たとえば以下のような機能もつけるとなると少し大変ですよね。

選択肢を検索できる
選んだ複数の選択肢を表示させる
選択肢ごとに色を変える

そこで、React で選択ボックスを作る際に特に人気のライブラリが「React Select」です。

https://react-select.com/home

この記事では、React Select を使ったことがない人に向け、高機能かつスタイリッシュな選択ボックスを簡単に作る方法をご紹介します！

React Selectとは

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

この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を使用しています。
また、選択肢が変わった時に実行される関数も、引数の型を明示的に指定しています。

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