La Verda Luno

「√（ルート）の法則」による情報浸透の数理的理解

2025-01-19T15:00:00.000Z

コミュニケーションにおいて「√（ルート）の法則」と紹介されているものがある。社長に必要な法則 - 日本経済新聞である。これを応用して情報浸透を数理的に捉え、いくつかのマネジメントのプラクティスを説明できるのではないかということでシミュレーションをしてみた。

Utility-first CSS の配置用ユーティリティだけ使う例

2022-02-27T13:35:01.000Z

遅ればせながらこの前の年末年始に Tailwind CSS と Chakra UI を触った。（月並みな感想だが） utility-first CSS は書きやすい一方、前者は class に書かれる多くのユーティリティによりノイズが多く見え、後者は別の機能が載りすぎて too much という印象を受けた。これらを眺めていると、全てのスタイルを class や Props に直接は書かなくても utility-first CSS の利点を生かせるのではないかと思い始めた。

この記事では、Tailwind CSS との互換機能を持つ Windi CSS¹ を利用しつつ、utility-first CSS におけるノイズの少ない表記法として、配置用ユーティリティだけ使う場合の例を示す。

Shadow DOM による境界で複数 UI システムを共存させる

2022-01-15T06:22:20.000Z

製品のフロントエンドで利用する「UI システム」を漸進的に移行していく際に役立ちそうな方法を思いついて組んでみた。残念ながら自分はこの方法は当面使わないことにしたので、ある種の小ネタ集として公開し、供養しておく。

イベントハンドラ Props は optional にする

2021-08-28T13:45:23.000Z

English version

イベントハンドラって渡されなくてもそのコンポーネントは困らないよなということで、React においてもタイトルの書き方をこれからはやっていきたいという気持ちを表明しておく。

View-Hook Pair によるバリエーションのあるコンポーネントの実装

2021-08-21T14:55:11.000Z

バリエーションのあるコンポーネントを素朴に実装すると、コンポーネント内が分岐だらけになったりコンポーネント間で重複コードまみれになったりして保守性が低下してしまう。その問題に対して View-Hook Pair ではどのように対処するかを示す。

aria-sort 属性によるソート中のテーブルのマークアップ

2021-07-09T13:02:00.000Z

表による一覧画面を実装する最中に思いついた小ネタを載せておく。aria-sort 属性を使ってテーブルのヘッダーをマークアップする。

フロントエンドではまずプレゼンテーション系を分離する

2021-05-29T08:25:39.000Z

ストアと呼ばれているものはリポジトリと "UI Store" に分割することができて、後者を含むプレゼンテーション系を最初に分割すると上手くいくだろう。

View-Hook Pair パターン（草案）

2021-02-14T05:29:49.000Z

大きい処理について、サーバーやツールではレイヤーや関心単位により比較的簡単に分割できるが、フロントエンドのコンポーネントでは別の難しい問題がある。それに対して View-Hook Pair と名付けた分割統治方法を（軽く）提案する。

技術系の境界線

2020-11-03T14:00:35.000Z

これは設計ナイト2020 の感想記事です。

CQRS と GraphQL の話が主な話題でしたが、ディスカッションなどで示唆に富む話を聞けたので、（レポートというよりも）考えたことを書き残しておきます。

発表内容についてはあまり書きませんが、すでに設計ナイト2020感想 - Qiita と設計ナイト2020に参加してきました。 | achanBlog という記事があります。 Q&A やディスカッションについても #sekkeinight 付きのツイートを見ると、何が交わされたか把握できると思います。

Template literal types で型上の簡易 Lisp パーサー

2020-09-07T15:34:51.000Z

Lisp,TypeScript,Template literal types,Parser

ドメインイベントを Generator で表現する

2020-08-09T13:09:00.000Z

ふと思いついたので書いた。

IDDD 本では Observer Pattern を使った基盤をドメインコードが利用しているが、これに似た機能を JavaScript の Generator/AsyncGenerator で再現してドメインイベントをより独立にする試み。

サンプルコードはこちらから。

ユーザーも DevOps の範疇だ

2020-07-26T08:13:50.000Z

春から新しい職場で働いているが、Web 系の仕事かつエンタープライズに近いという点は前の職場とも共通している（次を探すときも似た条件になるんだろう）。今の職場のリリースサイクルは速いので良いと思う。

働く中で「リリースしやすさ」についていろいろ思い浮かんだことがあるので、明文化して残しておこうと思う。

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

2020-07-19T11:42:32.000Z

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

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

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

TL;DR

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

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

2020-03-28T14:00:04.000Z

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

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

ソースはこちらから。

TypeScript 3.7 の Assertion Functions 注意点

2019-10-07T01:11:40.000Z

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 モードに対応してリニューアルした話

2019-08-25T04:29:04.000Z

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

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

fluent-react を試す

2019-05-17T11:44:23.000Z

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

認証用の Context を Hooks で

2019-04-30T13:42:49.000Z

React で認証用の Context を作れたら便利そうだなと思ったので、開発イメージを掴むために Hooks も活用して認証用のコードを書いてみました。

redux-dynamic-modules を使う

2019-04-27T05:01:14.000Z

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

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

EcmaScript の中の TypeScript

2019-04-06T13:17:52.000Z

Babel や ESLint による TypeScript サポートによって TypeScript の周辺ツール回りの環境が大きく変わり、 EcmaScript と TypeScript の境界は小さくなりました。そこで、ツールにサポートされた経緯の振り返りとツールの設定のおさらいをします。