Madogiwa Blog

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

2022-01-01から1年間の記事一覧

2022年振り返り

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

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…

Vue: HistoireでVue.jsのコンポーネントのStoryを管理する

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

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

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

Viteでpackage関連(node_modules)のファイルをvendor chunkに分割する方法

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

dependabotでterraform providerのバージョンアップを行うMEMO

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

Ruby on Rails: webpack + SimpackerからVite + Vite Railsに移行するメモ📝

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

Vitestで時間を固定(`jest-date-mock`の`advancedTo`相当)する方法メモ📝

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

CircleCI: circleci tests globの結果から任意のファイルをexludeする方法MEMO

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

Ruby on Rails: TypeScriptで`@rails/ujs`利用するための最低限の型定義MEMO

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

rspecの`--pattern`オプションを使って特定のパスのテストだけ実行するMEMO📝

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

Ruby on Rails: Redisを使わないActiveJobのバックエンド「GoodJob」を使ってみるMEMO📝

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

JestのcacheをCIでも利用して高速化するメモ📝

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

Ruby on Rails: DBからの取得結果をいい感じにCSVにして出力を実装したいMEMO

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

Ruby: オレオレWebフレームワークMakanaiをRack3に対応しました

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

`@swc/jest`でjestによるTypeScriptのテストを高速化するMEMO📝

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

GitHub Actionでスケジュール実行するworkflowを作成するメモ📝

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

Ruby on Rails: sidekiq-schedulerでjobをスケジュール実行するメモ

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

ActiveSupport::ActionableErrorを使って例外発生時に画面から任意の処理を実行するメモ📝

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

webpack: thread-loaderで並列build行うメモ📝

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して実行時間を削減するメモ

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

`@vue/tsconfig`を使ってVue.jsを使用するプロジェクトのTypeScriptの設定をいい感じに行うMEMO📝

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

Vue.js: Transitionでコンポーネントにanimationを設定するMEMO

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

webpack v5で追加されたpersistent cachingでbuild結果をcacheして高速化するメモ

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

esbuild-loaderを使ってwebpackの一部loaderをesbuildに差し替えて高速化するメモ📝

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

`eslint-plugin-vue`を使って指定行以上のVue SFC(.vue)をエラーにして肥大化を防ぐメモ

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

特定ディレクトリ以下の全ファイルのchecksum(MD5)を取得する方法MEMO

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

モジュラモノリスの概要とRuby on Railsにおける実装パターンについてのMEMO

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

GitHub Actionの`on: pull_request`と`on: pull_request_target`の違いMEMO

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