azukiazusa のテックブログ2
Array.prototype.with() とは
`Array.prototype.with()` は、非破壊的に配列の要素を置き換えるためのメソッドです。非破壊的とは、元の配列を変更せずに新しい配列を返すということです。`arr` に対して `with()` を実行しても、`arr` は
すべて
azukiazusa のテックブログ2
Tailwind CSS のダークモードで System, Light, Dark を切り替える
ダークモードの設定では、OS の設定と同期させるか、ライトモードまたはダークモードに手動で切り替えるかの 3 つの選択肢が用意されていることがあります。手動でライトモードとダークモードを切り替える場合に比べて、OS の設定を自動で反映できる
azukiazusa のテックブログ2
Next.js の Interception Routes について
Intercepting routes は Next.js 13.3 から追加された機能で、App Router（app ディレクトリ）において使用できます。Intercepting routes ではブラウザの URL を遷移先のものに上
azukiazusa のテックブログ2
Cloudflare Workers のためのフルスタックツールキット Superflare を試してみた
Superflare は Cloudflare Workers 用のフルスタックツールキットです。D1 Database 向けの ORM や R2 Storage 向けのユーティリティなどの機能を提供しています。Superflare 自体は
azukiazusa のテックブログ2
HTML の仕様に search 要素が追加された
HTML Standardに新しい``要素が追加された。これまで、ARIAには``に相当するHTML要素がなかったため、` `しか代替要素がなかった。新たに``要素を使用することにより、WAI-ARIA を使用せずともsearchランドマー
blog.jxck.io
OpenAI API を用いた文書校正(誤字脱字検出)
OpenAI の API を用いて、長年の課題だった文書校正を VSCode 上で実現するプラグインを修作したところ、思った以上の成果だった。
azukiazusa のテックブログ2
ChatGPT3 で出力の形式を固定したい場合には例を提示してあげるとよさそう
ChatGPT は毎回異なる出力を返すことがあるため、APIやアプリ開発にとって不都合が生じる。そこで、出力の例を提示することで固定した形式の回答を得やすくすることができる。提示するためのプロンプトは区切り文字を使用して区切ることが推奨され
azukiazusa のテックブログ2
TypeScript で網羅性をチェックする
パターンマッチを備えている言語では、コンパイル時に網羅性が検査され、網羅的でない場合にはコンパイルエラーとなります。例えば Rust では match 式は網羅性を検査します。列挙型が取りうる値をすべて網羅していない場合にはコンパイルエラー
azukiazusa のテックブログ2
SvelteKit で環境変数を使う
SvelteKit プロジェクトは Vite を使用しているので、`import.meta.env` から環境変数を参照できます。単に環境変数を参照するだけならば十分です。ですが SvelteKit により提供されている環境変数の仕組みを使
blog.jxck.io
誇りを被った仕様の針に意図を通す
Interop 2022 の目覚ましい成果の一つとして :has() の存在がある。これまでの CSS の限界を突破する、革新的な仕様であり、多くの開発者が期待を寄せる機能の一つだろう。こうした仕様策定の裏には、必ずと言って良いほど互換性の
azukiazusa のテックブログ2
React は javascript スキームを使った XSS を防ぐことができない
React を使用していた場合に引き起こす可能性がある XSS 脆弱性の例として、javascript スキームを使った XSS があります。この記事では、javascript スキームを使った XSS についての説明とその対策について紹介
azukiazusa のテックブログ2
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎
ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHT
azukiazusa のテックブログ2
TypeScript + ESModules の開発環境をシュッと作る
ほぼ設定なしで TypeScript + ESModules の開発環境をシュッと作る時のレシピです。
azukiazusa のテックブログ2
React Hook Form で Zod を使う時の 5 つパターン
React Hook Form で Zod を使用する時によくあるバリデーションのパターンを 5 つ紹介します
azukiazusa のテックブログ2
SvelteKit でページ遷移時のプログレスバーを表示する
SPA で画面遷移をする場合、MPA の場合と違い、ブラウザがローディングの表示を行ってくれません。リンクをクリックしてから画面遷移が完了するまで何も表示されないので、ユーザーからすると何も反応していないように感じてしまいます。 SPA で
azukiazusa のテックブログ2
アクセシビリティに考慮したツールチップを実装する
ツールチップとは、ある要素に対する補足情報を与える UI です。通常ある要素に対してマウスホバーまたはキーボードでフォーカスした時少しのディレイの後に、ユーザーの操作によらず自動的にポップアップして表示されます。このポップアップはユーザーの
stin's Blog
個人ブログから Chakra UI を剥がして vanilla-extract を入れた(剥がした理由編)
すてぃんのブログから Chakra UI を剥がして vanilla-extract を導入しました。見た目はほとんど変わっていませんが、Chakra UI でスタイリングされていたものをすべて vanilla-extract で 1 から
azukiazusa のテックブログ2
focus() メソッドで CSS の :focus-visible 擬似クラスが適用されるかどうかは最後の操作によって異なる
:focus-visible 擬似クラスはユーザーの入力方法によって異なるフォーカス表示をしたい時に便利です。この擬似クラスはキーボード操作によりフォーカスされた場合に適用されますが、マウス操作によりフォーカスした場合には適用されません。
azukiazusa のテックブログ2
テストコード内では条件分岐を書かないようにする
誰でも読める愚直なコードであることの 1 つの目安として、テストコードの中に if 文や三項演算子などの条件分岐が入り込んでいていないことが上げられます。if 文が存在するコードはアンチパターンであるといえます。実際に if 文がテストコー
azukiazusa のテックブログ2
無効にしたボタンにフォーカスさせたいときには aria-disabled を使う
例えばフォームの項目になにか入力されるまで、送信ボタンを無効にしたい状況があるかと思います。このような場合には `` に `disabled` 属性を与えることでフォームの送信を無効にできます。`disabled` 属性はデフォルトでコント