Madogiwa Blog

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

フロントエンド

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 導入はすごく簡…

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…

`@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の機能が追加されていて簡単にキャッシュして高速化できたのでメモ ↓公式ドキ…