選択ボックス(セレクトボックス)をただ作るだけであれば簡単ですが、たとえば以下のような機能もつけるとなると少し大変ですよね。
- 選択肢を検索できる
- 選んだ複数の選択肢を表示させる
- 選択肢ごとに色を変える
そこで、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を使用しています。
また、選択肢が変わった時に実行される関数も、引数の型を明示的に指定しています。
これにより、選択肢やハンドラー関数の引数の型が間違っていると、コンパイル時にエラーが出るため、バグの発見が容易になります。
転職のためにReactを学ぶならプログラミングスクールがおすすめ
React には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。
- Reactエンジニアとして活躍するために何をすればいい?
- 何から勉強すればいいんだろう?
- 絶対に転職を成功させるには?
そんな方は、転職サポートまでおまかせできるプログラミングスクールも検討してみてもいいかもしれませんね。
無料で体験レッスンを1週間受けられるスクールや、給付金により実質15万円以下で6ヶ月も学べるスクールもありますので、まずは気軽に無料カウンセリングを受けてみてはいかがでしょうか?