Vitest のブラウザテスト

Vitest は実験的な機能として、ブラウザモードをサポートしています。ブラウザテストは Node.js 上で jsdom を用いてテストを実効するよりも信頼性の高い方法ですが、テストのセットアップに時間がかかるといったデメリットも存在します。

SvelteKit のフォーム操作

SvelteKit のフォームは Web 標準の機能のみで完結しています。つまり、クライアントサイドでは JavaScript を一切使用せずにサーバーにデータを送信できるのです。さらに、JavaScript を利用できる環境であるならばリッチなユーザー体験を追加できます。例えば、フォームを送信した後ページ全体の再読み込みを行わずに、フォームの送信結果を表示することができたり、バリデーションメッセージを即座に表示できたりします。

Array.prototype.with() とは

`Array.prototype.with()` は、非破壊的に配列の要素を置き換えるためのメソッドです。非破壊的とは、元の配列を変更せずに新しい配列を返すということです。`arr` に対して `with()` を実行しても、`arr` は変更されず、新しい配列のコピーが返されます。

Tailwind CSS のダークモードで System, Light, Dark を切り替える

ダークモードの設定では、OS の設定と同期させるか、ライトモードまたはダークモードに手動で切り替えるかの 3 つの選択肢が用意されていることがあります。手動でライトモードとダークモードを切り替える場合に比べて、OS の設定を自動で反映できるメリットがあります。

Next.js の Interception Routes について

Intercepting routes は Next.js 13.3 から追加された機能で、App Router(app ディレクトリ)において使用できます。Intercepting routes ではブラウザの URL を遷移先のものに上書きしつつ、現在のレイアウトに新しいページを表示できます。これは例えば Instagram のように、ユーザーのプロフィールから写真をクリックすると、写真をモーダルを開き、ページを更新したり共通したりするとデフォルトのレイアウトで表示する場合などに便利です。

Cloudflare Workers のためのフルスタックツールキット Superflare を試してみた

Superflare は Cloudflare Workers 用のフルスタックツールキットです。D1 Database 向けの ORM や R2 Storage 向けのユーティリティなどの機能を提供しています。Superflare 自体はフレームワークを謳っておりません。実際に、Superflare は Remix、Next.js、Nuxt.js などのフレームワークと組み合わせることで効果を発揮します。

HTML の仕様に search 要素が追加された

HTML Standardに新しい`<search>`要素が追加された。これまで、ARIAには`<search>`に相当するHTML要素がなかったため、`<div role="search">`しか代替要素がなかった。新たに`<search>`要素を使用することにより、WAI-ARIA を使用せずともsearchランドマークを定義できるようになった。通常、`<search>`要素は少なくとも1つの入力要素を含んでおり、検索を開始するためのボタンもあることが期待されている。

ChatGPT3 で出力の形式を固定したい場合には例を提示してあげるとよさそう

ChatGPT は毎回異なる出力を返すことがあるため、APIやアプリ開発にとって不都合が生じる。そこで、出力の例を提示することで固定した形式の回答を得やすくすることができる。提示するためのプロンプトは区切り文字を使用して区切ることが推奨され、回答は通常、「例」に基づいた形式で得られる。

TypeScript で網羅性をチェックする

パターンマッチを備えている言語では、コンパイル時に網羅性が検査され、網羅的でない場合にはコンパイルエラーとなります。例えば Rust では match 式は網羅性を検査します。列挙型が取りうる値をすべて網羅していない場合にはコンパイルエラーとなります。TypeScript にはパターンマッチがないため、網羅性の検査は行われません。ですが、TypeScript では `never` 型を利用することで網羅性の検査を行うことができます。

SvelteKit で環境変数を使う

SvelteKit プロジェクトは Vite を使用しているので、`import.meta.env` から環境変数を参照できます。単に環境変数を参照するだけならば十分です。ですが SvelteKit により提供されている環境変数の仕組みを使用すると、型安全に環境変数を参照できる、公開してはいけない値をクライアントから参照できなくなるなどのメリットを得られます。