たより

azukiazusa のテックブログ2 icon

azukiazusa のテックブログ2

Web フロントエンド要素多めの技術ブログです。週に1度更新されます。

アクセシビリティを自動で検査する仕組みを整える

様々な方法でアクセシビリティを自動で検査します

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

Storybook の Component Story Format 3.0 では新機能として `play()` 関数が追加されました。 `play()` 関数は Storybook 上で ユーザーのクリックやフォーム入力のようなインタラ

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

皆様はすでにプロジェクトに Vite は導入されていらっしゃいますでしょうか？私はできていません。 Vite はフロントエンドのビルディングツールであり、従来の Webpack 等と比較して高速に動作するといった特徴があります。Vue.j

フロントエンドのテストのモックには msw を使うのが最近の流行りらしい

最近のテスト手法として API コールをモックする際に Jest ではなく [Mock Service Worker](https://mswjs.io/) (以下 `msw` ）を使用する手法が注目されています。実施にどのように使用されて

【Vue.js】ref vs reactive

さて、そんな Compositon API ですがリアクティブなデータを定義する際に `reactive` と `ref` の2つの方法が用意されています。 `reactive` と `ref` どちらを使用するのがよいのか公式からも推奨す

Vitest と呼ばれるテスティングフレームワークがめちゃくちゃ早いらしいな

Vitest は Vite ベースの JavaScript のテスティングフレームワークです。

Vuetify 3 Alpha の主な変更点

[Vuetify](https://vuetifyjs.com/) は Vue.js で多く使われている UI コンポーネントです。現在のバージョンは Vue 3 には対応していません。 現在 Vue 3 に対応する Alpha 版の V

Nuxt3 の新しい機能いろいろ

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

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

大抵のブラウザでは Web ページを印刷することができます。 しかし Web ページをそのまま印刷しようとすると改ページがおかしくなったりレイアウトがおかしくなってしまうことがあるでしょう。そもそも Web ページはディスプレイで表示するこ

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

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

Webpack5 Module Federation ではじめるマイクロフロントエンド

Webpack5 の Module Federation を使用してマイクロフロントエンドを作成します。

Youtube すごい裏ワザ！！！

Tab キーでページを操作した時のみ表示される「ナビゲーションをスキップ」は一般にスキップリンクと呼ばれるものであり、ウェブアクセシビリティのガイドライン (W3C 勧告) である WCAG 2.0にあるブロックスキップと呼ばれる達成基準を

npm の人気パッケージ 「coa」と「rc」にマルウェアが埋め込まれた

2021/11/5 npm パッケージ 「coa」と「rc」がハイジャックされ、パスワードを盗むマルウェアが埋め込まれました。現在の時点では問題のあったバージョンはすべて取り除かれています。

ボックスモデル

CSS にはボックスという概念があります。ブラウザは文書をレイアウトする際に、それぞれの要素を CSS のボックスモデルに基づいた長方形の箱（ボックス）として表現します。つまりは、HTMLの個々の要素はすべてボックスにからできており、それら

【TypeScript】type-challenges 中級編

[type-challengs](https://github.com/type-challenges/type-challenges) の medium レベルをやります。

【TypeScript】type-challenges で学ぶ高度な型

type-challengesを知っていますか？ これは TypeScript の型についての問題集で、問題文の条件を満たす独自のユーティリティ型を作るチャレンジです。いわゆる「型パズル」ってやつですね。 問題の回答はPlaygroun

lodash-es lodash 違い

[lodash-es](https://www.npmjs.com/package/lodash-es) とは [lodash](https://lodash.com/) を `ES module` 形式で提供しているライブラリです。

Q: TypeScript を使っているのに関数の引数のオブジェクトや配列に `readonly` を付与しないのは犯罪ですか？ #Shorts

質問来てた👉 Q: TypeScript を使っているのに関数の引数のオブジェクトや配列に `readonly` を付与しないのは犯罪ですか？ 結論：犯罪になる場合がある。 まず、配列の引数に `readonly` を付与しておけば以

【Vue.js】script setup 構文がすごくすごい

Vue.js 3.x から script setup 構文が使えるようになりました。これは単一ファイルコンポーネント(SFC)内で Composition API を使用している際に使える糖衣構文です。下記のようなメリットを得ることができ、

Vuex 5 でどのように変わるのか。

現在リリースされている最新のバージョンは Vuex 4 です。 これは Vuex 3 と互換性のあるバージョンで Vue 3 で使用するためのものであり、 Vuex 3 と同じ API となっています。 Vuex 5 は Vue 3 にお

【Vue3.2】styleタグ内でJavaScript変数をバインドできる

Vue.js3.2からは、JavaScriptの変数をCSS変数としてバインドできるようになりました。 つまりは、CSSの値を動的に設定できるということです。 ものは試しのやってみましょう。

Vue2のプロジェクトをVue3へマイグレーションsする

Vue 3が正式リリースされてから約1年が経過しました。 Vuetifyのリリース目標である2021年Q3も近づく中でそろそろVue3へのアップデートを検討されている方もいらっしゃることでしょうか？ この記事ではVue 2からVue 3

【Vue.js】Mixinを使うのはもうやめよう

禁止まで言ってしまうとなんだか強い言葉のように聞こえてしまいますが、mixinは基本的にあまり良いアプローチとは考えられません。 実際に、Reactにも過去にはMixinが存在していましたが現在は廃止されています。

あの日見たaxiosの機能を僕達はまだ知らない。

axiosは、JavaScriptにおけるHTTPクライアントのデファクトスタンダードといえるでしょう。 Promiseベースで非同期通信を行えるHTTPクライアントとして、ブラウザ標準のfatchやjQuery.ajaxなどがありますが

VuetifyのテーマをCSS変数として使用する

VuetifyのテーマをCSSの変数として生成して使用します。

青春JSDocはTypeScript先輩の夢を見ない

時には、TypeScriptという概念が存在しない退屈な世界で開発を行わなけらばならない状況はあるでしょう。私はもはやキーボードでタイピングすることすらままなりません。 そんなJavaScriptしか利用できない状況で代替手段となるのが、

【TypeScript】型定義をする際にもDRY原則を守る

DRY原則は非常に有名な原則ですし、普段から特に考えずとも自然と重複をさけるようなコードを書いている方も多いことでしょう。 とはいえ、TypeScriptにおいて`interface`や`type`などを用いて型定義を行う際に重複した型定

Jest setTimeout()のようなでタイマー関数をテストする

JavaScriptには、setTimeout()のような時間に関する便利な機能が用意されています。しかし、これらの関数はユニットテストを記述する際に厄介です。Jestのタイマーモックはこのような場合に利用できる便利な機能です。

【TypeScript】型アノテーションと型アサーションの違い

型アノテーションと型アサーションによる変数宣言は、一見同じ結果をもたらすように見えます。しかし、型アサーションには明確な欠点が存在します。

【mongoose】日付のカラムで時間ごとにグループ化してドキュメント数をカウントする

タイトルのとおりです

【mongoose】Cannot overwrite 'Model' model once compiled. エラーの直し方

mongooseで遭遇するCannot overwrite 'Model' model once compiled. エラーの解消方法です

JSONオブジェクトのあれこれ

`JSON`オブジェクトはJavaScriptにおいて、JSONをパースしたり値をJSONに変換するためにもっぱら使われます。 普段使っている`JSON.stringify()`や`JSON.parse()`にはオプショナルな引数を渡すこ

【JavaScript】Objectがプリミティブに変換されるとき

JavaScriptがプリミティブな値に変換されるとき、string型に変換されようとするか、number型に変換されようとするかで挙動が変化する

ReactのErrorBoundaryで内部のエラーをキャッチする

Error Boundaryとは、自身の子コンポーネントツリーで発生したJavaScriptのエラーをキャッチ・記録しフォールバックのUIを表示するコンポーネントです。 例えるなら、`try/catch`構文を行うコンポーネントのようなも

仕事で役に立つかもしれないHTML5のマイナー要素

HTMLは書いたことがありますか？プログラミング初心者が最初の一歩として書き出すのに好まれる言語ですが、セマンティクスを追求すると奥深い言語だとわかります。タグの種類も数多くあり、全てを把握している人はそう多くなないでしょう。 今回は、そ

Nuxt Sentryでユーザーフィードバックを受け取る

Sentryでは、エラーが発生した際に簡単にユーザーフォードバックを求めるダイアログを表示することができます。 Nuxt.jsでは、エラーが発生した際には`layouts/error.vue`へ遷移させることでエラーページを表示するので、

Node.js(Express)でcsvを生成してダウンロード

Node.js(Express)でCSVファイルを生成してダウンロードさせます。

CKADにも合格した

開発者向けのK8sの試験であるCKADにも合格したので同様に合格体験記を記載したいと思います。 といっても、大枠の部分はCKAのときとあまり変わらないのでCKAと異なる部分を中心に記載したいと思います。

Vue CLIで作成したプロジェクトをViteに置き換える

Viteは、一言でいうとフロントエンドのめっちゃ早いビルドツールです。Vue CLIで作成したプロジェクトをViteに置き換えるためにvue-cli-plugin-viteをというプラグインを使います。

KubernetesのapiVersion

Kubernetesのマニフェストを作成するときには、`apiVersion`フィールドを指定する必要があります。 例えば`Pod`の場合には`v1`を、`Deployment`の場合には`apps/v1`を指定しますが、これらはどのような