azukiazusa.dev

Hey, I'm azukiazusa👋

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

ブログを読む About me

最新記事

Zod を使って OpenAI の構造化された出力を扱う

OpenAI の gpt-4o-2024-08-06 以降のモデルではパラメータとして JSON Schema を指定することで構造化された出力をサポートしています。Node.js 向けの OpenAI SDK では Zod を使ってスキーマを定義し、構造化された出力を扱うことができます。この記事では実際に Zod を使って OpenAI の構造化された出力を扱う方法を紹介します。

アクセシビリティツリーを比較する Playwright の Aria snapshots がよさそう

Playwright の Aria snapshots はアクセシビリティツリーを比較することでテストする手法です。アクセシビリティツリーは DOM のスナップショットテストと比較して、外部から見た振る舞いが変わりづらいという利点があります。`.toMatchAriaSnapshot()` メソッドを使ってアクセシビリティツリーのスナップショットテストを行うことができます。

すべての記事を見る
人為的な遅延を発生させるために、`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

いつの時代にも z-index の管理には頭を悩ませます。z-index の値には 1 以外の値を許可しないなどの管理方法がありますが、外部のライブラリを使用してる場合に勝つことができません。 そこで　z-index の値に `calc(infinity)` を指定すると、絶対に最前面に表示させることができます。

CSS で絶対に最前面に表示したい要素には z-index:calc(infinity) を指定する

commonjs では `__dirname` と `__filename` でファイルのパスを取得できますが ES Modules では使えません。 今まで同等の API が存在していなかったのですが、Node.js v20.11.0 で `import.meta.dirname` と `import.meta.filename` が追加されました。

Node.js esm の dirname と filename

Mock Service Worke（MSW） v2 では　Web 標準の Fetch API をサポートしました。

MSW v2 では　Web 標準の Fetch API をサポート

すべての文字列を受け入れつつ、特定の文字列のみを補完候補に表示させたい場合があります。例えば、CSS の色を指定するプロパティの値には、カラーコードで指定する `#000000` や `#ffffff` などの文字列を受け入れつつ、`red` や `blue` などの特定の文字列を指定します。

TypeScript で任意の文字列を受け取りつつエディタの補完を効かせる型

プリミティブな UI を構築するとき、button や input などの HTML 要素をラップしたコンポーネントを作成することがあります。このようなコンポーネントでは、HTML 要素の Props に加えて、コンポーネント固有の Props を定義することが多いです。

React でコンポーネントの Props の型を取得する

Object.groupBy 静的メソッドは、ES2024 で追加された配列をグループ化する関数です。配列の各要素に対してグループ化のキーを指定することで、グループ化されたオブジェクトを返します。

配列をグループ化する Object.groupBy 静的メソッド

TailwindCSS で長いテキストを省略するときには、`truncate` クラスを使用します。しかし、`truncate` クラスは 1 行のテキストにしか対応していません。

TailwindCSS で複数行のテキストを省略するとき

人気記事

  1. Tailwind CSS v4 で導入される CSS First Configurations
  2. JavaScript でスタイルシートを構築する CSSStyleSheet
  3. Svelte v5 で導入された Runes によるリアクティビティシステム
  4. コンテナ要素に基づく相対的な CSS の単位（cqw, cqh, cqi, cqb, cqmin, cqmax）
  5. Remix の SPA モード
  6. Tailwind CSS を使う時に一緒に入れたいライブラリ
  7. HTML 標準でコンボボックスを実現する `<combobox>` 要素の提案
  8. アクセシビリティツリーを比較する Playwright の Aria snapshots がよさそう
  9. React Hook Form で Zod を使う時の 5 つパターン
  10. Storybook と Vitest の統合したコンポーネントテスト

登壇資料

  1. JSConf JP 2024

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

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

  2. 各社の事例から学ぶウェブアクセシビリティ 〜フロントエンドの最前線〜

    チームで開発する際にアクセシビリティを保つ施策

    この発表はすでにアクセシビリティに興味を持っていて、ソフトウェア開発の現場にアクセシビリティを取り入れたい人を対象としています。開発チーム全体でアクセシビリティに意識を持つ状態が理想ですが、全員が詳細な実装を行うのは実際には難しいでしょう。そこで、特に意識をせずともある程度のアクセシビリティを保つ状態にするための施策について紹介いたします。

  3. Svelte Japan Online Meetup #3

    よりシンプルになる Svelte の世界

    Svelte は記述量が少なくシンプルなコードで書けることが特徴の 1 つでした。しかし、アプリケーションの規模が大きくなるにつれて学習コストや認知負荷が増加していくという課題が浮上してきました。Svelte v5 で導入される Rune は今までの Svelte のコンセプトを覆し、よりシンプルになることを目指しています。このトークでは Svelte v5 の新機能を通じて Svelte の書き方がどのように変わるのかについて話します。

  4. アプリケーション開発エンジニア勉強会〜各社の取り組みや課題から学ぶ会〜

    React フレームワークの 動向と選定基準

    まずはじめ React に焦点を置き、昨今のフロントエンドでどのようなフレームワークが選択肢にあげられるのかについて紹介します。続いて、技術選定を行う際に、どのようなことを考えるべきかについて話します。最後にこれまで話した点を踏まえて、私が実際に技術選定を行った際にどのような選択をしたのか実践的な内容について触れたいと思います。

  5. OpenTelemetry Casual Talk - コンセプトのおさらいと実践入門！

    OpenTelemetry のサービスという概念について

    OpenTelemetry には Semantic Conventions と呼ばれる規約で service という属性が定義されています。service はメトリックが計装されたアプリケーションの名前やバージョンを表します。特に、service.name と呼ばれる属性の重要性について話します。

  6. JSConf JP 2023

    JavaScript なしで動作するモダンなコードの書き方

    Next.js、Remix、SvelteKit といった近年のフレームワークは、JavaScript がなくても動作することを一つの価値として提供しています。例えばSvelteKit のフォームではプログレッシブエンハンスメントとして、JavaScript が利用できる環境ではリッチなユーザー体験を提供しつつ、JavaScript が使えない環境においては HTML のフォームとして振る舞うことでアプリケーションの機能を変わらず提供できます。 React Server Component はサーバー側で HTML に変換されるため、クライアントに JavaScript のコードが配信されることはありません。React Server Component では useState() を使用できないといった制約がありますので、我々開発者は React Server Component の利点を十分に発揮するために、JavaScript を用いた状態管理を行う範囲を狭めることが求められています。このトークでは、CSS の :has() セレクターや、Popover API といった、従来は JavaScript を用いなければ提供できなかった機能を代替する方法を紹介します。

  7. Hatena Engineer Seminar #25「アクセシビリティ編」

    Mackerel のアクセシビリティ改善事例

    アクセシビリティの改善が正しい行いであることがわかっていたとしても、はじめからチームのタスクとして進めていくことはなかなか難しいでしょう。なぜなら、プロジェクトには他にも新規機能の開発などやるべきことがたくさんあり、優先度がつけられて入念に計画されているはずだからです。この発表では、azukiazusa が Mackerel チームにおいて具体的にどのような手法でアクセシビリティの改善を進めていったかについて話します。