Madogiwa Blog

主に技術系の学習メモに使っていきます。

JavaScript

TypeScriptでClassのconstructorの引数の型を取得する方法MEMO

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

Vue.js: Vueアプリケーション内で発生したエラーをRollbarに通知するメモ📝

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

Vue.js: `eslint-plugin-vue-scoped-css`を使って静的解析でScoped CSSを強制するメモ📝

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

rbenv+nodebrewからasdfに移行したので作業メモ📝

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

型定義のimport時に`import type`をESLintで強制・自動修正する方法メモ📝

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…

`zxcvbn`のモダンな代替ライブラリ`zxcvbn-ts`を使ってパスワード強度を測定するメモ📝

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

ESLintの`no-restricted-syntax`を使ってASTを元に任意の変数名への任意のメソッド呼び出しを禁止したりするメモ📝

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

VitestのIn-source testingを使ってみるMEMO

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

Jestで環境変数を使ってテストのSkipか実行かを切り替える方法MEMO

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

カスタムコンポーネントへの`v-model`の利用を`eslint-plugin-vue`のカスタムルールで検知するメモ📝

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

JavaScript: `URLSearchParams`でArrayを含むObjectをいい感じの配列のURLパラメーター(`key[]=value`)に変換する方法MEMO

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

Vue.js: Transitionに合わせて別の要素をアニメーションで動かすMEMO

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

`Window.scrollBy()`で`scroll-behavior`を指定する方法メモ📝

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

eslint-plugin-securityを導入してみるメモ📝

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

Viteでbuild結果をgzip圧縮する方法メモ📝

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

`Playwright`でビジュアルリグレッションテストを追加する方法MEMO 🎭

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

Ruby on Rails: KombuというRuby on Railsでjsのcomponentを指定してrenderできるgemをリリースしました。

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

ポチポチしてRails newコマンドを作れるツールをAstro on Vue.jsで作った🚃

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

Moment.jsからDay.jsに乗り換えるメモ📝

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…

Vue.js: `@rails/ujs`を利用した`link_to`の`method`属性によるhttp method指定を再現してみたのでメモ📝

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

Ruby on Rails: Viewを作らずにControllerからVue.jsのSFCを指定してrenderできないか試したMEMO

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

個人のWebサービスをYarnからnpmに移行したのでやったこととかをメモ📝

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

Vue 3.x系で削除された`Vue.extend`の使用をESLintで検知する方法MEMO📝

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

ESLintのカスタムルールの作り方MEMO📝

ESLintのカスタムルールを作る機会があったので手順とかメモ 公式Doc eslint.org ESLintのカスタムルールの作り方MEMO カスタムルールを配置するディレクトリを作成する カスタムルールの雛作る カスタムルールを実行するようにconfig及び実行コマンドを修正…

Vue.js: SFCでscoped cssしつつslotを使って挿入した要素にStyleを当てる方法MEMO

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

Yarn: resolutionsを利用して依存パッケージのバージョンを強制するメモ📝

以前間接的に依存しているパッケージのバージョンを更新する方法としてreinstallするやり方を以下の記事で公開しましたが、 madogiwa0124.hatenablog.com それでも解消できない場合にresolutionsというYarnの機能を使うとinstallするpackageのバージョンを強…

Yarn: 間接的に依存しているpackageのバージョンを更新する方法

package.jsonで直接管理していないpackageに脆弱性がある場合等、yarn.lockを修正したくなりますが依存ライブラリを再インストールすれば更新できることが分かったのでやり方をメモ バージョンを上げたいpackageに依存しているpackage.jsonで管理しているpac…

VitestのcacheをCIで利用するメモ📝

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

JavaScript: HistoryAPIとURLSearchParamsを使ってURLのSearchQueryをいい感じに追加するメモ

非同期での検索処理を実装したりするとHistoryAPIを使って動的にブラウザのURLを書き換えたりしますが、URLSearchParamsと組み合わせて使うといい感じに検索条件をSearchQueryに追加できそうだったのでメモ developer.mozilla.org developer.mozilla.org Sea…

Viteのdefineを使ってGlobalな定数を定義する

Viteのdefineを使ってGlobalな定数を定義するのにちょっとハマったのでメモ 例えばViteの実行時にしていたmodeに合わせてNODE_ENVのような定数をグローバルに定義したい場合は以下のようにすればOKです export default defineConfig(({ command, mode }) => …