OITA: Oika's Information Technological Activities

@oika 情報技術的活動日誌。

react-select:React Testing Library で optionのリストを拾う

React Testing LibraryReact Select をどうやってテストするんだってのはFAQらしく、Stack Overflowではサードパーティの部品までテストすんなMock使えというのがベストアンサーだったりして、まあそうかもねと思いつつも、ほじくってテスト書いたのでメモ。

React Select ではドロップダウンが閉じた状態ではoption要素がDOMに存在しないので、わざわざ↓キー入力してドロップダウンを開いてからクエリをかけるようなことをやりました。

続きを読む

react-select:インクリメンタル検索で一致部分を強調表示

f:id:kd1:20210503152503p:plain

インクリメンタル検索で、入力と一致した部分文字列をハイライトする。
というのを、React Selectを使ってやる。
基本的には公式APIドキュメントを読んでいけば書いてあるはずの話だが、カスタムコンポーネントの部分はちょっとつまづいたのでメモ。

続きを読む

2020年に触れた技術の雑感(TypeScript/React/Java/WPF/etc.)

2020年も残り数日。
昨年に続き今年もいろいろ環境が変わり、ちょっと開発は離れめだった昨年に比べると、今年はがっつりコードを書く時間も増えた。
初めて使った技術もそこそこあり、また改めてこれまで使ってきた技術を見直すきっかけにもなったので、取り留めなく書き残しておきたい。

続きを読む

react-color:標準 Component のスタイルをいじる

React Colorの話。
このライブラリには最初から ChromePicker とか GithubPicker とか TwitterPicker とか、いい感じの部品が用意されている。

これらの部品は実は外からでもスタイルをいじれるんだけど、公式ドキュメントではそこを教えてくれず、CustomPicker 作ってねとしか書いてない。
ソース見りゃわかるだろってことかもしれないが、書いておきます。
確認したバージョンは v2.19.3。

続きを読む

Pandocで、Markdownからいい感じのhtmlへ一発変換するコマンドを作る

作業マシンが変わるたびに毎回同じものを作ってる気がするので、メモしておく。

我々はすべてのドキュメントをプレーンテキストで、つまりMarkdownで書きたいが、人は必ずしもそうではない。
折り合いをつけるためには、読めないからWordで書いてくれと言われてしまう前に、いい感じのアウトプットを出さねばならない。
ここでは html ファイルへのコンバートを考える。

md → html の変換は Pandoc を使えば簡単だが、毎回コマンド一発で使えるようにしておくにはちょっと準備が必要。

続きを読む