stin's Blog
ポケモンBGMループ再生サイトをアップデートした
https://pokemon-soundlibrary.stin.ink ポケモン公式が公開している「ポケットモンスター ダイヤモンド・パール」の BGM をループ再生できるようにしたサイトを以前作りました。その後公式から「ポケットモンス
すべて
azukiazusa のテックブログ2
なぜ Server Actions を使うのか
Next.js 14 の Server Actions の stable リリースに発表は大きな反響を呼びました。特に `` の `formAction` 属性内で直接 SQL クエリを実行するコードは多くの人に衝撃を与えていました。Ser
azukiazusa のテックブログ2
パッケージマネージャーを npm に移行するときには `npm install --package-lock-only` コマンドを使うとよい
既存のプロジェクトで npm に移行する際に `npm install --package-lock-only` を使うことで、依存パッケージのバージョンを変更することなく lock ファイルを移行できます。
stin's Blog
ブログのデザインを刷新した
このサイトのデザインを刷新しました（1 年半ぶり 2 回目）。 変更した理由 最近 Vercel のエンジニアが開発している Nextra という静的サイトジェネレーターをよく見かけるようになりました(出来たばかりのツールではなく、自分が意
blog.jxck.io
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ
こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。
azukiazusa のテックブログ2
Server Actions の戻り値には JSX を使える
Server Actions の戻り値には、シリアライズ可能なデータ型を返す必要があります。ドキュメントでは Server Actions の戻り値に JSX を使うことはサポートされていないと記述されていますが、実際には Server A
azukiazusa のテックブログ2
Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する
Next.js の Server Actions でフォームを作成する際に、どのような方法でバリデーションを行い、エラーメッセージを表示する際にどのような手段が考えられるでしょうか。プログレッシブエンハンスメントの恩恵を受けるために、サーバ
azukiazusa のテックブログ2
GitLens で特定のコミットを除外する
GitLens の使用時に、機械的にフォーマットされたコミットがあるとコードの変更履歴を確認する際に邪魔になってしまいます。この記事では、GitLens で特定のコミットを除外する方法を紹介します。
azukiazusa のテックブログ2
JavaScript なしでインタラクションを追加する Invokers
Invokers は JavaScript なしでインタラクションを追加するための提案です。`` 要素に `invoketarget` 属性を指定することで、値として指定した id を持つ `` などの要素の開閉状態を切り替えることが可能と
azukiazusa のテックブログ2
URL が有効かどうかを判定する `URL.canParse()` メソッド
`URL.canParse()` メソッドは与えられた URL 文字列が有効であるかどうかを判定します。URL 文字列が有効であれば `true` を、無効であれば `false` を返します。これは URL コンストラクターを用いた `t
azukiazusa のテックブログ2
:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う
ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力す
azukiazusa のテックブログ2
focusgroup で矢印キーによるフォーカスナビゲーションを実装する
カスタム UI ウィジェットを実装する際には、ウィジェットのロールに応じたキーボード操作によるフォーカスナビゲーションを実装することが求められています。従来このようなキーボード操作は JavaScript を用いて実装する必要がありました。
azukiazusa のテックブログ2
`<details>` 要素の `name` 属性による排他的なアコーディオンの実装
`` 要素の `name` 属性を利用してグループ化することにより、排他的なアコーディオンを JavaScript なしで実装できます。
azukiazusa のテックブログ2
よりカスタマイズ可能なセレクトボックスを実現する `selectlist` 要素
`` 要素は、デザインをカスタマイズできなかった従来の `` 要素の問題を解決するために Open UI グループにより提案されている要素です。`` の構成要素の多くはスロットとして提供されていて、高いカスタマイズ性を備えているのが特徴です
azukiazusa のテックブログ2
`history.replaceState()` にはブラウザによって呼び出し回数制限がある
`history.replaceState()` は、ブラウザの履歴を変更するための API です。使用例としてユーザーのアクションによる UI の状態の変更に合わせて、URL のクエリパラメータを変更することが挙げられます。この API
azukiazusa のテックブログ2
モーダルの開閉状態を URL で管理する
モーダルの開閉状態を URL で管理することで、状態を復元したり、状態を共有できるなどのメリットがあります。この記事では、Next.js を例に URL でモーダルの開閉状態を管理する方法を紹介します。
azukiazusa のテックブログ2
Bun の Web フレームワーク ElysiaJS のチュートリアル
ElysiaJS は Bun の Web フレームワークです。高いパフォーマンスと、シンプルな API や厳格な型チェックにより生産性に優れているという特徴があります。また柔軟性が高く、多くのプラグインを組み合わせて利用できます。この記事で
azukiazusa のテックブログ2
Bun workspace で始めるモノレポ生活
Bun では `package.json` の `workspaces` を使用することでモノレポの管理が可能です。この記事では Bun によるモノレポを試してみます。
azukiazusa のテックブログ2
Bun のマクロを使ってフィーチャートグルを実装する
Bun にはマクロはビルド時に実行される関数です。関数が返す値がインラインにバンドルファイルに埋め込まれます。マクロには、実行してインライン化した後に、デッドコードを削除するという特徴があります。この機能を使ってフィーチャートグルを実装して
azukiazusa のテックブログ2
Bun の Plugins で CSV ファイルを直接 import する
Bun の Plugins API を使用することで、任意の拡張子のファイルのサポートを追加できます。例えば Bun の公式の動画では、Plugins API を使用して Rust ファイル（.rs）を直接 import できる仕組みも作れ