5 種の記号だけで JavaScript(w/ pipeline operator) を書く

JavaScript は 6 種の記号だけで処理を書ける言語であることは知られており、JSFuckがその実装として有名だ。 Xchars.js本格JavaScript記号プログラミング 6種類の記号だけでJavaScriptを書こう - Qiita もこの理由を学ぶ上で参考になる。
しかし、[]()!+[]()=+ などのバリエーションはあれど 6 種よりも少ない種類の記号で書く方法は今まで見つかっていない。(DOM を使えば可能らしいが。)

もし、現在提案中のパイプライン演算子 が正式に採用されれば、[]|>+ という記号 5 種の組み合わせで書けるようになる。その「トランスパイラ」やアイデアは Xchars.js5文字で書くJavaScript(スライド) で触れられている。

この記事は、本格JavaScript記号プログラミング 6種類の記号だけでJavaScriptを書こう - Qiita の説明手順を参考にし、 5 種の記号で JavaScript のコードを書くための要素についてまとめている。

TL;DR

関数実行を担っていた ()|> で置き換え、 truefalse を得るための !=> で置き換える。

Read More

Row Level Security による素朴なマルチテナント実装

引き続き(しばらくは) SaaS 開発をやっていくことになったので、フロントエンドエンジニアではあるが SaaS バックエンドについても知見を持っておこうとしている。前々からの懸念・課題としてマルチテナントの DB をどう安全に実現するかというものがあったため、それを調べることにした。

この記事では、あくまで具体的な動く例を元に解説を加えているだけなので、軽く知りたい方や実例・ストーリーを求める方は記事最後の参照記事を見るだけで十分かもしれない。

ソースはこちらから

Read More

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 を使ってトリッキーなことをしようとして阻まれたわけですが、日本語の記事により救われる時間があると思ったので紹介します。

Read More

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

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

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

Read More

fluent-react を試す

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

Read More

redux-dynamic-modules を使う

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

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

Read More

EcmaScript の中の TypeScript

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

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

Read More

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

テストコード(と思われるもの)を消す 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

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

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

Read More