2024/04/06 ESLint v9がリリースされました eslint.org Flat config is now the default and has some changesとあるように、 v9からは今までとは違うFlat Configという設定方法がデフォルトになります。(ESLINT_USE_FLAT_CONFIGにfalseを指定することで今ま…

ライブラリ内のVue SFCのコンポーネントを直接ビルドして利用したい等、Viteではnode_modules内のvueファイルと直接importして利用すると以下のようなエラーが発生します。 <template> <Component /> </template> <script lang="ts" setup> import Component from "madogiwa-ui/src/components/Component.vue"; </script> error d…

TypeScriptで普通の関数であればParameter<function>で関数の引数の型を取得できますが、Classのconstructorの引数の型を取得する方法がイマイチ分からず少しハマったのでやり方をメモ Parameters Constructs a tuple type from the types used in the parameters of a</function>…

個人のWebサービスのエラー通知にRollbarを利用しているのですが、以下の通りデフォルトではVueアプリケーション内で発生したエラー(コンポーネント内のロジックでエラーが起きたケース等)は通知されないことに今更気づき、通知されるようにしたので対応した…

2023/11/16 Vite v5がリリースされました⚡️ vitejs.dev リリースから2ヶ月経ちライブラリ側のサポートも揃ってきたので、 個人のWebサービスをVite 4系からVite v5系にアップデートしたので対応したこととかをメモしておきます 前提事項 Vite v5アップデート…

Vue.jsのSFCを利用している場合に極力Scoped CSSを利用してCSSの統制を取りたいと思いますが、eslint-plugin-vue-scoped-css を利用すると静的解析で強制することができることを最近学んだのでメモ future-architect.github.io やり方は簡単で公式ドキュメン…

Vue3から以下のドキュメント記載の通りディープセレクタを利用する際に::v-deepから:deepに変更になりました。 <style scoped> /* deep selectors */ ::v-deep(.foo) {} /* shorthand */ :deep(.foo) {} /* targeting slot content */ ::v-slotted(.foo) {} /* shorthand *…

Vue3アップデートの破壊的変更として以下のカスタムコンポーネントのv-modelに関するものがあり結構影響範囲が広そうで何かソリューション無いかなと思っていたのですが、 v3-migration.vuejs.org eslint-plugin-vueのカスタムルールを作れば意外と簡単にカ…

あるcomponentのTransitionに合わせて別の要素もアニメーションで動かしたい時のメモ オフセット付きのサイドメニューを作成するような際に一方のトランジションに合わせて他の要素をアニメーションを設定して動かしたいと場合には、JavaScriptフックを使う…

Vue.js v3のtransitionで.v-enterを設定し表示時にアニメーションを定義したかったけど、動かず軽くハマったので対応方法をメモ 事象 原因 対応 おわりに 事象 transitionでアニメーションを動かそうと思い以下のコンポーネントのような実装をしたが、開始ア…

タイトル通り、ポチポチしてRails newコマンドを作れるツールをAstro on Vue.jsで作った‍ madogiwa0124.github.io 機能的にはrails newで指定できる各optionをUI上からポチポチして以下のようなコマンドをコピーできるやつです。 $ rails new app_name --dat…

Ruby on Railsのlink_toには、methodを指定してGET以外のリクエストを送信する機能があります。Viewを含めてフロント周りをVue.jsに置き換えるときに、この辺りの再現がネックになったのでVue.jsでの再現方法をメモ You can bind to the same Ajax events as…

はじめに 基本方針 実装したコード 利用例 おわりに はじめに RailsでVue.jsを採用している場合、Vue SFCのscoped cssを利用してCSS周りの統制と取りたくなりますが、RailsのView層に色々要素を書いてしまうとそれも難しくなってきます。 vue-loader-v14.vue…

Ruby on Railsで実装していたViewをVue.jsのComponentに置き換える場合に、form_withはよしなに行ってくれていたCSRF Tokenの設定やPATCH等のGET、POST以外のmethodをRailsに認識させるためにhiddenで送信したりする処理を独自に実装する必要があります。 fo…

Vue.jsを使っていてモーダルを実装する際にアクセシビリティ等々考慮したりすると実装が難しかったりするので何かしらライブラリを利用したいと思ったときにVue Final ModalがVue3にも対応していてサクッと実装できて便利だったのでメモ vue-final-modal.org…

Vue 3.x系ではVue.extendが削除されています。 Vue.extend Removed Global API Application Instance | Vue 3 Migration Guide そのためOptions APIでTypeScriptを利用したComponentではdefineComponentを使う等の変更が必要になります。 -- import Vue from…

Vue.js SFCでscoped cssを利用しているとdefaultでは以下の通りslotで挿入した要素にスタイルを当てることができません。 デフォルトでは、スコープ付きスタイルは親コンポーネントが所有するコンテンツとみなされ、でレンダリングされるコンテンツに影響を…

以前書いたJestのCacheをCIで利用して高速化するのをVitestでも出来ないか調べたら出来そうだったのでやり方をメモ madogiwa0124.hatenablog.com ちなみにVitestでもdefaultでcacheが使われるようです。 cache Type: false | { dir? } Options to configure …

ViteネイティブなStory管理ライブラリのHistoireを使ってみたので使い方とかをメモ histoire.dev Histoireの導入方法 私はVite + Vue3を既に使っていたので以下を参考に導入しました。 https://histoire.dev/guide/vue3/getting-started.html 導入はすごく簡…

JestからVitestに移行する際に以下のような感じで jest-date-mockのadvancedToを使って時刻の固定している箇所をvitestで再現するのに少しハマったのでメモ 以下のような形でadvanceToを使って引数で渡した時間に固定できる import { advanceTo } from "jest…

TypeScriptを設定周り毎回新しいプロジェクトを作成するときに迷うので以下のようなコミュニティが提供しているような設定を使いたいなぁという気持ちになるのですが、 github.com Vue.jsのものは無さそうで(Nuxt用のはある)、いい感じのものが無いかなと思…

最近、Vue.jsのTransitionを使う機会があったので使い方とかをMEMO Transitionとは サンプルコード Transitionのイベントを取得する おわりに 参考 Transitionとは Vue.jsのコンポーネントで簡単にアニメーションを設定できる仕組み。 vuejs.org transition…

追記(2023/09/24) Vue SFC(.vue)を使ってコンポーネントに分割し疎結合にすることでコードの見通しを良くし負債化を抑制できますが、適切なタイミングで分割できずコンポーネントが大きくなりすぎると見通しが悪くなり負債になってしまうので行数とかでエラ…

vue-tscなるものを使うとSFC内のtemplate部分も含めて型チェックを行えて便利っぽいようなので使い方とかをメモ www.npmjs.com vue-tscとは？ vue-tscとはVeturの後継であるVolar内で管理されているライブラリです。 github.com vue-tsc Type-check and dts …

Viteを軽く触ってみて分かった使い方とかメモ ja.vitejs.dev 色々試してるリポジトリ github.com Viteのinstall/設定ファイルの作成 ドキュメント通りにnpm create vite@latestで自分の作りたい環境からテンプレートを作って、そこからカスタマイズしてくの…

個人で運用しているサービスのstylelintを13系から14系の上げたので、そのあたりでやったこととかをメモしておきます。 stylelint.io アップデート手順 公式で14系へのマイグレーションガイドが公開されているので、基本的にはそれをみてやっていきます。 st…

@vue/compiler-sfcを3.2系にあげたときにタイトルどおり以下のエラーが発生したのですが、 TypeError: vue_1.createElementVNode is not a function CHANGELOG等を見ても破壊的変更に記載されておらず、多少ハマったので対応方法をMEMOしておきます blog.vue…

以下のような環境にStorybookを導入してみたので対応したこととかをメモしておきます。 package version vue 3.1.4 webpack 5.44.0 Storybookとは まずはStorybookについて簡単に説明します。 storybook.js.org Storybook is an open source tool for buildi…

個人のWebサービスをVue2系からVue3系にアップグレードしてみたので、やったこととかメモしておきます 基本的な流れとしては以下の記事を参考にさせていただきました‍♂️ zenn.dev 事前準備 plugin:vue/vue3-recommendedを有効化する Vue本体のアップデート …

Vue、TypeScriptが導入時されているプロジェクトにJestを導入したので、そのあたりの手順をMEMOしておきます 関連ライブラリのinstall Jestの設定ファイル作成 Jest実行用のコマンドをpackage.jsonに追加 CIでJestを実行する 導入時に発生したエラー解消ログ…