技術メモ

日々学んだことのメモを残します。

Vue3 + TypeScript + MSWの試しメモ(2)

1. はじめに 前回はVueのプロジェクトを立ち上げて、そこにMSWを導入するところまで行いました。 今回はサンプルアプリを元に、MSWでモックAPIを実装していきたいと思います。 2. サンプルアプリの内容 MSWを用いるサンプルアプリとしてTodoアプリを用います…

Cypressで特定の要素にドラッグ&ドロップする方法

はじめに Cyressである要素を別の要素領域内にドラッグ&ドロップする操作を行いたいと思い、そのやり方を調べました。 今回のサンプルアプリ 今回は下記のサイトを元に、Cypressで動かすVueアプリを実装しました。 vue.jsでドラッグ&ドロップ(コラム編) 下…

Vue3 + TypeScript + MSWの試しメモ(1)

はじめに 最近MSW(MockServiceWorker)の話題をよく見かけるので、自分が関わっているプロダクトで利用できそうか試しに使ってみました。 今回の記事ではMSWを実際に利用するまでの環境構築について記載しています。 MSWとは 名前の通りServiceWorkerを使用し…

warning: DevTools failed to load SourceMap の対処

React + TypeSctipt + Webpackの環境構築を試しており、webpack-dev-serverを導入した際に、 DevTools failed to load SourceMapのWarningが出てきたので、動作的には問題ないですけど気になるので、その対処方法をメモしておきます。 解決のきっかけはここ…

useRefについて

現在、以下のDeep Dive into Redux Toolkit with React - Complete Guideを視聴し、React/Redux環境でのTypeScriptの記述方式やReduxToolkitについて学習しています。 www.youtube.com その中で、ReactHooksの一種であるuseRefがプロジェクト内で使用されて…

React Hook Form IE11での構文エラー対処法

React Hook Formを使用していると、IE11を起動すると構文エラーが発生します。 公式ドキュメントでIE11を使用する場合の対応方法が記載されています。 React Hook Formをimportする際に、下記のように変更するとエラー回避されます。 // 変更前 import { use…