Viteを使っていてRollbarにSourceMapをアップロードする際には下記の通りですが、 Vite plugin There is a community-maintained Rollbar Sourcemap Plugin for Vite. Please check the Readme doc for details on the project and usage instructions. http…

openapi-fetchを使っていてサーバー側のレスポンスがエラー相当の場合にデフォルトで例外を発生させる方法メモしておきます。 openapi-ts.dev 以下の記事で記載の通り、openapi-fetchでは例外がthrowされません。 レスポンスエラーと思われるようなステータ…

サーバーサイドをRest APIでやりとりする際にはOpenAPIを使ってインターフェースを定義してやりとりすることがあるかと思います。 www.openapis.org 今まではナイーブにOpen APIのyamlを見て型を書き起こして利用するようなことをすることが多かったのですが…

プロジェクト内でVueのComponentの記法を合わせておきたいなーと思った際に以下のvue/component-api-styleを使うとOptions APIだったりComposition APIだったりといった記法に統一できて便利だったのでメモ eslint.vuejs.org 使い方は簡単で以下のような感じ…

以下の通り、まだ正式リリースではないですが、ESLint v9対応が入ったtypescript-eslintのv8使ってESLint v9にアップデートしたので必要だった対応等をメモ typescript-eslint.io 前提として以下の記事に記載したFlat Configに移行済みのTypeScript, Vue.js…

Vite Rubyを使っていたDockerで立ち上げた環境でHMRをしようと思いvite.config.tsでserver.hostをtrueにしてみたが、なぜかhostが変わらずハマったので解決方法をメモ server.host サーバーがリッスンすべき IP アドレスを指定します。 0.0.0.0 もしくは tru…

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を指定することで今ま…

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

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

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

rbenv+nodebrewからasdfに移行してみたのでやったことをメモしておきます github.com asdfインストール 公式はgit cloneの方法のようだが、homebrewからinstallできるようなのでinstall https://asdf-vm.com/guide/getting-started.html#_2-download-asdf $ …

TypeScript v5から導入されたverbatimModuleSyntaxをtrueにすると型定義を普通にimportするとエラーになります。 TypeScript 5.0 introduces a new option called --verbatimModuleSyntax to simplify the situation. The rules are much simpler - any impo…

ユーザーに安全なパスワードの設定を促すために強度を測定しフィードバックしたいといった時にDropbox製のzxcvbnがよく使われていると思います。 github.com ただ、このライブラリのサイズが大きかったりメンテナンスに不安があったりと、 So, I came across…

ESLintのno-restricted-syntaxが便利だったので使い方をメモ eslint.org 例えばVue3へのアップデート時に以下のようなVue Test Utilsの変更がありアップデートするまでwrapper.destroyを禁止したいとします。 Wrapper API (mount) destroy: renamed to unmou…

VitestのIn-source testingを使ってみたのでメモ vitest.dev In-source testingとは？ 導入方法 テストコードの書き方 参考 In-source testingとは？ 以下のようにコード上のimport.meta.vitestの中にテストコードを直接書くことができる機能 // src/index.t…

影響の大きいライブラリのアップデートを行う際にsnapshotを全てupdateする必要だがPRの差分は一旦小さくするために後でsnapshotテストの更新を行いたいケース等で一部のテストの実行有無を環境変数で切り替えたい時もままある気がするのでやり方をメモ やり…

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

URLSearchParamsを使って{ tile: "sample", ids: [1, 2] }みたいなObjectを?title=sample&ids[]=1&ids[]=2みたいな文字列に変換する方法でハマったのでメモ URLSearchParamsを使うといい感じにobjectをURLパラメーターに変換できますが、 developer.mozilla.…

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

スクロールしてTOPに戻るボタンを実装する際にスムーズにスクロールさせるためにcssでscroll-behaviorを指定することがよくあると思いますが、 developer.mozilla.org Window.scrollBy()の実行時にも指定できることを知らなかったのでメモ developer.mozilla…

Rubyだとbrakemanのようなライブラリがありますが、 github.com JavaScriptでもこういうセキュリティ周りの静的解析系のライブラリがあるのかなと探してみたらeslint-plugin-securityなるものを見つけて個人のサービスに導入してみたのでメモ github.com 導…

Viteにもwebpackでいうところのcompression-webpack-pluginみたいな成果物をgzip圧縮するツールを探してみたところ、 github.com vite-plugin-compressionというまさになツールがあり個人のWebサービスに導入してみたので使い方をメモ github.com といっても…

Playwrightを使ったビジュアルリグレッションテストの追加が思った以上に簡単にできたのでやり方をメモ playwright.dev Playwrightの導入 playwrightの導入方法に関しては以下を参照してください。 playwright.dev Playwrightによるビジュアルリグレッション…

タイトル通り、KombuというRuby on Railsでjavascriptで描画するcomponentを指定してrenderできるgemをリリースしました✨ (コンポーネント・レンダラブルを略してコンブ です) github.com モチベーション Ruby on Railsを利用してサービスが成長してくるとVu…

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

Moment.jsは現在メンテナンスモードに入っているため、今更ながらDay.jsに乗り換えたのでやり方とかをメモ We now generally consider Moment to be a legacy project in maintenance mode. It is not dead, but it is indeed done. Moment.js | Docs Day.js…

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…

個人のWebサービスで利用しているpackage managerをyarnからnpmに移行したのでメモ 移行のモチベーション 移行手順 関連ライブラリを最新の状態にする npmを最新のバージョンに更新 package.jsonの書き換え yarn.lock、node_modulesを削除してnpm installす…

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