Madogiwa Blog

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

開発

Ruby on Rails: Capybaraでスクリーンショットを取得してreg-cliで画像比較する簡単なVRT的なのを作るMEMO

Ruby on Railsのsystem specで画面ショットを取りつつmasterとの画像比較してVRT的なことできないかなーと思っていたのですが、Capybaraのpage.save_screenshotとreg-cliを使うと実現できそうだったのでメモ ちなみにPlaywrightでは以下の通りtoHaveScreensh…

Ruby on Rails: CPSを有効化後にテスト環境で`content_security_policy_nonce`で空文字が返却されエラーになる件の対応方法MEMO

個人のWebサービスでconfig.content_security_policy_report_only=trueを外し、CSP違反があった場合にブラウザエラーを発生させるようにしたところ、Sytem Specが軒並み落ちるようになり対応したのでやったことをメモ 事象 原因 解決策 参考 事象 ブラウザエ…

Ruby: `define_method`でキーワード引数を持つメソッドを定義するメモ📝

Rubyのdefine_methodを使うと外部からレシーバーに任意のメソッドを定義できますが、キーワード引数を持つメソッドを定義するときにやり方を迷ったのでメモ docs.ruby-lang.org define_methodは以下のようにblockを渡してメソッドを定義できますが、block引…

Ruby on Rails: GoodJobをRailsアプリケーションと同一プロセスで実行するメモ📝

Heroku等で運用しているとバッチサーバーを別のプロセスで実行するとお金が掛かったりするのでGoodJobを用いている場合にRailsアプリケーションと同一プロセスで起動する方法をメモ GoodJobについてはこちら madogiwa0124.hatenablog.com やり方としては簡単…

CSS: `display: flex`で横並びにした要素をモバイルサイズの場合に縦並びにする方法MEMO

display: flexで横並びにした要素をモバイルサイズの場合に縦並びにするときにいい感じのやり方を探して、少しハマったのでメモ 結論としては以下の通りモバイルサイズの時だけflex-direction: column;を指定すれば横並びが縦並びになる .items { display: f…

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アプリケーション内で発生したエラー(コンポーネント内のロジックでエラーが起きたケース等)は通知されないことに今更気づき、通知されるようにしたので対応した…

Ruby on Rails: capybara-playwright-driverでsystem specを実行するMEMO📝

system specをseleniumではなくcapybara-playwright-driverを使ってplaywrightで動かしてみたのでメモ github.com playwrightに関しては以下に以前まとめていたので貼り付けておく。 madogiwa0124.hatenablog.com 準備 必要なライブラリをinstallします。 Ge…

Git管理されたプロジェクト内の配下のTypeScriptプロジェクトだけ型チェックを行うスクリプトメモ📝

Git管理されたプロジェクトにいくつかTypeScriptのプロジェクトがあり、それらをまとめて型チェックしたくスクリプトを書いたのでメモ 以下がそのスクリプトです。 git ls-files -- root/dir | \ grep "tsconfig.json" | sed 's/tsconfig.json//' | \ xargs …

Ruby: Ruby 3.3アップデート後に`bin/rails`系のコマンド実行時にconcurrent-rubyでSegmentation faultが発生する件のメモ📝

個人のWebサービスがRuby 3.3アップデート後にbin/rails系のコマンド実行時にconcurrent-rubyでSegmentation faultが発生したのでメモ $ bin/rails c /app/vendor/bundle/ruby/3.3.0/gems/concurrent-ruby-1.2.2/lib/concurrent-ruby/concurrent/atomic/lock…

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

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

Ruby: Haml v6アップデート時のカスタム属性の振る舞いの互換性を維持するメモ📝

Haml v6からHamlの内部実装がHamlitに置き換わりパフォーマンス向上等のメリットがありますが、 github.com 以下のissueでコメントされている通り、 github.com Vue.js等を利用している場合に以下のようなfalsyの値がv5系では<cutsom-element />となっていたのが、 %cutsom-ele</cutsom-element>…

Vue.js: 静的解析でVue3から非推奨なディープセレクタ`::v-deep`をエラーにするメモ📝

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

`vscode-standard-ruby`でプリインストールのrubyが利用されてしまうのを直した時のメモ📝

vscode-standard-rubyでプリインストールのrubyで実行されてしまいパッケージマネージャーで関しているバージョンで実行されずLSPが落ちてしまいハマったので対応したことをメモ github.com 事象 解決方法 参考 事象 以下のようにターミナルで確認するとパッ…

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 $ …

Ruby on Rails: テスト用にrouteを動的に追加するメモ📝

テスト用にRoutingを動的にいじってテストしたいことがたまにあるのでやり方をメモ まず以下のようなテスト用のhelperを用意します。 中でやっていることは動的にrouteを追加するdraw_test_routesとそれをリセットするreload_routes!を実装しています。 modu…

型定義の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…

Ruby on Rails: メーラー関連のファイルを`app/mailers`に集約するメモ📝

Ruby on RailsでメーラーのViewはデフォルトでapp/views配下に置かれてしまい数が多くなってくるとControllerからrenderされるものとMailerからrenderされるものが混在してしまい見通しが悪くなるケースがあります。 メーラーのビューは app/views/name_of_m…

VSCodeの`rebornix.ruby`から`shopify.ruby-lsp`に乗り換えるメモ

今までVSCodeでRubyを使うときにはrebornix.rubyを使うことが多かったと思うのですが、 marketplace.visualstudio.com 現状は非推奨となっており、 Shopify's ruby-lsp and associated vscode-ruby-lsp are recommended alternatives to this extension. It …

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

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

Ruby on Rails: 個人のサービスをRails v7.1にアップデートしたのでやったこととかメモ📝

2023/10/05にRuby on Rails v7.1がリリースされました rubyonrails.org 個人のwebサービスなので以下のように規模はかなり小さめですがやったこととかをメモ +----------------------+--------+--------+---------+---------+-----+-------+ | Name | Lines …

Ruby on Rails: Content Security Policyを使ってみたのでMEMO

Ruby on Rails 5.2からContent Security Policyヘッダーを設定するDSLが提供されました。 2.5 Content Security Policy Rails 5.2 ships with a new DSL that allows you to configure a Content Security Policy for your application. You can configure a…

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フックを使う…

Vue.jsのtransitionで`.v-enter`を設定しているのにアニメーションが動かない場合の対応法MEMO📝

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

GoogleFontsで一部のテキストだけロードして最適化する方法メモ📝

ブランドロゴ等で目立たせるためにWebフォントを利用する際に特定の文字列だけ取得して最適化する方法をメモ 結論 textパラメーターで利用した文字を付与してあげれば良い @import "https://fonts.googleapis.com/css2?family=Ubuntu&display=swap&text=Bra…