azukiazusa のテックブログ2
MSW v2 で `HttpResponse.json()` の型がおかしいときの対処法
MSW v2 の `HttpResponse.json()` の第 2 引数の型は `Response` オブジェクトの初期化時に渡すオプションを指定できます。しかし、tsconfig.json の設定によっては、この型がおかしくなることが
すべて
blog.jxck.io
3PCA 2 日目: Cookie による区別と識別
このエントリは、3rd Party Cookie Advent Calendar の 2 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.c
blog.jxck.io
3PCA 1 日目: 3rd Party Cookie Advent Calendar Agenda
このエントリは、3rd Party Cookie Advent Calendar の 1 日目である。3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiitahttps://qiita.c
stin's Blog
個人ブログ開発でとても便利な Contentlayer を導入してみた
またまた自分のブログサイトを改修した報告です。自分のブログサイトを改修してはそれをネタに記事を書くのを繰り返していて、なんか面白いですね。 このブログはソースコードと同じリポジトリに Markdown 記事を保存しています。サイト自体は N
blog.jxck.io
なぜ HTML の form は PUT / DELETE をサポートしないのか?
10 年ほど前に同じことを調べたことがある。なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codeshttps://jxck.hatenablog.com/entry/w
azukiazusa のテックブログ2
React Server Components のテスト手法
現代におけるコンポーネントのテストは Testing Library を用いてテストを行うことが一般的です。しかし、2023 年 11 月現在、Testing Library はまだ Server Components のテストを十分にサポ
stin's Blog
Chakra UI は "use client" なしで使えるようになった「だけ」
Chakra UI が自分で "use client" を付けている 最近 Chakra UI が "use client" を付けずとも Next.js の App Router で使えるようになったと話題になりました。しかし調べてみると
stin's Blog
ブログの記事ページに Table of Contents を設置したので実装方法などを書く
画面幅 991px 以上で閲覧すると、記事ページの右側に目次リンクが表示されるように実装しました。 目次生成ライブラリ tocbot tocbot というライブラリを使用しました。 https://tscanlin.github.io/to
azukiazusa のテックブログ2
HTML 標準でコンボボックスを実現する `<combobox>` 要素の提案
コンボボックスとは、テキストボックスとドロップダウンリストを組み合わせた UI コンポーネントです。コンボボックスはユーザーがテキストボックスに入力した文字列に基づいて、ドロップダウンリストのアイテムをフィルタリングできます。`` 要素は、
blog.jxck.io
次世代 Web カンファレンス 2023 開催告知
2023/12/16(土) に、3 回目となる「次世代 Web カンファレンス」を開催します。次世代 Web カンファレンス 2023 - connpass名称: 次世代 Web カンファレンス 2023日時: 2023/12/16(土)
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