Web Worker と TypeScript FSA

Web Worker を使ってみると数種類のメッセージをやり取りするときのペイロードの型安全性が気になったため、 Redux を使うときにお世話になっている TypeScript FSA を Web Worker に対して使ってみました。
いくつかの注意点はあれど、簡単に使ってみた感じでは問題なく動きました。

サンプルプログラムはこちらから

Read More

IME 利用中のフィルタリングに Web Worker を活用する例

ギョーム中に思い浮かんだので構築してみました。

日本語メインの検索結果をリアルタイムにフィルタリングして表示するビューにおいて、 IME による変換中の振る舞いが気になっていました。
IME で変換中は漢字と仮名と全角英字が混ざるため、単純な実装では漢字へ変換し終えるまで有効な結果になりません。 Google 検索レベルに動くと快適です。

漢字と読み仮名を考慮した絞り込みでは文字列検索パターンが多くなることが予想され、大きなデータセットに対して UI スレッドで行うには速度面での心配があったため、 Web Worker を使って解決を試みました。

サンプルプログラムはこちらから(データの準備が必要です)。

Read More

react-portal-hint について

React 用のツールチップ・ポップオーバーライブラリを作っています。
React にはすでに React TooltipReactPortal Tooltipreact-popover などのライブラリが存在していて使われています。それらの利点を組み合わせた上で、より「直感的に効率よく細やかに」記述・動作するライブラリを目指しています。

下のコマンドでインストールできます。デモページ

yarn add react-portal-hint

( React 16.8 以降を peerDependency にしています。)

TypeScript + create-react-app で eject せずツールを導入する

create-react-appv2.1.0 で TypeScript を公式サポートしました!

ということで、悪名高き “eject” をせずにどこまで外部ツールを設定できるか挑戦してみました。
npm run eject をせず、また、 react-app-rewired / craco は使わないようにします。

もう一つの動機としては、私は Webpack が好きなので手で設定をしてしまうことが多いですが、他のメンバーが管理できる範囲に収めたほうが喜ばれそう、というのもあります。

サンプルプロジェクトはこちら

Read More

TypeScript FSA での非同期処理

この記事では、 TypeScript FSA で非同期処理するときの知見を忘備録として載せます。

TypeScript FSA 自体は他の方の投稿のほうが詳しく紹介されているので、この記事ではニッチな部分をメインに取り上げて載せています。
サンプルプロジェクトはこちら

Read More

TypeScript で React Redux connect を使うときの忘備録

この記事では、 TypeScript で React Reduxconnect を使う際の知見を忘備録として載せます。

React Redux 自体は他の方の投稿のほうが詳しく紹介されているので、この記事では connect を使うときに型を何度も書かない方法と、 connect されたコンポーネントのテストについて書きます。
Preact Redux でも、型定義のバグが無ければ多分同じように使えます。

Read More

Python で gRPC の Metadata と Interceptor を使う

この記事では、前回( Python で gRPC の単体テスト)に引き続き、 Python で gRPC を使う際の知見をご紹介します。

主に、メタデータとインターセプターの実装法と、そのテスト方法がメインになっています。
まだ experimental API だったり非 public クラスだったりしているので、公式のアナウンスがあるまではプロダクション利用は難しいようにも思いました。

Read More

WebAssembly 関数に JavaScript のクロージャを擬似的に渡す in Rust

現状の WebAssembly の仕様では JavaScript の関数は Rust へと直接渡せないということなので、効率は悪いですが一つの回避策を考えてみました。
仲介役を JavaScript 側に立たせ、 JavaScript 側ではほぼ任意なインターフェース、 Rust 側では固定的なインターフェースにします。
現状では実用的ではないレベルですが、どうしても避けられない場合はこうしてみるのがいいかもしれません。

もっと使いやすいやり方ができるようになるといいのですが。。。

サンプルプロジェクトはこちら

Read More

wasm-bindgen で hyperapp を実装しようとした (墓標)

勉強を兼ねて hyperapp の関数を Rust + wasm-bindgen で実装して、 hyperapp の動作高速化を狙ったが、 WebAssembly の制約があり詰まってしまった。
寝る前に思いついて 4 時間だけやっただけなので回避策を見落としただけかもしれないし、 WebAssembly の進化で問題無くなるかもしれない。

yew (Rust) や asm-dom (C++) のように、すべてを wasm 内で実装するのは抵抗があった。
(P)react の高速化ができれば既存の資産を使いつつ高速化できるし、他にも超重量級コンポーネントだけを wasm 化する戦略を採れると思った。

Read More

node-java でリフレクションする

Node スクリプトから( jar にある)Java 実装の情報を集めたい。

Node から Java を操りたい人向けのライブラリがなぜか存在している。 node-java
インストール方法は特に説明しないが、私は “node-gyp” でコケたので “windows-build-tools” を使ってインストールできた。

JavaScript から Java を動かす、と言うと、ややこしい。

Read More