fluent-react を試す

Tech
Comments Share

Fluent が発表されてその説明を読んでいると React 用のバインディングがあることがわかります。
大規模開発の関心事（苦労）の一つとしてローカライゼーションがあり、それらがどういう思想・ API になっているか気になったので調査してみました。

Read More

redux-dynamic-modules を使う

Tech
Comments Share

Redux の Code-Splitting は実現するのは面倒臭そうだしバグもたくさん踏みそうだなと思っていたら redux-dynamic-modules という良いライブラリを見つけたので試してみました。
紹介するために触っていても非常に良いライブラリという感触だったので、これで大規模開発でも Code-Splitting による パフォーマンス維持を頑張っていけそうです。

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

Read More

EcmaScript の中の TypeScript

Tech
Comments Share

ここ最近に発表された、 Babel や ESLint による TypeScript サポートによって、 TypeScript の周辺ツール回りの環境が大きく変わりました。 EcmaScript と TypeScript の境界はどんどん小さくなり、 TypeScript の理念を推し進めています。

そこで、ツールにサポートされた経緯の振り返りと、ツールの設定を再確認していきます。それぞれのツールの詳細は、検索して出てくる記事のほうが正確で詳しいため、そちらを御覧ください。
設定例のプロジェクトはこちらです。

Read More

babel-plugin-remove-test-code について

Tech
Comments Share

テストコード（と思われるもの）を消す Babel Plugin を作りました。
これを使うと ES/TS においてもこのようなスタイルで書けます。

1
2
3
4
5
6
7
function foo() { return 1; }

export default foo;

it("???", () => {
  expect(foo()).toBe(1);
});

プラグインは次のコマンドでインストールできます。

yarn add -D babel-plugin-remove-test-code

ツールというよりもコンセプトという感じです。実際に Jest では import したファイルにテストコードがあると実行してしまう仕様があり、多重実行してしまうところがあります。

続きには経緯を書いてあります。

Read More

Web Worker と TypeScript FSA

Tech
Comments Share

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

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

Read More

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

Tech
Comments Share

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

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

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

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

Read More

react-portal-hint について

Tech
Comments Share

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

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

yarn add react-portal-hint

（ React 16.8 以降を peerDependency にしています。）

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

Tech
Comments Share

create-react-app は v2.1.0 で TypeScript を公式サポートしました！

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

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

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

Read More

TypeScript FSA での非同期処理

Tech
Comments Share

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

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

Read More