【React】アクセシビリティに考慮したタブを実装する
タブとは、ページ内でコンテンツを切り替えるために使用する UI です。タブ初期表示ではいずれか一つのタブパネルが表示されており、関連するタブがアクティブなスタイルで表示されます。それぞれのタブには関連するタブパネルがあり、タブを選択すること
azukiazusa のテックブログ2
Web フロントエンド要素多めの技術ブログです。週に1度更新されます。
【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
おまえら禁じられたインデックスアクセスを平気で使ってんじゃねえか！わかってんのか？『ランタイムエラー』が生まれたのは人間がコンパイラオプションに甘えたせいだろうがよ！
TypeScript 4.1 から noUncheckedIndexedAccess オプションが追加されました。このオプションは上記のような配列のアクセスやオブジェクトのプロパティのアクセスをより厳密にします。 具体的には、配列に対する
Deno Web フレームワーク Fresh チュートリアル
Fresh は Deno 製の Web フレームワークです。事前のビルドを必要せず、エッジでレンダリングを提供するという特徴があります。また、Islands Architecture を採用しており、デフォルトではクライアントに JavaS
Atomic CSS エンジン - UnoCSS
UnoCSS はフレームワークではなく、Atomic CSS エンジンです。全ては柔軟性とパフォーマンスを考慮して設計されています。UnoCSS にはコアユーティリティはなく、すべての機能はプリセットで提供されます。
Vue 向けの Vite 製の UI コンポーネントカタログツール Histoire
Histoireはフランス語で「Story」という意味の単語であり、Storybook のように UI コンポーネントのカタログを作成するツールです。Vite にネイティブ対応、Vue の SFC 形式で Story を書けるといった特徴が
Jest Preview がけっこーすごい
Jest Preview とは Jest で実行中のテストに debug() 関数を仕込むことで、実行中のテストが作成した HTML をブラウザでプレビューしながらデバッグできるライブラリです。
Playwright でコンポーネントテスト
Playwright は E2E テストのための Node.js フレームワークです。v1.22.0 から React,Vue.js,Svelte のコンポーネントに対してテストを実行できるようになりました。つまりもともと備えていた E2E
Tailwind CSS ベースの UI フレームワークという選択肢
この記事を読んでいるみなさんも、Vuetify や MUI のような UI フレームワークを使用したことがあるでしょう。これらの UI フレームワークは Web アプリケーションでよく使われる UI パーツを非常に高機能で提供しており、多大
Node.js の標準 API にテストランナーが追加された
JavaScript のテストランナーといえば、Jest がデファクトスタンダードと言えるでしょう。最近は Vitest と呼ばれる新たなテストランナーも登場していますが、しばらくは Jest が使われ続けられることでしょう。 そんな中、
Rust の魅力に感じた点
最近は [Rust](https://www.rust-lang.org/) と呼ばれるプログラミング言語を趣味として触っています。[SWC](https://swc.rs/) や [Rome](https://rome.tools/) の
markuplint で構文チェックを始めよう
HTML の構文チェックを実施するには適切なツールを導入するのがよいでしょう。この記事では markuplint と呼ばれる HTML の静的解析ツールを紹介します。markuplint は JSX(React),Vue,Svlete のよ
Node.js のバージョン管理には Volta がよい
皆さん Node.js のバージョン管理ツールには何を使っておりますでしょうか？上記の中でも私がオススメするのは [volta](https://volta.sh/) です。volta は 1.0 がリリースされたのが2020年12月と比較
npm workspace で始めるモノレポ生活
workspace は複数のパッケージ（`package.json`）をレポジトリを管理するために使用されます。このようなレポジトリは**モノレポ**として知られています。
君は return と await return の違いを理解して使っているか
`Promise` を返す非同期関数を扱う時 `Promise` をそのまま返す書き方と `Promise` を `await` してから返す二通りの方法があります。これらは一見同じように動作するように見えますが異なる点が存在します。
import type { ... } from "./module" とは何者何か
TypeScript のプロジェクトにおいて `import type { ... } from "./module"` という記述を見たことはないでしょうか？ これは Type-Only imports and export と呼ばれる
anonymous default export はやめたほうがいいかもね
`anonymous default export` とは名前の通り匿名でデフォルトエクスポートを宣言することです。必ず名前を付与しなければいけない名前付きエクスポートと異なり、以下はすべて有効な構文です。
msw でリクエストを検証する方法
msw 使ってテストを記述した時期待したリクエストが送信されているのか検査したくなるかもしれません。リクエストを検証する方法と、それを回避する方法を紹介します。
Storybook 単体でインタラクションテストを実施する
Storybook の Component Story Format 3.0 では新機能として play() 関数が追加されました。 `play()` 関数は Storybook 上で ユーザーのインタラクションな操作を表現することができ
Web フロントエンドエンジニアなら当然 Rust も書けますよね？？
本記事では Yew を利用して Web アプリケーションを作成してみたいと思います。Yew は React や Vue などと同じくコンポーネントベースのフレームワークでインタラクティブな UI を作成できます。
Q：v-for の key に 配列のインデックスを使うのは犯罪ですか？#Shorts
結論： - `v-for` ディレクティブに渡す配列要素が決して変わらないことがわかっているのであれば使っても良い。 - `id` 属性を持っているのであれば常に `id` 属性を `key` に使用するべき。
Q：TypeScript の関数の返り値の型を明示的に書かないのは犯罪ですか？#Shorts
TypeScript において関数の返り値の型は推論させることは可能ですが、これはコードベース全体に意図しない型の変更による影響が広がる可能性があります。
Node.js に fetch がやってきた
Node.js で fetch が使えるようになる