今年も一年が終わるということで今年も振り返ってみる。 今年の振り返り アウトプット 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用のはある)、いい感じのものが無いかなと思…

最近、Vue.jsのTransitionを使う機会があったので使い方とかをMEMO Transitionとは サンプルコード Transitionのイベントを取得する おわりに 参考 Transitionとは Vue.jsのコンポーネントで簡単にアニメーションを設定できる仕組み。 vuejs.org transition…

webpackのbuildのキャッシュ、checksumを保存して一致してたら実行しないといった仕組みを用意しないといけないのかなと思っていたのですが、webpack v5からはpersistent cachingの機能が追加されていて簡単にキャッシュして高速化できたのでメモ ↓公式ドキ…

webpackの移行先として、下記の図の通り速度を重視しesbuildが検討されることも多いかと思いますが、 esbuild - An extremely fast JavaScript bundler webpackを使いつつ一部のbuildをesbuildに置き換えるようなことができるesbuild-loaderというライブラリ…

追記(2023/09/24) Vue SFC(.vue)を使ってコンポーネントに分割し疎結合にすることでコードの見通しを良くし負債化を抑制できますが、適切なタイミングで分割できずコンポーネントが大きくなりすぎると見通しが悪くなり負債になってしまうので行数とかでエラ…

バージョンアップによるbuild結果の差分を見るときなど特定のディレクトリ内の全ファイルを md5でchecksumを取得して差分が出てるファイルを特定できると便利なのでやり方をメモ mac ubuntu 参考 mac ls -Fd $(find $FIND_PATH)で特定ディレクトリ以下のファ…

Railsを活用したWebサービスが大規模になってきた場合に、最近モジュラモノリスが採用されるのを良く耳にする気がしますが、現状その概要やRailsにおいてどのように実装されているのか、あまり分かっていなかったのでメモ モジュラモノリスとは？ モジュラー…

最近GitHub Actionを触っていて、タイトル通りon: pull_requestとon: pull_requestの実行コンテキスト等の違いによって、 大分ハマったので、それぞれの違いとかを調べてみたのでMEMOしておきます。 https://github.com/features/actions on: pull_requestと…