Web Worker を使ってみると数種類のメッセージをやり取りするときのペイロードの型安全性が気になったため、 Redux を使うときにお世話になっている TypeScript FSA を Web Worker に対して使ってみました。
いくつかの注意点はあれど、簡単に使ってみた感じでは問題なく動きました。
サンプルプログラムはこちらから。
IME 利用中のフィルタリングに Web Worker を活用する例
ギョーム中に思い浮かんだので構築してみました。
日本語メインの検索結果をリアルタイムにフィルタリングして表示するビューにおいて、 IME による変換中の振る舞いが気になっていました。
IME で変換中は漢字と仮名と全角英字が混ざるため、単純な実装では漢字へ変換し終えるまで有効な結果になりません。 Google 検索レベルに動くと快適です。
漢字と読み仮名を考慮した絞り込みでは文字列検索パターンが多くなることが予想され、大きなデータセットに対して UI スレッドで行うには速度面での心配があったため、 Web Worker を使って解決を試みました。
サンプルプログラムはこちらから（データの準備が必要です）。
react-portal-hint について
React 用のツールチップ・ポップオーバーライブラリを作っています。
React にはすでに React Tooltip や ReactPortal Tooltip 、 react-popover などのライブラリが存在していて使われています。それらの利点を組み合わせた上で、より「直感的に効率よく細やかに」記述・動作するライブラリを目指しています。
下のコマンドでインストールできます。デモページ
yarn add react-portal-hint |
（ React 16.8 以降を peerDependency にしています。）
TypeScript + create-react-app で eject せずツールを導入する
create-react-app は v2.1.0 で TypeScript を公式サポートしました！
ということで、悪名高き “eject” をせずにどこまで外部ツールを設定できるか挑戦してみました。
npm run eject をせず、また、 react-app-rewired / craco は使わないようにします。
もう一つの動機としては、私は Webpack が好きなので手で設定をしてしまうことが多いですが、他のメンバーが管理できる範囲に収めたほうが喜ばれそう、というのもあります。
サンプルプロジェクトはこちら。
TypeScript FSA での非同期処理
この記事では、 TypeScript FSA で非同期処理するときの知見を忘備録として載せます。
TypeScript FSA 自体は他の方の投稿のほうが詳しく紹介されているので、この記事ではニッチな部分をメインに取り上げて載せています。
サンプルプロジェクトはこちら。
TypeScript で React Redux connect を使うときの忘備録
この記事では、 TypeScript で React Redux の connect を使う際の知見を忘備録として載せます。
React Redux 自体は他の方の投稿のほうが詳しく紹介されているので、この記事では connect を使うときに型を何度も書かない方法と、 connect されたコンポーネントのテストについて書きます。
Preact Redux でも、型定義のバグが無ければ多分同じように使えます。
Python で gRPC の Metadata と Interceptor を使う
この記事では、前回（ Python で gRPC の単体テスト）に引き続き、 Python で gRPC を使う際の知見をご紹介します。
主に、メタデータとインターセプターの実装法と、そのテスト方法がメインになっています。
まだ experimental API だったり非 public クラスだったりしているので、公式のアナウンスがあるまではプロダクション利用は難しいようにも思いました。
wasm-bindgen で hyperapp を実装しようとした （墓標）
勉強を兼ねて hyperapp の関数を Rust + wasm-bindgen で実装して、 hyperapp の動作高速化を狙ったが、 WebAssembly の制約があり詰まってしまった。
寝る前に思いついて 4 時間だけやっただけなので回避策を見落としただけかもしれないし、 WebAssembly の進化で問題無くなるかもしれない。
yew (Rust) や asm-dom (C++) のように、すべてを wasm 内で実装するのは抵抗があった。
§react の高速化ができれば既存の資産を使いつつ高速化できるし、他にも超重量級コンポーネントだけを wasm 化する戦略を採れると思った。