JavaScript
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 …
最近個人のサービスのフロントエンド周りをタイトル通り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…
個人のWebサービスでj.sファイルを全て.tsファイルに変更するときに@rails/ujsの型定義が提供されておらず、ちょっとハマったのでメモ @rails/ujsとは @rails/ujsは、ActionView内の管理されているnpm packageです。 github.com Railsのガイドで記載されてい…
Jestはデフォルトでcacheを利用するのですが、CIでも利用できるようにしとくと高速化できそうだったのでやり方をメモ Whether to use the cache. Defaults to true. Disable the cache using --no-cache. Jest CLI Options · Jest jestでcacheを保存するパス…
JestでTypeScriptのテストを行う際にはts-jestを利用することが多いと思うのですが、@swc/jest を利用するとテストを高速化できるとのことで個人のWebサービスで試してみたのでメモ 前提事項 jest: 29.0.3 @swc/jest: 0.2.22 @swc/jestとは @swc/jestのinsta…
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)を使ってコンポーネントに分割し疎結合にすることでコードの見通しを良くし負債化を抑制できますが、適切なタイミングで分割できずコンポーネントが大きくなりすぎると見通しが悪くなり負債になってしまうので行数とかでエラ…
vue-tscなるものを使うとSFC内のtemplate部分も含めて型チェックを行えて便利っぽいようなので使い方とかをメモ www.npmjs.com vue-tscとは？ vue-tscとはVeturの後継であるVolar内で管理されているライブラリです。 github.com vue-tsc Type-check and dts …
Vue.jsのsetupのprops等、引数を使わないけど型定義だけ設定しときたい場合等、no-unused-varsを無効化したいケースがあります。 github.com 毎回eslint-disable-lineを使うのも手間なので、他の静的解析のツールの慣習に従って_始まりの場合は許容したかっ…
テストフレームワークをJestからVitestに移行するのを試してみたので手順とか躓いたところとかをメモ Vitestとは？ JestからVitestに移行する Vitestのインストール Vitestの構成ファイルを作成する テストコードの修正 テストを実行する おわりに Vitestと…
Viteを軽く触ってみて分かった使い方とかメモ ja.vitejs.dev 色々試してるリポジトリ github.com Viteのinstall/設定ファイルの作成 ドキュメント通りにnpm create vite@latestで自分の作りたい環境からテンプレートを作って、そこからカスタマイズしてくの…
間接的に依存しているライブラリに脆弱性がある場合等、自身のpackgae.jsonのどのpackageを更新すれば解消できるか等を調べたい場合、lockファイルを頑張って確認するのは大変です。 package manager(yarn, npm)の機能を使うと割と簡単に調べられたのでメモ …
jQueryなど一定Global Objectに展開したいライブラリをwebpackで扱う場合に単純に以下のように書いてしまうと、Global Objectに展開されずReferenceErrorが発生してしまいます。 import "jquery"; // Uncaught ReferenceError: $ is not defined $(document)…
既存のコンポーネントはVue2を使いつつ、新規のコンポーネントはVu3を使いたいみたいなケースがあると思うんですが、そういう時にaliasを使用するといい感じに実現できそうだったのでメモ やり方 各種パッケージマネージャーのalias機能を使用します。 alias…
個人で運用しているサービスのstylelintを13系から14系の上げたので、そのあたりでやったこととかをメモしておきます。 stylelint.io アップデート手順 公式で14系へのマイグレーションガイドが公開されているので、基本的にはそれをみてやっていきます。 st…
フロントエンド側から非同期でRails側にリクエストを投げたいときとかに今までは以下のような定数を集めたmoduleをフロントエンド側に用意してたりしていたのですが、 export const BLOG_API_ENDPOINT = "/api/blogs"; export const LIKE_API_ENDPOINT = "/a…
Rails 7からimportmap-railsを使ったフロントエンド環境が提供される予定です。 Rails new時にimportmap-railsを使用するoptionも追加され試しやすかったので、軽く使ってみました。 利用方法とかメモしておきます github.com github.com import mapsとは 簡…
@vue/compiler-sfcを3.2系にあげたときにタイトルどおり以下のエラーが発生したのですが、 TypeError: vue_1.createElementVNode is not a function CHANGELOG等を見ても破壊的変更に記載されておらず、多少ハマったので対応方法をMEMOしておきます blog.vue…
StoryBookをGitHub Pagesで公開して見えるようにすると結構便利そうだったのでやり方をMEMO Storybookの導入方法については以下のエントリを参照してください madogiwa0124.hatenablog.com 今回は以前書いた以下のアクションにStorybookのbuildプロセスを追…
以下のような環境にStorybookを導入してみたので対応したこととかをメモしておきます。 package version vue 3.1.4 webpack 5.44.0 Storybookとは まずはStorybookについて簡単に説明します。 storybook.js.org Storybook is an open source tool for buildi…
個人のWebサービスをVue2系からVue3系にアップグレードしてみたので、やったこととかメモしておきます 基本的な流れとしては以下の記事を参考にさせていただきました♂️ zenn.dev 事前準備 plugin:vue/vue3-recommendedを有効化する Vue本体のアップデート …
個人のWebサービスでGAでトラッキング出来るようにしてみたので、やったこととか手順とか色々、MEMOしておきます GA(Google Analytics)とは? marketingplatform.google.com ユーザー像を把握。 ユーザー像を詳しく分析して理解を深めましょう。Google アナリ…
Vue、TypeScriptが導入時されているプロジェクトにJestを導入したので、そのあたりの手順をMEMOしておきます 関連ライブラリのinstall Jestの設定ファイル作成 Jest実行用のコマンドをpackage.jsonに追加 CIでJestを実行する 導入時に発生したエラー解消ログ…
JavaScriptのエラー検知にRollbarを使用しているのですが、最近npmで公開されているRollbar.jsを利用するとSnipetを使わなくて済むことがわかったので利用方法をメモしておきます 公式ドキュメント記載のSnipetを利用する方法 Rollbar.jsを使ったSnipetを使…
