ChatGPT3 で出力の形式を固定したい場合には例を提示してあげるとよさそう
ChatGPT は毎回異なる出力を返すことがあるため、APIやアプリ開発にとって不都合が生じる。そこで、出力の例を提示することで固定した形式の回答を得やすくすることができる。提示するためのプロンプトは区切り文字を使用して区切ることが推奨され
azukiazusa のテックブログ2
Web フロントエンド要素多めの技術ブログです。週に1度更新されます。
TypeScript で網羅性をチェックする
パターンマッチを備えている言語では、コンパイル時に網羅性が検査され、網羅的でない場合にはコンパイルエラーとなります。例えば Rust では match 式は網羅性を検査します。列挙型が取りうる値をすべて網羅していない場合にはコンパイルエラー
SvelteKit で環境変数を使う
SvelteKit プロジェクトは Vite を使用しているので、`import.meta.env` から環境変数を参照できます。単に環境変数を参照するだけならば十分です。ですが SvelteKit により提供されている環境変数の仕組みを使
React は javascript スキームを使った XSS を防ぐことができない
React を使用していた場合に引き起こす可能性がある XSS 脆弱性の例として、javascript スキームを使った XSS があります。この記事では、javascript スキームを使った XSS についての説明とその対策について紹介
TypeScript + ESModules の開発環境をシュッと作る
ほぼ設定なしで TypeScript + ESModules の開発環境をシュッと作る時のレシピです。
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎
ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHT
React Hook Form で Zod を使う時の 5 つパターン
React Hook Form で Zod を使用する時によくあるバリデーションのパターンを 5 つ紹介します
SvelteKit でページ遷移時のプログレスバーを表示する
SPA で画面遷移をする場合、MPA の場合と違い、ブラウザがローディングの表示を行ってくれません。リンクをクリックしてから画面遷移が完了するまで何も表示されないので、ユーザーからすると何も反応していないように感じてしまいます。 SPA で
アクセシビリティに考慮したツールチップを実装する
ツールチップとは、ある要素に対する補足情報を与える UI です。通常ある要素に対してマウスホバーまたはキーボードでフォーカスした時少しのディレイの後に、ユーザーの操作によらず自動的にポップアップして表示されます。このポップアップはユーザーの
focus() メソッドで CSS の :focus-visible 擬似クラスが適用されるかどうかは最後の操作によって異なる
:focus-visible 擬似クラスはユーザーの入力方法によって異なるフォーカス表示をしたい時に便利です。この擬似クラスはキーボード操作によりフォーカスされた場合に適用されますが、マウス操作によりフォーカスした場合には適用されません。
テストコード内では条件分岐を書かないようにする
誰でも読める愚直なコードであることの 1 つの目安として、テストコードの中に if 文や三項演算子などの条件分岐が入り込んでいていないことが上げられます。if 文が存在するコードはアンチパターンであるといえます。実際に if 文がテストコー
無効にしたボタンにフォーカスさせたいときには aria-disabled を使う
例えばフォームの項目になにか入力されるまで、送信ボタンを無効にしたい状況があるかと思います。このような場合には `` に `disabled` 属性を与えることでフォームの送信を無効にできます。`disabled` 属性はデフォルトでコント
単体テストの単位はコードではなく振る舞いである
単体テストの目的は、ソフトウェア開発プロジェクトを持続可能なものにすることです。この目的を達成するための単体テストの機能の 1 つにリファクタリングに対する耐性が上げられます。これは内部のコードを変更した前後でも、外部の振る舞いから見た振る
今すぐできる Web アクセシビリティ改善
アクセシビリティの対応は、要件定義段階から設計したりなど大変そうなイメージはあります。実際に本格的に対応するにはどの達成基準を目標にするか決めたり、入念なテストが必要になるなど確かに一朝一夕で対応できるわけではないでしょう。 ですが、完璧
Web フロントエンドの実装において本来の機能を損なってはいけない
データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾
Satori + SvelteKit で OGP 画像を自動生成する
Satori とは Vercel が公開している OGP 画像生成ライブラリです。OGP 画像を表示したい場合、記事ごとに対応する OGP 画像が必要になるわけで、新しい記事を投稿するたびに新たな画像を生成しなければいけません。都度画像を生
TailwindCSS のダークモードでページ読み込み時に一瞬ライトモードで表示されてしまうときの対応法
ユーザーの OS の設定や LocalStorage の値をもとにダークモードかどうか判定する場合、コンテンツが読み込まれる前にスクリプトの実行が完了している必要があります。
Pa11y CI でアクセシビリティテストを GitHub Actions で実行する
Pa11y とは Web Content Accessibility Guidelines (WCAG) をベースに HTML のアクセシビリティを検査するツールです。適合レベル AA を対象にテストします。Pa11y にはいくつかの種類が
モノレポで GitHub Actions の jest coverage report を動かす
jest coverage reportは GitHuba Actions のワークフローの1つで Jest で実行したテストのコードカバレッジをプルリクエスト上にコメントしてくれます。 この記事では yarn workspaces 使用
TypeScript 4.9 で in 演算子による型の絞り込みが改善された
TypeScript において `in` 演算子を `unknown` 型に対して使用した際の挙動が改善されました。
React Router の defer で重要なデータを先に描画する
あるページの中で重要ではない付随的なデータの取得を待たずに、重要なデータの取得が完了したタイミングでページを表示させたい場合があります。例えば、ブログの記事のページを遷移する場合、ユーザーにとって記事のコンテンツは重要なデータですが、それに
【React】アクセシビリティに考慮したタブを実装する
タブとは、ページ内でコンテンツを切り替えるために使用する UI です。タブ初期表示ではいずれか一つのタブパネルが表示されており、関連するタブがアクティブなスタイルで表示されます。それぞれのタブには関連するタブパネルがあり、タブを選択すること
【React】アクセシビリティに考慮したアコーディオンを実装する
アコーディオンは見出しであるヘッダーとコンテンツであるパネルから構成された UI が垂直に積み重ねられたセットです。ユーザーはヘッダーをクリックすることで、ヘッダーに関連付けられたパネルの表示・非表示を切り替えることができます。 アコーデ
【React】アクセシビリティに考慮したリストボックスを実装する
リストボックスにアクセシビリティ上求められる要件を確認した後に、React で実際に要件に従った実装をおこないます。
Qwik City でブログアプリを作る
Qwik City は Qwik のメタフレームワークです。React における Next.js、Vue.js における Nuxt.js のような関係と同等です。
イベントのバブリングは DOM ツリーではなく React ツリーに従う
イベントのバブリングとは、ある要素で発生したイベントがその親要素まで伝播することです。React でポータルを使用した場合、DOM ツリー状親子関係でなかったとしても、React ツリー上親子関係であればイベントがバブリングされます。
【React】state のリフトダウンパターン
React において不要な再レンダリングを避けるためのいくつかのパターンを紹介します
Jest で beforeunload イベントをテストする
beforeunload イベントをテストする方法を紹介します
CSS 擬似クラス「:focus-within」
:focus-within は CSS の擬似クラスであり、その要素または子孫要素にフォーカスがある場合に一致します。
アクセシブルなダイアログに必要なこと
ダイアログをアクセシビルに実装するための要件を確認しましょう。
Sanitizer API で HTML を安全に使用する
ユーザーが入力した情報をそのまま表示するとクロスサイトスクリプティング（XSS）脆弱性につながる問題があることはよく知られています文字列の無害化はこのようにライブラリの実装に頼っている状況でしたが、WING により Sanitizer AP
Hono + Cloudflare Workers で REST API を作ってみよう
Hono は TypeScript/JavaScript のシンプルな Web フレームワークです。Hono という名前は日本語の「炎」に由来します。 Hono の特徴としては以下の点が挙げられています。 - ウルトラファスト - 依存
Fetch Upload Streaming でチャットアプリを作ってみる
Fetch Upload Streaming とは、ブラウザの JavaScript の POST リクエストで HTTP のストリーミングを行える機能です。より具体的には、Fetch API の `body` に ReadableStre
AngularJS のチュートリアルを React にリプレイスしてみた③
それではいよいよ、AnguarJS のルーティングモジュールである `ngRoute` を置き換えましょう。この置き換えが完了したら AngularJS を完全に取り除くことができます。
AngularJS のチュートリアルを React にリプレイスしてみた②
AngularJS のチュートリアルを React にリプレイスします。今回の記事では AngularJS のコンポーネントをすべてリプレイスして、angular-resorce の代わりに API クライアントを実装します。
AngularJS のチュートリアルを React にリプレイスしてみた①
AngularJS のチュートリアルを React にリプレイスします。
pnpm は npm と何が違うのか
pnpm は npm、yarn と並ぶ JavaScript のパッケージマネージャーです。pnpm と言う名前は「performant npm」に由来します。
MSW の実践活用例
msw の実践で活用する例を紹介します
Volar で Vuetify2.x の補完を効かせる
Volar + Vuetify 2.x を利用する場合、型定義ファイルを作成してグローバルコンポーネントを定義する必要があります。
【TypeScript】Zod でスキーマ宣言とバリデーションを実施する
[Zod](https://github.com/colinhacks/zod) は TypeScript first でスキーマ宣言とバリデーションを実施するためのライブラリです。 一度バリデータを宣言すれば、Zod が自動的に Typ