Chrome の挙動を見てみる 百聞は一見に如かずと言いますので、実際の挙動を見てみます。以下の図では、text-align: justify を指定したテキストボックスに対し、上段には space-first を、下段には従来の挙動である space-all を設定しています。上段は下段に比べて、自然な組版が実現されていることが見て取れます。 文章は 京葉線 - Wikipedia を改変して使用。CC BY-SA 画像からは、以下の挙動が確認できます。 行頭の括弧（橙色） 1 行目のみアキが残り、2 行目以降は行頭のアキが詰まる（space-first であるため） 連続する約物（ピンク色、青色、緑色） 読点→句点、閉じ括弧→閉じ括弧ではアキなし、中黒→括弧、閉じ括弧→開き括弧では二分（1/2）–全角程度のアキに調整される 行末の閉じ括弧（青色） 必要に応じて行末のアキが詰まる 行末の

TypeScriptのコードでは、export {}; という記述を見かけることがあります。これはECMAScriptの構文ではあるものの、これが使われる背景にはTypeScript特有の事情があります。この記事では、export {}; がなぜ使われるのか、どのような効果があるのかを解説します。 export {}; とは この構文は、exportというキーワードから分かるように、モジュールに関連する構文です。 一般に、export { ... };という構文は、既存の変数をモジュールからエクスポートするために使われます。例えば、次のようなコードが考えられます。 const foo = 42; const bar = "hello"; const banana = "banana"; export { foo, bar as hello, banana as "🍌", }; 変数をエク

最近久しぶりに React Router を使う機会があった。 SSR不要な要件だったのでNext.jsではなく Vite を選んだら、ルーターが必要となり React Router を選定した。 React Router は Remix との統合もある通り、もはやただのルーターではなく、fetch や form action までもサポートされている。 採用にあたって考えるのはどこまで React Router の機能を使うかだ。 自分は router が欲しくて入れるので fetcher や action は不要だ。 一方で React Router を FW と考えると FW の標準に乗るのは自然な発想にも思える。 今回、React Router の機能に寄せて開発してみて、この機能使う・この機能使わないという土地勘ができたのでメモをしておく。 router ルーターライブラリなので