はじめに

今回は、Reactを学ぶ中で「どうやって使えばいいのか...？！」と感じたReact-Selectについて記事として整理していきます。

公式ドキュメント

正直、フロントエンドについては苦手意識があり、まだまだ勉強が必要だと感じているので、簡単なコードを紹介しながら自分の理解を深めていきます。

内容については、自分改め初学者向けとなっていますので、温かい目で見守っていただければ幸いです...！！

書こうと思ったきっかけ

フロントエンド（主にReact）を勉強する中で、正直よくわからないことが多くて困っています...（難しい！！！！）。

自分自身AWSやインフラ周りはすごく好きですが、デザイン含めてフロントエンド周りは、積極的にアウトプット中心で自分自身の理解を深めていく必要があるとつくづく感じています（つまり、苦手...）。

それに加えて、公式ドキュメントを読む力を鍛えないといけないと以前から思っていたので、まずは簡単な「React-Select」について手を動かしながらまとめていきます。

React-Selectとは？

React-Selectは、Reactで使えるセレクト（選択）入力UIを簡単に作れるライブラリです。以下のような機能を持っています：

複数選択（multi-select）
オートコンプリート（入力補完）
非同期検索（API連携）
新しい項目の作成（creatable）
カスタムスタイルの適用

参考文献

実際のコード

手順（Create React Appを使う）

① 新しいReactアプリを作成

npx create-react-app my-react-select-app
cd my-react-select-app

my-react-select-app はプロジェクト名。好きな名前に変えてOKです！

こんな感じで問題なくプロジェクトが作成されました！

② React-Select をインストール

npm install react-select

こちらも問題なく導入することができました！

③ App.js（または App.tsx）を書き換える

以下のように編集します：

// src/App.js

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

const options = [
  { value: 'apple', label: '頑張れ！🔥' },
  { value: 'banana', label: 'もっと頑張れ！🥶' },
  { value: 'orange', label: 'ほどほどにね〜😆' },
];

function App() {
  return (
    <div style={{ width: '300px', margin: '50px auto' }}>
      <h2>月曜日疲れましたね...</h2>
      <Select options={options} />
    </div>
  );
}

export default App;

④ アプリを起動する

npm start

自動でブラウザが開き、http://localhost:3000 に表示されます。セレクトボックスが動作するか確認できます。

いい感じに表示されました！（月曜日疲れましたね...^^;）

まとめ

ここまで読んでいただき、ありがとうございました！

React-Selectは、Reactの中でもとても便利なUIコンポーネントの1つです。特にセレクトボックスを簡単に導入したいときにとても役立つと感じました！

最初は「なんだこれ？」と思った自分でも、実際に動かしてみることで理解が深まりました。今後は、非同期検索や新しい項目の作成など、より応用的な使い方にも挑戦していきたいと思います！（Reactと仲良くなりたい...）