JavaScript
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…
ESLintのカスタムルールを作る機会があったので手順とかメモ 公式Doc eslint.org ESLintのカスタムルールの作り方MEMO カスタムルールを配置するディレクトリを作成する カスタムルールの雛作る カスタムルールを実行するようにconfig及び実行コマンドを修正…
Vue.js SFCでscoped cssを利用しているとdefaultでは以下の通りslotで挿入した要素にスタイルを当てることができません。 デフォルトでは、スコープ付きスタイルは親コンポーネントが所有するコンテンツとみなされ、でレンダリングされるコンテンツに影響を…
以前間接的に依存しているパッケージのバージョンを更新する方法としてreinstallするやり方を以下の記事で公開しましたが、 madogiwa0124.hatenablog.com それでも解消できない場合にresolutionsというYarnの機能を使うとinstallするpackageのバージョンを強…
package.jsonで直接管理していないpackageに脆弱性がある場合等、yarn.lockを修正したくなりますが依存ライブラリを再インストールすれば更新できることが分かったのでやり方をメモ バージョンを上げたいpackageに依存しているpackage.jsonで管理しているpac…
以前書いたJestのCacheをCIで利用して高速化するのをVitestでも出来ないか調べたら出来そうだったのでやり方をメモ madogiwa0124.hatenablog.com ちなみにVitestでもdefaultでcacheが使われるようです。 cache Type: false | { dir? } Options to configure …
非同期での検索処理を実装したりするとHistoryAPIを使って動的にブラウザのURLを書き換えたりしますが、URLSearchParamsと組み合わせて使うといい感じに検索条件をSearchQueryに追加できそうだったのでメモ developer.mozilla.org developer.mozilla.org Sea…
Viteのdefineを使ってGlobalな定数を定義するのにちょっとハマったのでメモ 例えばViteの実行時にしていたmodeに合わせてNODE_ENVのような定数をグローバルに定義したい場合は以下のようにすればOKです export default defineConfig(({ command, mode }) => …