すべて

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

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

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

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 と打ってもコマンドが実行されます。

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

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

azukiazusa のテックブログ2

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

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

azukiazusa のテックブログ2

TypeScript のような構文で OpenAPI のスキーマを定義する TypeSpec

TypeSepc は TypeScript にインスパイアされた言語で、開発者が親しみやすい構文で OpenAPI のスキーマを定義できます。モデルを使ってデータの構造を定義し、`@route` デコレーターを使って REST API のエ

azukiazusa のテックブログ2

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

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

azukiazusa のテックブログ2

Node.js esm の dirname と filename

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

Web 技術年末試験 2023 講評 #web_exam2023

2023 年の Web 技術を振り返る試験として、「Web 技術年末試験 2023」を実施した。その問題と想定解答、平均点などを公開する。

azukiazusa のテックブログ2

Bun でクロスプラットフォームなシェルスクリプト

Bun の `$` を使うと、クロスプラットフォームなシェルスクリプト（Bun Shell）を書くことができます。Bun Shell は macOS (zsh)、Linux (bash)、および Windows (cmd) と OS の違い

azukiazusa のテックブログ2

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

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

azukiazusa のテックブログ2

Remix の SPA モード

Remix は React のフルスタックフレームワークで、Web 標準に基づいた API で構築されていることが特徴です。Node.js のようなサーバーサイドの JavaScript 環境で動作することを前提としています。しかし、現実の

azukiazusa のテックブログ2

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

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

azukiazusa のテックブログ2

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

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

azukiazusa のテックブログ2

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

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