storybook

Storybook の interaction testing と jest を組み合わせる

Storybook の Component Story Format 3.0 では新機能として `play()` 関数が追加されました。 `play()` 関数は Storybook 上で ユーザーのクリックやフォーム入力のようなインタラクションな操作を表現することができます。 `play()` 関数の大きな特徴としては Component Story Format の移植性の高さを利用して Storybook 上で定義したインタラクションを `Jest` など他の領域においても再利用できることです。

vite

Vite だと require() が使えないよ〜

皆様はすでにプロジェクトに Vite は導入されていらっしゃいますでしょうか?私はできていません。 Vite はフロントエンドのビルディングツールであり、従来の Webpack 等と比較して高速に動作するといった特徴があります。Vue.js を開発した Evan You 氏によって開発ツールではありますが Vue.js に限らず React や Svelte にも対応しています。

Vue.js

【Vue.js】ref vs reactive

さて、そんな Compositon API ですがリアクティブなデータを定義する際に `reactive` と `ref` の2つの方法が用意されています。 `reactive` と `ref` どちらを使用するのがよいのか公式からも推奨する方法がありませんので、どちらを使用するべきか迷ってしまうところです。 `reactive` と `ref` のそれぞれのメリット・デメリットを確認してみましょう。

vuetify

Vuetify 3 Alpha の主な変更点

[Vuetify](https://vuetifyjs.com/) は Vue.js で多く使われている UI コンポーネントです。現在のバージョンは Vue 3 には対応していません。 現在 Vue 3 に対応する Alpha 版の Vuetify 3 が公開されています。開発スケジュールは以下のとおりになっています。

b23f135d4e

Nuxt3 の新しい機能いろいろ

現在 Nuxt.js は バージョン3がパブリックベータ版として提供されています。 Nuxt.js が 2 → 3 に移行するにあたってたくさんの新機能が追加されました。

pointer

CSS で印刷用のスタイルを設定できる

大抵のブラウザでは Web ページを印刷することができます。 しかし Web ページをそのまま印刷しようとすると改ページがおかしくなったりレイアウトがおかしくなってしまうことがあるでしょう。そもそも Web ページはディスプレイで表示することを目的としているので印刷には不向きなものです。 とはいえ Web ページを印刷したいというニーズは少なからずあるとは思います、そのようば場合には `@media print` などのような印刷用の CSS を利用することで見た目を整えることができます

modal2

フォーカストラップとは? 〜アクセシブルなモーダル〜

フォーカストラップ(またはループ)とは、ウェbページをキーボードで操作する際にフォーカスをとある領域からはみ出さないようにことです。フォーカス可能な要素を抽出してその中をループすることで実現ができます。 登場シーンとしてはモーダルで使われることが多いです。実際に例を交えて確認してみましょう。