azukiazusa のテックブログ2
単体テストの単位はコードではなく振る舞いである
単体テストの目的は、ソフトウェア開発プロジェクトを持続可能なものにすることです。この目的を達成するための単体テストの機能の 1 つにリファクタリングに対する耐性が上げられます。これは内部のコードを変更した前後でも、外部の振る舞いから見た振る
すべて
blog.jxck.io
次世代 CSS 仕様が与えるコンポーネント時代の Web への影響
SPA の隆盛で進化したフロントエンドライブラリによって生み出された「コンポーネント」という資産は、それを View 層の最小単位として扱うエコシステムにその重心をずらした。近年の Web 開発は、虫食いのテンプレートエンジンにデータをはめ
stin's Blog
2022 年振り返りを書き散らし
Hello! Project Year-End Party 2022 〜GOOD BYE & HELLO ! 〜参戦帰りの電車内で暇だったので書き散らす。 生活スタイル 2022 年の前半はアパートの隣の部屋の物音が気になりすぎてメンタルを
blog.jxck.io
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 使用
azukiazusa のテックブログ2
TypeScript 4.9 で in 演算子による型の絞り込みが改善された
TypeScript において `in` 演算子を `unknown` 型に対して使用した際の挙動が改善されました。
azukiazusa のテックブログ2
React Router の defer で重要なデータを先に描画する
あるページの中で重要ではない付随的なデータの取得を待たずに、重要なデータの取得が完了したタイミングでページを表示させたい場合があります。例えば、ブログの記事のページを遷移する場合、ユーザーにとって記事のコンテンツは重要なデータですが、それに
azukiazusa のテックブログ2
【React】アクセシビリティに考慮したタブを実装する
タブとは、ページ内でコンテンツを切り替えるために使用する UI です。タブ初期表示ではいずれか一つのタブパネルが表示されており、関連するタブがアクティブなスタイルで表示されます。それぞれのタブには関連するタブパネルがあり、タブを選択すること
azukiazusa のテックブログ2
【React】アクセシビリティに考慮したアコーディオンを実装する
アコーディオンは見出しであるヘッダーとコンテンツであるパネルから構成された UI が垂直に積み重ねられたセットです。ユーザーはヘッダーをクリックすることで、ヘッダーに関連付けられたパネルの表示・非表示を切り替えることができます。 アコーデ
blog.jxck.io
CORB から ORB へ
CORB (Cross Origin Read Blocking) が Fetch の仕様から消え、後継の ORB (Opaque Response Blocking) が策定作業中である。ここでどのような変更が起こっているのかを調査し、記
azukiazusa のテックブログ2
【React】アクセシビリティに考慮したリストボックスを実装する
リストボックスにアクセシビリティ上求められる要件を確認した後に、React で実際に要件に従った実装をおこないます。
azukiazusa のテックブログ2
Qwik City でブログアプリを作る
Qwik City は Qwik のメタフレームワークです。React における Next.js、Vue.js における Nuxt.js のような関係と同等です。
stin's Blog
@vercel/og を使ってブログに動的 og:image 生成を実装した
Vercel で og:image の動的生成するなら一択 先日 Vercel から HTML\&CSS で画像を生成できるライブラリ @vercel/og が発表されました。 https://vercel.com/blog/introdu
stin's Blog
Firebase Auth, Firestore, Functions for Firebase でサクッと管理者権限を割り振る
Firebase のユーザーに個別に権限を割り振りたい要件は多そう。すでに似たような記事はたくさんありますが、自分も実装方法を調べたので文章にしておきます。 実装イメージ Firebase Auth のカスタムクレームを使用します。Fire
azukiazusa のテックブログ2
イベントのバブリングは DOM ツリーではなく React ツリーに従う
イベントのバブリングとは、ある要素で発生したイベントがその親要素まで伝播することです。React でポータルを使用した場合、DOM ツリー状親子関係でなかったとしても、React ツリー上親子関係であればイベントがバブリングされます。