すべて

React.memo でメモ化したコンポーネントはモック関数が使えない

テストにおいて子コンポーネントをモックしたい場合には通常のテストと同様に jest.mock() を使います。しかし、React.memo() でメモ化したコンポーネントはモック自体には成功するものの、mockImplementation

Document Picture in Picture で任意の要素を Picture in Picture する

Document Picture-in-Picture は、`` 要素に限らず任意の要素を PiP できるようにする提案です。これにより、動画以外の要素を PiP できるようになります。主なユースケースとして、カスタムのメディア・コントロー

azukiazusa のテックブログ2

スナップショットテストとアサーションテスト

この記事では、スナップショットテストとアサーションテストの違いを説明します。また、それぞれのアプローチでテストを書いたときのメリットとデメリットを見ていき、どちらのアプローチを採用すべきか考えていきます。

azukiazusa のテックブログ2

pnpm でパッケージにパッチを当てる

`pnpm patch` コマンドを使うと、依存パッケージのコードを直接書き換えることができます。

azukiazusa のテックブログ2

aria-label を使いすぎない

aria-label 属性はコンテンツに対してアクセシブルな名前を与えるために使用します。aria-label 属性を使用する代表例として、中身がアイコンのボタンがあげられます。aria-label 属性は手軽に使えますが、できる限り一般的

azukiazusa のテックブログ2

スクリーンリーダーに配慮したテキスト表記

文字を機械的に判断するスクリーンリーダーでは、人間の目によって判断できる文字について異なる解釈をするおそれがあります。そのような場合、利用者に正しい文章の意図を伝えられません。スクリーンリーダーに配慮したテキストの表記法を紹介します。

blog.jxck.io

Cookie Store API による document.cookie の改善

JS から Cookie を操作する document.cookie の改善を目的とした Cookie Store API についてまとめる。

azukiazusa のテックブログ2

ポップオーバー API で JavaScript を使わずにポップアップを表示する

Chrome 114 から追加されたポップオーバー API を使うと、JavaScript を使わずに簡単にポップアップを表示することができます。

azukiazusa のテックブログ2

Vue.js でジェネリックコンポーネントを使う

Vue.js 3.3 から `` 構文を使用してコンポーネントを記述する際に、型引数を指定することができるようになりました。TypeScript で関数に型引数を指定するのと同じように、コンポーネントの props の型を指定することができ

blog.jxck.io

AbortSignal.any(), AbortSignal.timeout(), そして addEventListener() の Signal

最近 AbortSignal.any() が提案され、急速に実装が進んでいる。すでに定義されている AbortSignal.timeout() や addEventListener() への Signal なども含め、非同期処理の中断を実装

azukiazusa のテックブログ2

GIF アニメーションの使用を控える

技術記事を書く際に、GIF アニメーションを使用することがあるかと思います。しかし、GIF アニメーションを使用することはアクセシビリティ上問題となります。この記事では、GIF アニメーションを使用することを避けるべき理由を説明します。

blog.jxck.io

URL バーの表示の変遷

ついに URL バーから EV 証明書の組織表示が消されるアナウンスが、Chrome から発表された。思えば、URL バーの見た目も、だいぶ変わってきたように思う。URL バーの表示の変遷を一度まとめておく。

stin's Blog

localStorage に同期する React State を作るカスタムフック

React の useState と似た使い方で localStorage に保存されるカスタムフック useLocalStorage の実装を紹介します。このブログサイトのソースコードで使用しています。 react-use に同じ目的同じ

azukiazusa のテックブログ2

list-style: none スタイルを指定した ul 要素には list ロールを指定すべき

WAI-ARIA における role 属性を使用する際のプラクティスとして、暗黙のロールを明示しないというものがあります。しかし、` ` 要素は暗黙のロールとして `list` ロールを持っていますが、明示的に `list` ロールを宣言す

blog.jxck.io

IETF RFC における ABNF と Parsing Algorithm の関係

HTTPBis では、RFC 8941: Structured Field Values (以下 SFV) の更新作業が行われている。RFC 8941: Structured Field Values for HTTPhttps://www

stin's Blog

ブログサイトを Next.js App Router に移行したので学びを書く

このサイトを Next.js App Router で実装し直しました。Server Components が扱えてなんか便利なやつです。移行にあたって学んだことや App Router の嬉しいポイントなどを書いておきます。スタイリン

azukiazusa のテックブログ2

Vitest のブラウザテスト

Vitest は実験的な機能として、ブラウザモードをサポートしています。ブラウザテストは Node.js 上で jsdom を用いてテストを実効するよりも信頼性の高い方法ですが、テストのセットアップに時間がかかるといったデメリットも存在しま

azukiazusa のテックブログ2

Next.js の Server Actions について

Next.js の Server Actions はサーバーサイドのデータのミューテーション、クライアント JavaScript の削減、プログレッシブエンハンスメントなフォームを実現します。

blog.jxck.io

技術書籍をシンタックスハイライトする話

「連載するけど、代わりにコードはハイライトさせてほしい」それが Web+DB Press 編集長に俺が出した条件だった。

azukiazusa のテックブログ2

SvelteKit のフォーム操作

SvelteKit のフォームは Web 標準の機能のみで完結しています。つまり、クライアントサイドでは JavaScript を一切使用せずにサーバーにデータを送信できるのです。さらに、JavaScript を利用できる環境であるならばリ