Vue3で保守性の高いテストコード作成方法を解説！Vue3エンジニアが実装とテストの疎結合実装方法を解説！ | Ragate ブログ
Vue3で保守性の高いテストコード作成方法を解説！Vue3エンジニアが実装とテストの疎結合実装方法を解説！ こんにちは！ 今回は Vue3 でのコンポーネントのテストコードの作成方法を紹介します！ テストコードを書くことでチーム開発はもちろん、個人開発においてもコードをリファクタリングしたり、バグを発見したりする際に重要な役割を果たします。 Vue3 から新たに登場した Compostion API を利用することで、より保守性の高いコンポーネントを定義することができます。 コンポーネントをテストする場合、一般的にはテストコードを実装からできる限り切り離すように作成します。 理想的なのはコンポーネント内のロジックなどを考慮せずに実施するブラックボックス的なテストを書くことです。 はじめに 本記事では Vue3 でのテストコードの作成方法について解説しております。 Vue2 では Vue.e
【ブクマ推奨】React、VueからWebAssemblyまで！LT動画12本公開🎉 — TechFeed Conference「後夜祭」(2)
「TechFeed Conference 2022後夜祭」第二弾！今回はReact、Vue、Angular、Web3D、WebAssembly、フロントエンド設計に関するLT動画を12本公開です！ こんにちは、TechFeed CEOの白石です。 2022年5月14日に開催された「エンジニアの祭典」TechFeed Conference 2022は、「日本を代表するテックエキスパート50名による大LT大会」という前代未聞の取り組みとして、大盛況のうちに幕を閉じました。 ですが、TechFeed Conferenceはまだまだ終わりません！ 本イベントは、エキスパートの貴重な知見を一人でも多くの方々に届けるべく、企画当初から 「全セッション、永久保存版」 を掲げて、アーカイブ化にも全力を尽くすと誓っておりました。 本日より6/10までの間、「TechFeed Conference 2022後
Remote DOM lets you take a tree of DOM elements created in a sandboxed JavaScript environment, and render them to the DOM in a different JavaScript environment. This allows you to isolate potentially-untrusted code off the main thread, but still allow that code to render a controlled set of UI elements to the main page. The easiest way to use Remote DOM is to synchronize elements between a hidden
Writable Computed を活用して読みやすいVueコードを書くためのTips - ANDPAD Tech Blog
こんにちは、ANDPADフロントエンドエンジニアの小泉（@ykoizumi0903）です。 ANDPADでは入社当初からずっとVueでの開発を行っており、特に直近2年はComposition APIで開発しています。 今回は、Vueでの開発を続けている中で、個人的に最近気に入って積極的に使っている、Writable Computedの話をしたいと思います。 このWritable Computed、一応ドキュメントには必ず書いてあるのですがどうにも影が薄く、バージョン3に合わせて刷新された英語版ドキュメントでは「書き込み可能なcomputedが必要なのはレアケース」と書かれているくらいなので、経験の長いVueエンジニアであっても、ほとんど使ったことがないという方も多いのではないでしょうか。 私自身も、このsetter関数について、存在は以前から知っていたものの、どういう使い道があるのかよくわ
【React/Vue.js】コンポーネント設計の（個人的）ベストプラクティス | Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow の Software Engineer（主戦場はフロントエンド）の Kazuya です。今回は、React や Vue.js などの SPA フレームワークにおけるコンポーネント設計について紹介します。 昨今のフロントエンド開発では、コンポーネント指向での開発がスタンダート化しつつありますが、コンポーネント設計には厳格なルールが無く、どのように設計すればいいか悩む方も多いのではないでしょうか？（筆者は沼にはまりました） コンポーネントの単位はどの程度に分割すべきなのか、状態管理はどうすればいいのか、API 通信はどこですべきなのかなど、一言にコンポーネント設計と言っても考えるべき項目が多いです。チーム開発では、認識があっていないとコードが魔境になることもしばしばあると思います。（筆者の経験談より） そこで今回は、数々
【Atomic Designに懐疑的なあなたへ】改めて考えたい React / Next.js のデザインパターン
フロントエンド開発は一般的に複雑性との戦いです。放ったらかしにしておくとますます複雑になり、変更するのが難しくなります。これまでにも、このような複雑さをどうにかして制御しようとして、Atomic Designをはじめとした様々な設計手法（デザインパターン）が考えられてきました。 しかし、React / Next.js を使ってチーム開発を行う際に、現状のデザインパターンでの運用では「どうもうまくいかないな」と思う場面に多々遭遇しました。そのような経験を踏まえて、「コンポーネントをどのように設計するか」「どのようにディレクトリを分けるか」を徹底的に考え、新しいデザインパターン「Tree Design」にまとめました。 Tree Design はまだまだ仮説段階です。今後弊社チームで運用していく中でブラッシュアップする予定です。しかし、他のフロントエンド開発チームがデザインパターンを再考する際
大規模アプリのVue3アップデート対応知見まとめ
はじめに 今参加させてもらっている案件でついにVue3へのアップデートが完了したので、知見をまとめていきます！ 僕1人だけではなく、チームでやったので多少曖昧なところもありますが、そこはご愛嬌でお願いします。 マジで一年くらいかかりました。笑 ちなみにこれを全てやれば完璧にVue3対応出来るわけではなく、あくまでこのプロジェクトで躓いた知見を書いているだけでですので、実際に上げる場合はしっかりと公式ドキュメントを確認してください。 特に移行ビルド系は執筆時点で確認していたら、かなりリリースされていたので是非確認してみてください。 前提 新規機能の開発は止めない Options APIからComposition APIへの書き換えなどはしない 特にいつまでにアップデートなどの期限は設けない マイグレーションビルドは使わない webpackerをつかっている TypeScriptは使っていない
test('event should work', async ({ mount }) => { let clicked = false; // Mount a component. Returns locator pointing to the component. const component = await mount( <Button title="Submit" onClick={() => { clicked = true }}></Button> ); // As with any Playwright test, assert locator text. await expect(component).toContainText('Submit'); // Perform locator click. This will trigger the event. await
今、どんな技術が企業に人気なのかが少し垣間見えて面白いですね。 3. 「全セッション、永久保存版」イベントレポート記事にもスポンサーバナーを TechFeed Conferenceでは、「エキスパートのセッションが、ライブで消費されてしまうのはあまりにもったいない」という思いから、 「全セッション、永久保存版」とすることを決め、全セッション書き起こしを行うことにしました。 スポンサーを募ると決めたのは、そのずっと後の話。 ですが、ある時ふと「書き起こし記事にもスポンサーロゴを掲示すれば、より大きく役に立てるかも？」と思いつき、メニューに組み込むことにしたのです。 具体的には、イベントレポート記事の文中にスポンサーバナーを挟み込むような形で掲示します。 以前から、イベント前〜当日は、企業ロゴが参加者の目に触れる機会を作れても、イベント後は全然そういう機会がないことをどうにかできないか…と感じ
GitHub - kawamataryo/suppress-ts-errors: CLI tool to add @ts-expect-errors to typescript type errors
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに 私自身、vue は 2019 年頃から書いており、今年で 3 年目くらいです。たいして vue に詳しくもないですが、それなりのコード量を書いてきたので、フレームワークとして愛着はあります。今年から react を触る機会が増えそう、ということで、ちょっとづつ react の勉強をはじめていたのですが、vue との明確な違いとして「DOM の再レンダリングの実行タイミングの差」が気になっています。react はドキュメントを読んでいると、「不要な再レンダリングを防ぐ」というトピックを扱うドキュメントが多いように思いますが、vue を勉強しているときは、正直、あまり意識をしていなかった領域です。なぜ、vue を書いているときは意識していなかったのか、どういう差があるのか、などちょっと気になったベースで調べて、記事にしています。 react と vue ってレンダリングのトリガーと範
TypeScript の型チェックを厳格化したいが既存の型エラーが多すぎて、やむなく緩い型チェックにしている方へ改善の助けになりそうなツールを作ったので紹介です。 🔧 作ったもの プロジェクトのコードベースを走査して、型エラーがあるコードすべてに@ts-expect-error or @ts-ignoreのコメントを追加する suppress-ts-errors という CLI ツールを作りました。 以下の GIF のように npx 経由で簡単に利用できます。 さらに、ts、tsx だけでなくVue SFC のスクリプト部分へのコメント追加にも対応しています。 コードはこちらです。⭐ を貰えると泣いて喜びます。 なぜ作った？ 現職のプロジェクトにて型チェックを厳格化できていない（strict: trueにできていない）という状況を改善したいと思ったからです。 型チェックのルールを修正する
UI components powered by Finite State MachinesA collection of framework-agnostic UI component patterns like accordion, menu, and dialog that can be used to build design systems for React, Vue and Solid.js
Vue Datepicker
PowerfulSupports multiple modes such as range, various pickers, multiple calendars, custom components, and many more. ModularOffers a great range of features, slots and props, while providing a way to customize for specific needs.
A new foundationOn top of supporting Vue 3 or Vite, Nuxt 3 contains a new server engine, unlocking new full-stack capabilities to Nuxt server and beyond. It's the first JavaScript application server that is portable across a variety of modern cloud hosting providers. In production, it builds your Vue application and server into one universal .output directory. This output is light: minified and wi
📝 Nuxt 3 公式ドキュメント 日本語訳
Histoire
📖 StoriesWrite stories to showcase and document your components. ⚡ FastIncredibly fast development building and production page loading!
SPA開発とセキュリティ - DOM based XSSを引き起こすインジェクションのVue, React, Angularにおける解説と対策 - Flatt Security Blog
Vue CLIコマンドを利用してVueのプロジェクトを作成する際のManually select featuresのlinter / formatterの選択時に何を選択したらいいかわからないので一番上の選択肢を迷いもせず選択している人を対象にVue.js環境におけるEslintとPrettierについて説明を行っています。EslintとPrettierについてはVue.jsに限定された話ではなくJavaScriptを使いこなす上で必須な知識なのでESLintが理解できていない人にお勧めの内容になっています。本文書を読んでもESLintやPrettierのルールをすべて理解することができませんがESLint、Prettierが何をしてくれる機能なのかは動作確認を行いながら完全に理解することができます。 Vue CLIでlinter / formatterを選択する Vue CLIのvue
こんにちは！ 週一のサウナは欠かさない、フロントエンドエンジニアの土屋です。 先日、Vue.js の公式ドキュメントがリニューアルされました。 Vue.js 日本ユーザーグループ主導で翻訳プロジェクトが立ち上がっているのはご存知でしょうか？ 先日、Vue.js 公式ドキュメントが刷新されたことに伴い、Vue.js日本語公式ドキュメントの翻訳を開始しました！刷新に伴い、ドキュメントの新規翻訳が必要になっています！Vue.jsコミュニティのみなさんの温かい翻訳支援お待ちしております。翻訳はこちらからできます 👉https://t.co/a6SjVDM12j— Vue.js 日本ユーザーグループ (@vuefes) 2022年2月25日 メドピアでは、普段お世話になっている Vue.js に貢献したいという思いから、数回に渡って、Vue.js 公式ドキュメントのモブ翻訳を行ないました。 モブ翻
本記事はあくまで執筆時点(2022/3/27)での一意見でありますので、今後時間や技術的な変化により参考にならない部分も出てくるかもしれません。 Reactはいいぞ、Vueはいいぞと様々な情報が世の中には溢れているものの、「こういう場合には」という前提条件にあまり言及されていない情報が多いような気がしたので自分なりの視点で考えてみたいと思いました。 また、SvelteやAngular等他のフレームワークもありますが、そちらは個人的にはよくわからないので、あくまでReactとVueについてだけ言及していきます。 私のフロントエンド経験と気持ちの変化 2018年くらいにReactを勉強し始める。 → Reactって難しい…。 2019年くらいにVueを学び始める。 → Vueって簡単！Reactよりわかりやすくてええやん！ 2020年くらいにNuxtの案件に参画する。 → Webフロントエンド
はじめに Nuxt.js + TypeScriptを今試し中なのだけど、TypeScriptでのイベントの取り扱いが面倒なので、とりあえずStructural Subtypingを適用してみました。 今のところ問題なさそうなんだけど、軽く探して見た限りだとあまり類似のアプローチ無いし悪手なのかな？ てか、FWとか一般的なライブラリで対応してるけど見つけれてないだけの気がしてならない。。。 TL;DR Event型を取り扱うときはtargetの型が不明なのでコンパイルエラーになる事がある event: { target: HTMLButtonElement }型を指定するのが一番手っ取り早い 求む、もっと手軽な対応方法 TypeScriptでのEvent型の取り扱いの罠 クリックイベントが発生したHTMLのノードに対して作業したい事は良くあるかと思います。 例えば下記のように 「クリックした
Vue 2の開発を出来るだけVue 3に近づけるための基本テクニック - Link and Motivation Developers' Blog
こんにちは、リンクアンドモチベーションのプラットフォームチームの菊池です。 普段はアプリケーション開発のプロジェクトマネジメントをしたり、横断でフロントエンドを見ていたりします。 さて先日、長らくnextバージョンであったVue 3が2022年2月7日からデフォルトバージョンになることが発表されました。 https://blog.vuejs.org/posts/vue-3-as-the-new-default.html 公式が推奨するビルドツールや状態管理ライブラリもViteやPiniaに変わって新時代って感じですね。 一方でまだVue 2を現役で使っているプロダクトも多いと思います。 弊社のフロントエンドも全てVue 2で書かれており、ブラウザ互換を保つため、最近開発をしたアプリケーションでもVue 2（Nuxt） + TypeScriptの構成を取っています。 が、すぐにVue 3にア
node-ipcに悪意あるコードが含まれている問題について
node-ipcというnpmパッケージに悪意あるコードが含まれていた問題についてのメモ書きです。 2022-03-15に、node-ipcのメンテナーによって悪意あるコードを含むnode-ipcが公開されていた問題です。 問題のあるバージョン 9.2.2 unpublish済み Hidden functionality in node-ipc · GHSA-8gr3-2gjw-jj7g · GitHub Advisory Database 10.1.1, 10.1.2 unpublish済み Embedded Malicious Code in node-ipc · CVE-2022-23812 · GitHub Advisory Database 11.0.0+ node-ipc behavior change · GHSA-3mpp-xfvh-qh37 · GitHub Advisor
はじめに つい最近、ReactもVueも使わずに静的なペライチHTMLのマークアップを行う必要に迫られました。その際ViteのVanilla[1]テンプレートとTailwindを使った環境でマークアップをしたところ非常に快適だったので、環境構築の手順を記事にしておこうと思いました。 Viteを使う理由 ViteというとVueやReactの開発ツールと思われがちですが、UIライブラリに依存しないVanillaテンプレートが用意されています。 ファイルの更新を検知してブラウザへの反映といった基本的な機能に加えて、PostCSSのサポートもあるのでTailwindでの開発と相性が良いです。 セットアップ Viteでプロジェクトを立ち上げる普段の手順に加えて、Tailwindのセットアップを行います。 npm create vite@latest # project名を入力後、フレームワークでは「
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsでコーディングするための基本的な記法を説明しました。今回はVue.jsの公式ブログから発信された「Vue 3をデフォルトバージョンにする」発表と、それに伴って、これまでと変わっていくVue.js開発の新常識を紹介していきます。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 本連載ではVue.jsの最新バージョンとなる「Vue 3」を用いてきましたが、実は
既存Vue CLIプロジェクトのVite化
現行のプロジェクトをVue CLIからVite化したのでその作業メモ。 from @vue/cli-service@4.5.9 (webpack@4.46.0) Vue@2 Vuex to vite@2.8.4 (esbuild@0.14.21, rollup@2.67.2) Vue@3（予定） Pinia なぜvite化するか devServerやHMRに時間がかかり開発体験が悪くなってきた モダンなライブラリを導入しようとしてもエラーになってしまった（piniaが導入できなかった） viteにすれば解決する問題なのかは分からなかったが、webpack@1の頃から5年以上開発してきたプロジェクトのせいでいろいろしがらみが増えてしまい、まずは足回りをシンプルにしたかった 結果的にpiniaが導入できるようになった これまでも改善したい要望はあったが、その場その場では「更新するコスト＞そのま
mouseの慣性操作、TrackPadのピンチ操作、TouchScreenの慣性操作、ピンチ操作をどうやら自分で実装しないといけなさそうです ※これ本当ですかね？もし良い情報あったらお教えください #慣性操作の実装(Mouse/TouchScreen) MouseとTouchScreenの慣性動作について実装します。 どこかにライブラリがありそうだけど見つけられず、自分で実装しています。 実装の思想としては、慣性が初速から動摩擦係数で減っていくとすると、 有名なニュートンさんのF=maを一回積分してv(t) = v(0) - at： aは摩擦係数とすると計算できるという単純な中学物理のロジックです。 x, y座標のそれぞれの時間あたりの減衰Speedを計算しています。 async onGraphUp (e) { // 初期速度の計算 this.touchSpeedX = Math.sqrt
Vuetify 2 と @vue/composition-api を使用した TODO アプリを題材に Vue CLI から Vite / Vitest への移行を試して、とりあえず動くようになったので手順と設定を共有したいと思います。 ビルド速度やサイズの変化についてはこの記事の後ろにまとめてあります。 使用したコードは次のリポジトリにあります。 なお、この記事に記載している情報は 2022 年 1 月 30 日時点のものです。 記事の内容はあくまで一例であり、手順や設定が正しいものであるという保証はありませんのでご注意ください。 移行を試した背景 2022 年 1 月 18 日に Vue CLI がメンテナンスモードに入ったことが宣言されました。 1 Vue CLI 自体は引き続き利用可能で v5 安定版リリースに向けて作業が続けられています。 2 とはいえ今後の主流は Vite にな
2023 年 1 月 26 日追記 Reactivity Transform は Vue 3.4 でコアから削除されることになりました。 https://twitter.com/danielkelly_io/status/1618256962776600576 ただ完全になくなる訳ではなく、Vue Macros という Vue 向けマクロ集のパッケージが引き継ぐようです。 https://twitter.com/sanxiaozhizi/status/1618290614306746371 Reactivity Transform とは Vue 3.2.25 から experimental で実装されている機能です[1]。script setup の defineProps() などと同様、コンパイラーマクロによってコードを変換する仕組みです。 公式ドキュメントからコードを引用しつつ、主要
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
TL;DR: Vue 3 is now the new default version as of Monday, February 7, 2022! Make sure to read the Potential Required Actions section to see if you need to make certain changes before the switch to avoid breakage. From a Library to a Framework When Vue first started, it was just a runtime library. Over the years, it has evolved into a framework that encompasses many sub projects: The core library,
2021年のVue.jsは新しいVue 3のコアが安定し、開発環境からライブラリやコードの書き方まで、新しい発表の多い一年でした。ICSではすでに複数のプロジェクトでVue 3やVite等の新しいフレームワーク・ツールを使用していますが、まだまだ様子見という方も多いでしょう。 変化の大きいVue 3の周辺ですが、2021年11月のVueConf Toronto 2021（セッション動画）でようやく次の定番と言える構成がアナウンスされました。この記事では、Vite・cteate-vue・<script setup>・Piniaといった新しい推薦構成を紹介し、Vue 2時代から何が良くなるのかを比較します。 新しい構成は何が良くなる？ メリットを確認 新しい構成ではプロジェクトを作成する際のコマンドラインツールからVS Codeの機能拡張やコードの書き方まで、さまざまな部分が変わっています。個
Vue.js+textlint+機械学習でRPGツクールMZ用文章校正プラグインを開発して得られた知見
成果物 これを作るときにいろいろ問題にぶつかったので得られた知見をまとめます。 開発期間は3か月です。 目標 RPGツクールMZで動作する実用レベルの文章校正プラグイン 実現できた機能 それなりに誤りを検出できる ゲーム内のどのデータを校正するか選べる 校正の進捗がわかる 校正中はいつでも実行を停止できる プラグインだけで簡易的にチェックするかサーバーを使って精密にチェックするか選べる 配布するファイルは1ファイルだけで他のプラグインと同じように使用できる 画面 構成図 主な使用技術と選定理由 Vue.js 慣れている。使いやすいようにいくらかリッチなUIにしたかったため。 textlint ルールベースの文章校正ができるOSS。必須。 T5 sonoisa/t5-base-japanese ルールベースのアルゴリズムでは検出に限界があり、漢字の誤字や送り仮名の誤りなどのカバーが困難なので
Vue 3 Migration Guide
Vue 2 support will end on December 31st, 2023. Learn more about Extended LTS if upgrading to Vue 3 isn't feasible before the EOL date. This guide is primarily for users with prior Vue 2 experience who want to learn about the changes between Vue 2 and Vue 3. This is not something you have to read from top to bottom before trying out Vue 3. The recommended way to learn Vue 3 is by reading the new do
If you've been developing with Vue prior to 2021 there's a good chance that your build tool of choice was the Vue CLI. It's been the de-facto standard for scaffolding Vue.js projects for a while. Now though, Evan You's next generation build tool Vite, has been garnering a lot of attention and is a great alternative to the Vue CLI. Why migrate from Vue CLI to Vite? The primary reason for making the
皆様フロントエンドのテストを書いていらっしゃいますでしょうか？ フロントエンドのテストを書くときには API コールする処理を全てモックする必要があります。外部の API をコールする処理をテストに含めると API サーバーが落ちているなどの外部の要因によってテストが失敗してしまう可能性がありますし、テストを実行するたびに実際に API をコールしてしまうとサーバーに負荷がかかってしまうなど外部に対しても悪影響を与えてしまいます。 さて、従来のモックする手段としては Jest のモックを利用して axios や fetch などのモジュールをモック化する手法がよく使われていたかと思います。 最近のテスト手法として API コールをモックする際に Jest ではなく Mock Service Worker (以下 msw ）を使用する手法が注目されています。実施にどのように使用されているのか
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Shopify/remote-dom
Components (experimental) | Playwright
TechFeed Conferenceは「イベントスポンサー」の仕組みにもイノベーションを起こしたい。
vue と react の DOM の再レンダリングの実行タイミングの差 - Qiita
@ts-expect-errorを自動追加！suppress-ts-errorsの紹介
Zag - Rapidly build UI components without sweating over the logic. - Zag
Announcing Nuxt 3 Release Candidate · Nuxt Blog
Vue CLIを使ってESLintとPrettierが何か完全に理解する | アールエフェクト
Vue.js 公式ドキュメントのモブ翻訳をやりました！ - メドピア開発者ブログ
巨大化したSPAのフレームワークを少しづつVueに移行しはじめたお話
Reactを使うのかVueを使うのかについて個人的なモチベーションを整理したかった
Vite + Tailwind CSSでペライチHTMLをマークアップする
Vue.jsの世代交代が到来！ Vue 3デフォルト時代の「Vue.js開発新常識」
Vue 2 からVue 3 に移行完了しました！ - クラウドワークス エンジニアブログ
VueJSでのTouchイベント処理をむりやり実現する - Qiita
Vue CLI で作成した Vuetify アプリを Vite / Vitest に移行する - Qiita
Vue.js は Reactivity Transform でさらに進化する
「引っ越しするけど会社から歩いて10分圏内ってどこまで？」を調べるサービスをつくりました
2022年におけるフロントエンド開発のベースライン
Vue 3 as the New Default | The Vue Point
2022年の最新標準！Vue 3の新しい開発体験に触れよう - ICS MEDIA
How to Migrate from Vue CLI to Vite - Vue School Articles
フロントエンドのテストのモックには msw を使うのが最近の流行りらしい