![祝・正式リリース!5つのテーマで理解する Nuxt3 の魅力](https://cdn-ak-scissors.b.st-hatena.com/image/square/af6b5c63c9e0a4ee5261b562e498fb7748a8780c/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--qBHh7zpi--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E7%2525A5%25259D%2525E3%252583%2525BB%2525E6%2525AD%2525A3%2525E5%2525BC%25258F%2525E3%252583%2525AA%2525E3%252583%2525AA%2525E3%252583%2525BC%2525E3%252582%2525B9%2525EF%2525BC%2525815%2525E3%252581%2525A4%2525E3%252581%2525AE%2525E3%252583%252586%2525E3%252583%2525BC%2525E3%252583%25259E%2525E3%252581%2525A7%2525E7%252590%252586%2525E8%2525A7%2525A3%2525E3%252581%252599%2525E3%252582%25258B%252520Nuxt3%252520%2525E3%252581%2525AE%2525E9%2525AD%252585%2525E5%25258A%25259B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aykoizumi0903%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2UyMWIwMjZhZGEuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Vue, Vitest, Testing Library, MSWを使ってテスト駆動開発するチュートリアルテストVue.jsテスト駆動開発TestingLibraryVitest 今回は以下のライブラリを中心にVueにおけるテスト駆動開発(TDD)の進め方を説明します。 Vue3 Vitest Testing Library Mock Service Worker Options APIで書きますが、テストコードはComposition APIでも動くので、 Composition APIの実装に多少慣れてる人はぜひとも挑戦してください。 今回の記事の中で作ったコードは以下のリポジトリに収めました。 テスト駆動開発(TDD)ってなに? TDDとはTest Driven Development(テスト駆動開発)の略であり、その文字通り、 テストを先に書いてその後にそのテストを満たすコードを書
Vue.js3において、v-onディレクティブで紐づけた「イベントハンドラ」や「トランジションフック」の引数から要素ノードのプロパティを参照、アクセスしようとするとTypeScriptではエラーが出てしまいます。そこで引数のダウンキャストが必要なのですが、「イベントハンドラ」と「トランジションフック」でそれぞれキャストの方法が違うので順番に説明します。 キャストの方法 先にキャストの方法を示し、順次解説します。 結論を言うと、次のコードのようになります。 //@clickや@mouseenterなどのイベントハンドラ const onclick = (e: Event) => { const target = e.target as HTMLElement //もしくはHTMLElementのサブクラス console.log(target.id) //要素ノードにアクセス } //@be
はじめに Nuxt.js + TypeScriptを今試し中なのだけど、TypeScriptでのイベントの取り扱いが面倒なので、とりあえずStructural Subtypingを適用してみました。 今のところ問題なさそうなんだけど、軽く探して見た限りだとあまり類似のアプローチ無いし悪手なのかな? てか、FWとか一般的なライブラリで対応してるけど見つけれてないだけの気がしてならない。。。 TL;DR Event型を取り扱うときはtargetの型が不明なのでコンパイルエラーになる事がある event: { target: HTMLButtonElement }型を指定するのが一番手っ取り早い 求む、もっと手軽な対応方法 TypeScriptでのEvent型の取り扱いの罠 クリックイベントが発生したHTMLのノードに対して作業したい事は良くあるかと思います。 例えば下記のように 「クリックした
Jest + TypeScript + Vue 3環境で Vue Testing Library(@testing-library/vue) を動かす フロントエンド連載の1記事目です。 TIG DXユニットの中川旭です。新卒で2020年10月に入社しました。初記事です。 作業が詰まったときや実際に作業するのが面倒なときのために、この記事を最後まで作業をした後のコードを下のリポジトリに置きます。 https://github.com/modockey/Init-VueTestingLibrary Vue Testing LibraryのいいところVue Testing LibraryはVue.js公式のライブラリであるvue-test-utilをベースとする、DOM Testing LibraryのVue.js用拡張です。 Vue Testing Libraryを用いると、Vue.js公式
構成 node 16.12.0 Vite 3.0.7 Vue 3.2.37 TypeScript 4.6.4 やりたいこと JestとTesting Libraryを入れてVueとTypeScriptのテストコードを書きたい。 入れたもの Jest 28.1.3 Jest Emvironment JSDom 18.1.3 @type/jest 28.1.7 @vue/vue3-jest 28.1.0 ts-jest 28.0.8 作業手順 Vue3のドキュメント内のテストのところとViteで構築した開発中のVue3のプロジェクトにJestを導入するを参考にやっていく。 最初にJestをインストールして jest --init でセットアップはすぐに完了。 jest.config.mjsが作られる。 package.jsonのscriptにtest: "jest" を追加。 ただ npm r
Viteで構築した、開発中のVue3プロジェクトに途中からJestを導入した際にすこし手こずったので、備忘録としてまとめます。 TypeScriptは使っていないです。 手順 1. Jest のセットアップ
はじめに VSCodeのsettings.jsonを見直している中でフォーマッタの設定についてEslint、Prettierのドキュメントを見ていたらPrettierの公式ドキュメントで↓のページを見つけた。 Integrating with Linters#Notes When searching for both Prettier and your linter on the Internet you’ll probably find more related projects. These are generally not recommended, but can be useful in certain circumstances. First, we have plugins that let you run Prettier as if it was a linter rul
Vue3で保守性の高いテストコード作成方法を解説!Vue3エンジニアが実装とテストの疎結合実装方法を解説! こんにちは! 今回は Vue3 でのコンポーネントのテストコードの作成方法を紹介します! テストコードを書くことでチーム開発はもちろん、個人開発においてもコードをリファクタリングしたり、バグを発見したりする際に重要な役割を果たします。 Vue3 から新たに登場した Compostion API を利用することで、より保守性の高いコンポーネントを定義することができます。 コンポーネントをテストする場合、一般的にはテストコードを実装からできる限り切り離すように作成します。 理想的なのはコンポーネント内のロジックなどを考慮せずに実施するブラックボックス的なテストを書くことです。 はじめに 本記事では Vue3 でのテストコードの作成方法について解説しております。 Vue2 では Vue.e
スロットとは スロット(slot)は、Vue.jsにおける親コンポーネントから子コンポーネントにデータを渡す手段の一つです。 スロットという名前はハーデスやリゼロなど様々な機種がある遊技マシン...のことではなく「差し込み口」という意味で使われています。 つまり、コンポーネントに外からコンテンツの差し込みを受け付けるという目的で使用されます。 スロットはその性質上、再利用の高いコンポーネントによく使用されます。再利用の高いコンポーネントは、Atomic DesignにおけるAtomのようなものが代表されます。 まずはさっそくスロットの基礎的な使い方を見ていきましょう。 スロットコンテンツ スロットを使用コンポーネントとして、汎用的に利用する削除ボタンを実装します。 コンポーネントの内容は、Vuetifyのv-buttonをラップしただけ簡単なものです。 <template> <v-btn
特に個人で開発を行っているとテストを実施することでコードの品質を高められることはわかってはいるものの時間もかかりそうなので時間がある時にやろうとテストを後回しにしているという人も多いのではないでしょうか。 本文書ではVue CLIで作成したVue 3環境下でのVueのコンポーネントのテスト方法について説明を行っています。テストにはJavaScriptのテストフレームワークのJestとVue Test Utilsを利用しています。Jestはテストフレークワークの中でも人気が高くFaceBookによって開発されました。Vue Test UtilsはVueの公式のテストツールでVueのアプリケーションをテストするために必要な関数が含まれています。Vue.jsのビギナーの人にも理解してもらえるようにシンプルなコードを利用して動作確認を行っていきます。 Jestというテストフレームワークを利用するこ
Vuetify+Vue CLIで構築したプロジェクトで、 Vuetify2.xにアップグレードしたらnpm run serveの開始時間が著しく長くなってしまったので改善します。 原因 Vuetify2.0よりデフォルトで有効となったA-la-carte(treeshaking)が原因です。 A-la-carteとは Vuetifyの数多くのコンポーネントのうち、「プログラム中で使われているもの」だけを成果物に含める機能です。使っていないコンポーネントをimportしないので、ビルドサイズが減少します。 しかしながら、これはビルド時間を増大させます。 A-la-carteを使わない場合、vuetifyの全てのコンポーネントはnode_modules/vuetify/dist/vuetify.min.jsから読み込まれます。これは既にimportの解決やminifyが済んでいるプリコンパイル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く