インデックスページを Light モード Dark モードに対応してリニューアルした話

Tech
Comments Share

Chrome 76 で prefers-color-scheme という Media Query が実装されるのに合わせ、 MasuqaT.NET のトップページ に Light モードと Dark モードの両方に対応したページにリニューアルしました。

最初から 2 モードを考慮してデザインする時に何を気にしたか・どう実装したかを手前味噌ながら載せておきます。私はデザイナさんではないので、エンジニアの趣味ページ・アプリ作成という文脈です。

Read More

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