引き続き（しばらくは） SaaS 開発をやっていくことになったので、フロントエンドエンジニアではあるが SaaS バックエンドについても知見を持っておこうとしている。前々からの懸念・課題としてマルチテナントの DB をどう安全に実現するかというものがあったため、それを調べることにした。
この記事では、あくまで具体的な動く例を元に解説を加えているだけなので、軽く知りたい方や実例・ストーリーを求める方は記事最後の参照記事を見るだけで十分かもしれない。
ソースはこちらから。
TypeScript 3.7 の Assertion Functions 注意点
Announcing TypeScript 3.7 Beta に “Optional Chaining” と “Nullish Coalescing” という待望の機能とともに “Assertion Functions” が登場しています。
これは従来からある User-Defined Type Guard と似ていて、こちらは条件に合わない場合に例外を投げるような、別言語での assert 構文・関数と似たものを TypeScript のフロー解析に入れる機能追加です。
Assertion Functions については TypeScript 3.7の asserts x is T 型はどのように危険なのか が全体的に詳しいです。
この投稿の本題は、それの制約に関するメモです。 Assertion Functions を使ってトリッキーなことをしようとして阻まれたわけですが、日本語の記事により救われる時間があると思ったので紹介します。
インデックスページを Light モード Dark モードに対応してリニューアルした話
Chrome 76 で prefers-color-scheme という Media Query が実装されるのに合わせ、 MasuqaT.NET のトップページ に Light モードと Dark モードの両方に対応したページにリニューアルしました。
最初から 2 モードを考慮してデザインする時に何を気にしたか・どう実装したかを手前味噌ながら載せておきます。私はデザイナさんではないので、エンジニアの趣味ページ・アプリ作成という文脈です。
redux-dynamic-modules を使う
Redux の Code-Splitting は実現するのは面倒臭そうだしバグもたくさん踏みそうだなと思っていたら redux-dynamic-modules という良いライブラリを見つけたので試してみました。
紹介するために触っていても非常に良いライブラリという感触だったので、これで大規模開発でも Code-Splitting による パフォーマンス維持を頑張っていけそうです。
babel-plugin-remove-test-code について
テストコード（と思われるもの）を消す Babel Plugin を作りました。
これを使うと ES/TS においてもこのようなスタイルで書けます。
1 | function foo() { return 1; } |
プラグインは次のコマンドでインストールできます。
yarn add -D babel-plugin-remove-test-code |
ツールというよりもコンセプトという感じです。実際に Jest では import したファイルにテストコードがあると実行してしまう仕様があり、多重実行してしまうところがあります。
続きには経緯を書いてあります。
IME 利用中のフィルタリングに Web Worker を活用する例
ギョーム中に思い浮かんだので構築してみました。
日本語メインの検索結果をリアルタイムにフィルタリングして表示するビューにおいて、 IME による変換中の振る舞いが気になっていました。
IME で変換中は漢字と仮名と全角英字が混ざるため、単純な実装では漢字へ変換し終えるまで有効な結果になりません。 Google 検索レベルに動くと快適です。
漢字と読み仮名を考慮した絞り込みでは文字列検索パターンが多くなることが予想され、大きなデータセットに対して UI スレッドで行うには速度面での心配があったため、 Web Worker を使って解決を試みました。
サンプルプログラムはこちらから（データの準備が必要です）。