すべて

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 です。通常ある要素に対してマウスホバーまたはキーボードでフォーカスした時少しのディレイの後に、ユーザーの操作によらず自動的にポップアップして表示されます。このポップアップはユーザーの

個人ブログから 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` 属性はデフォルトでコント

azukiazusa のテックブログ2

単体テストの単位はコードではなく振る舞いである

単体テストの目的は、ソフトウェア開発プロジェクトを持続可能なものにすることです。この目的を達成するための単体テストの機能の 1 つにリファクタリングに対する耐性が上げられます。これは内部のコードを変更した前後でも、外部の振る舞いから見た振る

次世代 CSS 仕様が与えるコンポーネント時代の Web への影響

SPA の隆盛で進化したフロントエンドライブラリによって生み出された「コンポーネント」という資産は、それを View 層の最小単位として扱うエコシステムにその重心をずらした。近年の Web 開発は、虫食いのテンプレートエンジンにデータをはめ

2022 年振り返りを書き散らし

Hello! Project Year-End Party 2022 〜GOOD BYE & HELLO ! 〜参戦帰りの電車内で暇だったので書き散らす。生活スタイル 2022 年の前半はアパートの隣の部屋の物音が気になりすぎてメンタルを

2022 年を振り返る

例年通り 2022 年を振り返る。

azukiazusa のテックブログ2

今すぐできる Web アクセシビリティ改善

アクセシビリティの対応は、要件定義段階から設計したりなど大変そうなイメージはあります。実際に本格的に対応するにはどの達成基準を目標にするか決めたり、入念なテストが必要になるなど確かに一朝一夕で対応できるわけではないでしょう。ですが、完璧

azukiazusa のテックブログ2

Web フロントエンドの実装において本来の機能を損なってはいけない

データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾

azukiazusa のテックブログ2

Satori + SvelteKit で OGP 画像を自動生成する

Satori とは Vercel が公開している OGP 画像生成ライブラリです。OGP 画像を表示したい場合、記事ごとに対応する OGP 画像が必要になるわけで、新しい記事を投稿するたびに新たな画像を生成しなければいけません。都度画像を生

azukiazusa のテックブログ2

TailwindCSS のダークモードでページ読み込み時に一瞬ライトモードで表示されてしまうときの対応法

ユーザーの OS の設定や LocalStorage の値をもとにダークモードかどうか判定する場合、コンテンツが読み込まれる前にスクリプトの実行が完了している必要があります。

azukiazusa のテックブログ2

Pa11y CI でアクセシビリティテストを GitHub Actions で実行する

Pa11y とは Web Content Accessibility Guidelines (WCAG) をベースに HTML のアクセシビリティを検査するツールです。適合レベル AA を対象にテストします。Pa11y にはいくつかの種類が

azukiazusa のテックブログ2

モノレポで GitHub Actions の jest coverage report を動かす

jest coverage reportは GitHuba Actions のワークフローの1つで Jest で実行したテストのコードカバレッジをプルリクエスト上にコメントしてくれます。この記事では yarn workspaces 使用