azukiazusa.dev

Hey, I'm azukiazusa👋

週に1回 Web 開発に関する記事をお届けします。フロントエンドに関する分野の記事が中心です。

ブログを読む About me
#React
#アクセシビリティ
#AI
#HTML
#Next.js
#Jest
#MCP
#テスト
#Kubernetes
#OpenTelemetry
#Vitest
#Go
#Bun
#Server Actions
#Zod
#SvelteKit
#GitHub Actions
#playwright
#storybook
#msw
#Vite
#MongoDB
#claude-code
#A2A
#OpenAI
#書評
#React Server Components
#Hono
#AngularJS
#npm
#Rust
#セキュリティ
#Vuetify
#Mastra
#ESLint
#Prisma
#Open UI
#Web Components
#React Aria
#Chrome
#開発
#Tailwind CSS
#Remix
#Prometheus
#Cloudflare Workers
#pnpm
#Webpack
#Nuxt.js
#Docker
#nextjs
#vibe-coding
#AG-UI
#VoltAgent
#React Router
#Vercel
#Cloudflare
#ink
#llms.txt
#Baseline
#standard-schema
#パスキー
#WebAuthn
#Web Socket
#vlt
#OpenFeature
#axe-core
#Farm
#Effect-TS
#MistCSS
#Waku
#SafeTest
#設計
#Conform
#TypeSpec
#OpenAPI
#pagefind
#VSCode
#Git
#ElysiaJS
#モノレポ
#Promise
#WebAssembly
#WAI-ARIA
#superflare
#ChatGPT
#OGP
#ダークモード
#qwik-city
#qwik
#SanitizerAPI
#Fetch
#Histoire
#Yew
#マイクロフロントエンド
#html5
#Sentry
#IE11
#cypress
#Sass
#Kustomize

最新記事

値の補間計算を簡潔に記述できる CSS の `progress` 関数

CSS の `progress` 関数は、2 つの長さの値の間の進捗を計算するための数学関数です。流体タイポグラフィやレスポンシブなレイアウト調整に利用できます。流体タイポグラフィは `clamp` 関数を使用して実装することもできますが、`progress` 関数を使用することでより意図を明確に記述できます。この記事では、CSS の `progress` 関数の構文と使用例について解説します。

Claude Code の Hooks で作業が終わった後にフォーマッターを実行する

Claude Code hooks は Claude Code のライフサイクルの特定のタイミングで実行されるユーザー定義のシェルスクリプトです。hooks を使用することで、コードのフォーマットを常に実行することができます。この記事では hooks を使用してコードの変更後に prettier が実行されるように設定してみましょう。

ワンクリックで MCP サーバーをインストールする .dxt ファイル

Model Context Protocol (MCP) サーバーは LLM が外部のツールと対話するための標準的な方法ですが、インストールが複雑でハードル高いという課題があります。`.dxt` ファイルは MCP サーバーを簡単にインストールできるパッケージ形式です。これを使用することでユーザーはターミナルを操作したり JSON ファイルを編集することなく MCP サーバーを利用できるようになります。

すべての記事を見る
AI を使用してコードの生成を行う際、ある程度の時間待機する必要があります。その間ターミナルに張り付いて観察するのではなく、タスクが完了したタイミングで通知を受け取ることができれば、他の作業をしながら待機することができます。 Claude Code でタスクの完了を通知する方法を 3 つ紹介します。

Claude Code のタスクの完了を通知する方法

Vitest では `expectTypeOf` や `assetType` を使って型のテストを書くことができます。自作のユーティリティ型が期待する型を返すか検査したり、言語ファイルの JSON スキーマが同じ型を返すことを確認するなどに利用できます。

Vitest で型のテストを書く

Chrome Canary で CSS 関数のプロトタイプが実装されました。CSS Functions and Mixins Module という仕様に基づいて実装されており、`@function` ルールを使用して開発者が関数を定義できるようになります。

CSS で関数を定義できるようになる

`package.json` は JSON フォーマットのファイルであるため、コメントを書くことができません。`package.json` に定義したスクリプトの説明を書いておくことは重要です。別のファイルに説明を書いたり、`//` で始まるキーを使用してコメントを書くハックが生まれるなど、様々な方法が考案されていたのが思い出されます。

Bun v1.2 では package.json にコメントを書ける

TypeScript 5.8 で `erasableSyntaxOnly` フラグが追加される予定です。このフラグは `enum` や `namespace`、`Class Parameter properties` などの「消去可能ではない」構文をエラーとして検知するためのものです。

TypeScript 5.8 で追加される erasableSyntaxOnly フラグ

Node.js v23.6.0 から `--experimental-strip-types` フラグがデフォルトで有効になりました。これにより、Node.js でTypeScript を直接実行できるようになります。

Node.js で TypeScript を直接実行できるようになった

Testing Library では要素の取得に失敗した場合にレンダリングされた HTML がコンソールに表示されます。しかし、デフォルトで出力される行は 7000 に制限されているため目的の要素が表示される前に表示が終了してしまうことがしばしばあります。

Testing Library の debug で出力される行数を多くする方法

人為的な遅延を発生させるために、`setTimeout` を Promise をラップする方法がよく使われています。これにより、`await` を使って任意の秒数処理を遅らせることができます。

Node.js では標準モジュールで Promise timer が使える

ユーザーのカラーテーマの設定によりスタイルを変更するためには、`prefers-color-scheme` メディアクエリを使用することが一般的です。しかし、多くのウェブサイトでは OS の設定とは独立してカラースキーマを設定する機能が提供されています。この場合、`prefers-color-scheme` メディアクエリを使用せずに、`class` 属性を使ったスタイルの切り替えが行われます。

ユーザーのカラースキーマ設定を上書きする web preferences API の提案

JavaScript で配列にアクセスする際、配列の長さを超えるインデックスを指定すると `undefined` が返されることがあります。しかし、TypeScript の型定義上では、配列の長さを超えるインデックスを指定しても `undefined` 型が返されることはありません。これはランタイムエラーを引き起こす恐れがあります。

TypeScript で配列の要素を取得する時 `.at()` メソッドを使うとより安全

今までの React では `ref` をコンポーネントの Props として渡す際に、`forwardRef` を使ってラップする必要がありました。しかし、React v19 からは `forwardRef` が不要になり、`ref` を直接渡すことができるようになりました。

React v19 から forwardRef が不要になる

`Math.max()` は、引数に渡された数値のうち最大のものを返す JavaScript の組み込み関数です。この関数は任意の数の引数を受け取るので、配列最大値を求めたい場合にはスプレッド構文で展開して渡す使い方が一般的です。しかし、引数の数が多すぎるとエラーになることがあります。

Math.max() にスプレッド構文で大きな配列を渡すとエラーになる恐れがある

`::file-selector-button` 疑似要素を使用することで、`<input type="file">` 要素のデフォルトのボタンのスタイルをカスタマイズできます。現在すべてのモダンブラウザでサポートされています。

CSS でファイルのアップロードボタンをカスタマイズする ::file-selector-button 疑似要素

light-dark 関数は CSS のカラー関数で、引数に 2 つのカラー値を取り、ライトモードのときには 1 つ目の値をを、ダークモードのときには 1 つ目の値を返します。 `color-scheme` プロパティの値もしくはユーザーの OS のダークモード設定によって切り替わります。

CSS: ダークモードで値を切り替える light-dark 関数

従来までは、TypeScript で関数の引数の型を絞り込んだ結果を返す場合には、ユーザー定義型ガードとして `x is string` のような形式で型ガードを定義する必要がありました。TypeScript 5.5 では自動で型の絞り込みが推論されるようになります。

TypeScript 5.5 で関数による型の絞り込みが改善される

CSS のメディアクエリで比較演算子（`<`, `>`, `<=`, `>=`）が使えます。この記法を Range Syntax と呼びます。この記法は従来の `min-width` や `max-width` といった記法と比べて、より直感的に記述できるため便利です。

CSS メディアクエリで比較演算子が使える

`AbortController` は、fetch API でリクエストをキャンセルするためのオブジェクトです。`AbortController` は複数のリクエストを 1 度にキャンセルできます。

1 つの AbortController で複数の fetch をキャンセルできる

CSS の reverse 系の値とは、`flex-direction` の `row-reverse` や `column-reverse` などのことです。これらの値は、アクセシビリティの観点からできる限り使用を避けるべきです。

CSS の reverse 系の値は可能な限り使わない

npm は install の alias として isntall が用意されているので、typo して isntall と打ってもコマンドが実行されます。

npm は isntall でもコマンドを実行できる

clsx は、複数のクラス名を結合するための軽量ライブラリです。条件によってクラスを付け替えたり、グルーピングをする際に簡潔に記述できます。

クラス名の結合をする軽量ライブラリの clsx

人気記事

  1. Claude Code の Hooks で作業が終わった後にフォーマッターを実行する
  2. ワンクリックで MCP サーバーをインストールする .dxt ファイル
  3. MCP の Structured tool output を試してみる
  4. Claude Code でカスタムスラッシュコマンドを作成する
  5. バイブコーディングチュートリアル：Claude Code でカンバンアプリケーションを作成しよう
  6. Claude Code Action で Claude Code を GitHub に統合しよう
  7. コーディングエージェントの現状の整理とエンジニアの仕事の変化について
  8. Ink を使って CLI アプリを React で書く
  9. MCP サーバーの Streamable HTTP transport を試してみる
  10. コンテナ要素に基づく相対的な CSS の単位（cqw, cqh, cqi, cqb, cqmin, cqmax）

登壇資料

  1. 2025

  2. #さくらのAI Meetup vol.11「Agent2Agent（A2A）」

    A2A プロトコルを試してみる

    Google が開発しLinux Foundationに寄贈されたAgent2Agent（A2A）プロトコルについて、TypeScriptでの実装を通じて学ぶプレゼンテーションです。AIエージェント間の標準的な連携を可能にするA2Aプロト コルの基本概念から、エージェントカードの定義、タスク管理、JSON-RPC 2.0通信、そして公式JavaScript SDKやMastraフレームワークを使った実装例まで、包括的に解説します。

  3. Svelte Japan Online Meetup #6

    依存関係があるコンポーネントは Barrel ファイルでまとめよう

    依存関係があるコンポーネントとは、`<select>` と `<option>` のような関係性を指します。このようなコンポーネントは同時に使われることが前提であるため、利用者にそのことが伝わるようにする必要があります。この発表では Barrel ファイルを使って依存関係があるコンポーネントをまとめる方法について話します。

  4. 2024

  5. JSConf JP 2024

    UI 開発におけるヘッドレス UI ライブラリの重要性とデザインシステムへの取り入れ方

    昨今の Web 開発における UI はますます複雑化し、アクセシビリティの重要性が高まっています。ブラウザの標準機能だけでは実現できない複雑な UI を実装する際、アクセシビリティに関する誤った実装が原因で、ユーザー体験を損なう可能性があります。ヘッドレス UI ライブラリは、あらかじめアクセシビリティに配慮されたコンポーネントを提供することで、開発者がこれらの問題に悩まされることなく、高品質な UI を構築できるようになります。本セッションでは、ヘッドレス UI ライブラリを活用し、デザインシステムの一部として、アクセシブルでカスタマイズ可能な UI を構築する方法を紹介します。

すべての登壇資料を見る