Ruby 3.2.0で導入されたYJITをHerokuで有効化してみたのでやり方をメモ github.com HerokuでYJITを有効化する 結論だけ言うと、以下のコマンドを実行して環境変数RUBYOPTに--enable-yjitを指定してあげればです✨ heroku config:set RUBYOPT="--enable-yjit" …

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及び実行コマンドを修正…

昨年末Ruby 3.2.0がリリースされましたね✨ www.ruby-lang.org 今更ながらローカルのRubyのバージョンをrbenvで3.2.0に上げようと思ったのですがエラーが発生したのでその対応方法とかをメモ 発生した問題 解決方法 発生した問題 いつもどおり以下のコマンド…

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

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

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

今年も一年が終わるということで今年も振り返ってみる。 今年の振り返り アウトプット BLOG BLOGは、今年1年で48記事書いていて、1週間に1記事ぐらい書いてるので、そこそこ書いてた✍ (月間PV数は4500くらい) 公開したツールとか 今思い返すとgemとかGitHub …

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

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

node_modules配下のpackageのchunckをvendor chunkに分割するといったWebpack時代の最適化手法をViteで再現する方法をMEMO 各チャンクと router で使ってる node_modules で、ライブラリがかなりの部分で重複してしまう。(react, vue など) なので、 vendor …

dependabotでterraform providerのバージョンアップを行うようにしたのでやったことととかをメモ (ほぼ以下の記事の通りですが) qiita.com dependabot用のyamlを用意する 記事の通りに以下のようなyamlを.github/dependabot.ymlに配置してあげるだけでOKでし…

最近個人のサービスのフロントエンド周りをタイトル通りwebpack + SimpackerからVite + Vite Railsに移行したので対応したこととかをメモ 前提事項 Vite v.3.2系のHMRは使わない構成になります Vite Rubyを使うとbin/viteで起動しないといけないっぽかったの…

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

CircleCIでテストを分割して並列実行する場合に以下のドキュメントに記載されているようなcircleci tests glob "foo/**/*"のようなコマンドを実行すると思います。 circleci.com このときに任意の複数のディレクトを対象にするのはcircleci tests glob {foo,…

個人のWebサービスでj.sファイルを全て.tsファイルに変更するときに@rails/ujsの型定義が提供されておらず、ちょっとハマったのでメモ @rails/ujsとは @rails/ujsは、ActionView内の管理されているnpm packageです。 github.com Railsのガイドで記載されてい…

Railsを使っていてRSpecでststem specとrequest specのテストだけ実行したい時とかに--pattern関連オプションを利用すると便利だったので使い方をメモ RSpecの--patternの使い方 公式Doc relishapp.com Help $ bundle exec rspec -h # ... -P, --pattern PAT…

何かしらの非同期なバッチ処理を実装したい場合にはSidekiqをActiveJobのバックエンドとして利用することが多いと思いますが、SidekiqはRedisに依存しており、個人のWebサービスとかでなるべくコストを抑えたいときにはRedisを立てずに実装したいものです。 …

Jestはデフォルトでcacheを利用するのですが、CIでも利用できるようにしとくと高速化できそうだったのでやり方をメモ Whether to use the cache. Defaults to true. Disable the cache using --no-cache. Jest CLI Options · Jest jestでcacheを保存するパス…

普段、CSV出力系の機能を作ることが稀に良くあるが、割と毎回同じようなことを実装してる気もするのでいい感じに共通化できないか実装を検討したのでメモ CSV出力の実装検討メモ 考えたこと 実装してみる 利用例 参考 ※ベンチマークは特に取ってない CSV出力…

2022/9/6にRack3がリリースされました github.com Security fixが入ってたり、破壊的変更が入ったりもしてるようですね RailsやSinatraでもアップデートの準備が進められているようです。 github.com github.com 自分も個人で細々とメンテしているオレオレWe…

JestでTypeScriptのテストを行う際にはts-jestを利用することが多いと思うのですが、@swc/jest を利用するとテストを高速化できるとのことで個人のWebサービスで試してみたのでメモ 前提事項 jest: 29.0.3 @swc/jest: 0.2.22 @swc/jestとは @swc/jestのinsta…

以下の通りHeroku有償化に個人で運用しているbotの移行先を検討していたところ、GitHub Actionが結構よさそうだったのでメモ blog.heroku.com GitHub Actionの概要とかは過去記事で記載してます。 madogiwa0124.hatenablog.com Github Actionの価格 以下の通…

Railsで非同期jobを利用する際にSidekiqを使っている場合、任意のJobをスケジュール実行したいことがあります。 今までは割とsidekiq-cronを使うことが多かったのですが、最近はsidekiq-schedulerの方が活発にメンテナンスされており、そちらを使ってみたの…

Rails 6から導入されたActiveSupport::ActionableErrorを使うと例外発生時に画面から任意の処理が実行できて便利そうだったので使い方とかをメモ github.com Rails標準ではActiveRecord::PendingMigrationErrorが発生時にこちらを使ってmigrationが行えるよ…

webpackの公式guideで紹介されたthread-loaderを使って並列buildしてみたのでやり方とか結果をメモ The thread-loader can be used to offload expensive loaders to a worker pool. https://webpack.js.org/guides/build-performance/#worker-pool 前提 web…

eslint、stylelintにもcache用のオプションがあって差分のあったファイルだけ実行して時間を削減できることを知らなかったのでやり方とかをmemo eslintでcacheを利用する CIでeslintのcacheを利用する stylelintでcacheを利用する CIでstylelintのcacheを利…

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