たより

すべて

azukiazusa のテックブログ2

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

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

blog.jxck.io

mozaic.fm 10 周年記念イベント開催後記

2014 年 3 月に開始した mozaic.fm が、気づいたら 10 周年を迎えた。これを機に、10 周年記念イベントとして、初のオフラインイベントをゲンロンカフェで開催した。Podcast でのみ告知し、当日まで情報制限をかけていたに

azukiazusa のテックブログ2

フォームのアクセシビリティを考える

今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、入力ミスを誘

azukiazusa のテックブログ2

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

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

azukiazusa のテックブログ2

React Server Components を使うためのミニマムなフレームワーク Waku

Waku は小規模から中規模の React プロジェクトを構築するためのミニマムなフレームワークです。従来は React Server Components を使うためには Next.js のような比較的大規模なフレームワークが必要でした。

@sakupi01.com blog

内定者アルバイトを終えて

チーム開発何もわからんだった私が、チームワークを大切にする会社の内定者アルバイトに参加して思ったことをつらつら書きます。まとまりはないです。

azukiazusa のテックブログ2

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

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

azukiazusa のテックブログ2

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

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

azukiazusa のテックブログ2

新しい UI テストの手法を提供するテストライブラリ SafeTest

SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。S

azukiazusa のテックブログ2

技術の素振りのために記事を書く

技術の素振りを、ここではある特定の言語やフレームワークに対する理解を深めるために、その技術を使って何かしらの成果物を作成することと定義します。素振りの目的としては、ドキュメントからは読み取れない Pro/Con を得ること、その技術が実際の

azukiazusa のテックブログ2

初心者向けの単純なルールを作る

新しい物事を始めるときは複雑な理屈は抜きにして、単純なルールが規定されていることが初心者にとって大切です。この理屈は開発時の設計やコーディングルールにも当てはまると思います。単純なルールとして lint を設定したり、コンポーネント化して複

azukiazusa のテックブログ2

type-safe とプログレッシブエンハンスメント、アクセシビリティヘルパーを備えたフォームライブラリ Conform

Conform は React 向けのフォームライブラリです。type-safe であること、Web 標準を利用したプログレッシブエンハンスメントや、アクセシビリティヘルパーを特徴としており、Next.js の Server Actions

azukiazusa のテックブログ2

フルスタック Web フレームワーク HonoX を使ってみる

HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。Hono が提供するサーバーサイドやクライアントサイドの機能を使いつつ、ファイルベースルーティングや Islands Architecture

blog.jxck.io

Promise.withResolvers によるイベントの Promise 化

Promise.withResolvers() は、Stage 4 であり ES2024 の候補となった。すでにブラウザでの実装も進んでいるため、その活用方法を解説する。

blog.jxck.io

TC39 に新設された Stage 2.7 について

TC39 の Stage 2 と Stage 3 の間に、新たに Stage 2.7 が追加された。これは何だろうと思った人が検索で辿り着けるよう、その経緯と目的をまとめる。

azukiazusa のテックブログ2

Tailwind CSS を使う時に一緒に入れたいライブラリ

Tailwind CSS を使う上でクラス名をスッキリと書くために一緒に入れたいライブラリを紹介します

azukiazusa のテックブログ2

Hono で Server-Sent Events によるストリーミングを実装する

Server-Sent events(SSE)は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信、HTTP で通信するという特徴があります。この記事

azukiazusa のテックブログ2

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

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

blog.jxck.io

Apple によるブラウザエンジン規制の緩和

以前から騒がれていた Apple によるサイドローディング周りの緩和について、正式な情報公開があった。Apple announces changes to iOS, Safari, and the App Store in the Euro

azukiazusa のテックブログ2

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

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