宮水の日記

宮水の日記

主に書評や資格取得について記事を書いています。

React-Select【JSライブラリ1日1個】

JSライブラリを1日1つ紹介する

1日1つJSのライブラリを調べます。

① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する


本日は、React-Selectのドキュメントを読んで実際に業務で使っているところを調べました。

ドキュメント

今回読んだドキュメントはこちらです。
github.com

デモページをみてみる

今日はサクッと動かせるライブラリだったので、コードは省略してどんなオプションがあるのか色々眺めてみました。

デモのページをみてみると、選択されたオプションは選択肢に再度表示しない、という機能も簡単に作れちゃうようです。
react-select.com

特にお気に入りの機能はこちら...!!色もつけられるなんて...!!
https://react-select.com/home#Multi%20Select

jQueryでoption用の配列を渡した後の挙動で「input要素に入力を始めたら親カテゴリを選択、そのあとに上の親カテゴリ要素を見て次のselect boxで子カテゴリを選択肢の検索候補をだす」という機能を作ったことがあります。当時「これだ!」というオプションがなくてほとんど自前で書くことになってしまいました。

入力した値をイベントでいちいち拾って、都度サーバーに問い合わせてカテゴリを絞り込み、検索候補を出力するという地獄のようなコードを書いたことがあります。要素の取得とかが本当に地獄みたいなコードでした。今となっては、あのコードたちをReactで書けばもう少しスマートでわかりやすくて処理速度もAPIにしか依存しないみたいなコードが書けたのではないかと悔やまれます。

3行以内でまとめる

React-Selectを導入すると、

  • optionsに{value: hoge, lavel:hoge} という形のオブジェクトを渡すと素敵なselect boxができる。
  • propsを渡すだけで色をつけたり、タグ選択のようなUIも簡単に作ることができる。

フィードバック

react-select を作ったのはあの classnames の JedWatson さんですね。とても便利なライブラリだと思います。
しかし、このライブラリのメインのファイルを読んでみるとめちゃくちゃ量が多いということがわかると思います。中をざっとみるとUNSAFE_なメソッドが使われていたり、またIssueが1000件以上たまっていたりと、このライブラリの柔軟さが仇となってメンテナンスに苦労していそうな印象も否めません。
https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/Select.js

select要素のスタイルを変えるだけであれば、CSSだけでも十分かもしれません(これはIE9以前は難しかったのですがモダンブラウザでは大丈夫です)。 https://github.com/filamentgroup/select-css のようなselect要素用のCSSも人気のようです。selectのCSSスタイルはググるとたくさん出てくると思います。

react-selectのBack StoryはREADMEにReact Conf 2019へのリンクがあるので興味があればみてみると良いかもしれません。"ただのSelect Componentだよ、なんでみんな使うんだろうね?!"みたいな事を言ってたりしてなかなか面白いです。
https://www.youtube.com/watch?v=yS0jUnmBujE

ソフトウェア業界で有名なプレゼンテーションに "Simple Made Easy" というものがあります。Clojureを作ったRich Hickeyのプレゼンテーションです。かいつまむと、SimpleとEasyは違うもので、またSimpleであることは難しいが、SimpleによってEasyが導かれる、という話です。
http://boxofpapers.hatenablog.com/entry/simple_made_easy
https://www.infoq.com/presentations/Simple-Made-Easy/
(といいつつ実は僕もちゃんとこのプレゼンを視聴したことがないのであとでみておきます)
ところで英語を勉強するとこういう海外カンファレンスの動画とかも楽しめる(字幕つけると音がわからなくても意外と意味が取れます)ようになるので、ぜひ英語もがんばってみてください。世界が変わると思います。

react-select はもしかしたら、Easy だが Simple ではないライブラリの一例なのかもしれません。react-select に限らず、ライブラリを使うときには、自分が不必要に複雑なものを使おうとしていないか注意すると良いですね。

おや、こんなところにSimpleとEasyについての良いブログ記事がありますね・・・
https://ohbarye.hatenablog.jp/entry/2017/11/30/012726
以上です!