azukiazusa のテックブログ2
Q：v-for の key に 配列のインデックスを使うのは犯罪ですか？#Shorts
結論： - `v-for` ディレクティブに渡す配列要素が決して変わらないことがわかっているのであれば使っても良い。 - `id` 属性を持っているのであれば常に `id` 属性を `key` に使用するべき。
すべて
azukiazusa のテックブログ2
Q：TypeScript の関数の返り値の型を明示的に書かないのは犯罪ですか？#Shorts
TypeScript において関数の返り値の型は推論させることは可能ですが、これはコードベース全体に意図しない型の変更による影響が広がる可能性があります。
azukiazusa のテックブログ2
Node.js に fetch がやってきた
Node.js で fetch が使えるようになる
blog.jxck.io
サイトの HTTP3 化と DNS HTTPS RR および Alt-Svc Header によるアドバタイズ
本サイトを HTTP3 対応し、Alt-Svc ヘッダおよび DNS HTTPS Resource Record によってそれをアドバタイズする構成を適用した。色々ハマったので作業のログを記す。
azukiazusa のテックブログ2
アクセシビリティを自動で検査する仕組みを整える
様々な方法でアクセシビリティを自動で検査します
azukiazusa のテックブログ2
Storybook の interaction testing と jest を組み合わせる
Storybook の Component Story Format 3.0 では新機能として `play()` 関数が追加されました。 `play()` 関数は Storybook 上で ユーザーのクリックやフォーム入力のようなインタラ
azukiazusa のテックブログ2
Vite だと require() が使えないよ〜
皆様はすでにプロジェクトに Vite は導入されていらっしゃいますでしょうか？私はできていません。 Vite はフロントエンドのビルディングツールであり、従来の Webpack 等と比較して高速に動作するといった特徴があります。Vue.j
azukiazusa のテックブログ2
フロントエンドのテストのモックには msw を使うのが最近の流行りらしい
最近のテスト手法として API コールをモックする際に Jest ではなく [Mock Service Worker](https://mswjs.io/) (以下 `msw` ）を使用する手法が注目されています。実施にどのように使用されて
blog.jxck.io
画像最適化戦略 AVIF 編
本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい AVIF 形式を提供し、対応ブラウザに配信するようにした。フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。画像最
azukiazusa のテックブログ2
【Vue.js】ref vs reactive
さて、そんな Compositon API ですがリアクティブなデータを定義する際に `reactive` と `ref` の2つの方法が用意されています。 `reactive` と `ref` どちらを使用するのがよいのか公式からも推奨す
blog.jxck.io
2021 年をふりかえる
例年通り 2021 年を振り返る。
azukiazusa のテックブログ2
Vitest と呼ばれるテスティングフレームワークがめちゃくちゃ早いらしいな
Vitest は Vite ベースの JavaScript のテスティングフレームワークです。
azukiazusa のテックブログ2
Vuetify 3 Alpha の主な変更点
[Vuetify](https://vuetifyjs.com/) は Vue.js で多く使われている UI コンポーネントです。現在のバージョンは Vue 3 には対応していません。 現在 Vue 3 に対応する Alpha 版の V
azukiazusa のテックブログ2
Nuxt3 の新しい機能いろいろ
現在 Nuxt.js は バージョン3がパブリックベータ版として提供されています。 Nuxt.js が 2 → 3 に移行するにあたってたくさんの新機能が追加されました。
blog.jxck.io
Web のセマンティクスにおける Push と Pull
筆者は、Web のセマンティクスに対する実装の方針として、大きく Push 型の実装 と Pull 型の実装 があると考えている。もっと言えば、それは実装方法という具体的な話よりも、開発者のセマンティクスに対する態度を表現することができる。
azukiazusa のテックブログ2
CSS で印刷用のスタイルを設定できる
大抵のブラウザでは Web ページを印刷することができます。 しかし Web ページをそのまま印刷しようとすると改ページがおかしくなったりレイアウトがおかしくなってしまうことがあるでしょう。そもそも Web ページはディスプレイで表示するこ
blog.jxck.io
自作 Markdown プロセッサベースの blog.jxck.io v2 リリース
本サイトは自作の Markdown ビルダを使っていたが、色々と気に食わない部分があったのでフルスクラッチで作り直し、それにともなってサイトの刷新を実施した。必要だった要件や、意思決定を作業ログとして記す。
azukiazusa のテックブログ2
フォーカストラップとは? 〜アクセシブルなモーダル〜
フォーカストラップ(またはループ)とは、ウェブページをキーボードで操作する際にフォーカスをとある領域からはみ出さないようにすることです。フォーカス可能な要素を抽出してその中をループすることで実現ができます。 登場シーンとしてはモーダルで使
azukiazusa のテックブログ2
Webpack5 Module Federation ではじめるマイクロフロントエンド
Webpack5 の Module Federation を使用してマイクロフロントエンドを作成します。
azukiazusa のテックブログ2
Youtube すごい裏ワザ！！！
Tab キーでページを操作した時のみ表示される「ナビゲーションをスキップ」は一般にスキップリンクと呼ばれるものであり、ウェブアクセシビリティのガイドライン (W3C 勧告) である WCAG 2.0にあるブロックスキップと呼ばれる達成基準を