あるクリックイベントの中で、最後window.location.hrefで画面遷移させているコンポーネントをテストしたい JestはNode環境で動いているので、何もせずテストでexpect(window.location.href).toBe(expected)と書いてもWeb標準のwindowがないためエラーになっ…

StorybookのStoryをJestに取り込んでコンポーネントのテストをしたい このとき、必要なライブラリは以下だとわかった @testing-library/react @storybook/testing-react @testing-library/jest-dom @testing-library/reactはReactの仮想DOMを操作するのに必…

pnpmというJavaScript のパッケージマネージャーを知ったので調べた pnpm.io npmやyarnと並ぶパッケージマネージャーで以下の特徴がある（サイトトップより） 他のツールよりも最大で2倍高速 ディスク容量を節約 モノレポサポート package.jsonに書かれてい…

CIであるソースをWebpackでビルド中にエラーが発生して中断した 原因ははっきりとOOMと出ていたので実行時のmaxメモリサイズを増やすことにした エラーメッセージもほぼこの方の記事通りだったので参考にした qiita.com 結果、次のコマンドで実行することで…

Typescript4.7の新機能をいくつかみてみた devblogs.microsoft.com ECMAScript Module Support in Node.js TypscriptにおけるNode.jsのECMAScript Moduleをサポート これにより .mts/.ctsという拡張子が増えた ESM / CJS ごとに型定義を読み分けられるように…

実装中のブランチがたくさんあってどれが新しいかがわからなくなったので更新日の降順にならべたい git branch --sort=<key> これを使うとよい git-scm.com にはgit-for-each-refと同じもの（objectsize, authordate, committerdate, creatordate, taggerdat）が</key>…

こちらのイベントに参加した cssnite.doorkeeper.jp Qiita株式会社の綿貫さんが１人で２時間Figmaの制作フローを解説するというイベント 都度質問の回答をしながらだったのでちょっとやりにくそうだったが、とても勉強になった 特に参考になったのは以下の２…

気になっていたFigma Tokensについて調べた www.figma.com Figma TokensはFigmaでデザインしたデザイントークンをReactなどで使用できるようにするFigma Plugin borderの半径やspacerの単位、カラーやタイポグラフィまで、あらゆるデザインオプションに使用…

2022/5/14に開催されたTechFeed Conference 2022を拝聴した TechFeed Conference 2022 このとき@koba04さんの発表で、提案段階のuseEventとという新しいHooksを知ったのでメモ github.com useCallbackでこのように書いていた処理では、中でnameを使っている…

2022/5/14に開催されたTechFeed Conference 2022を拝聴した TechFeed Conference 2022 このときのアクセシビリティツリーに関するメモ アクセシビリティツリーとは 支援技術向けに公開される情報がまとめられたツリー スクリーンリーダーなどの支援技術はこ…

2022/5/14に開催されたTechFeed Conference 2022を拝聴した TechFeed Conference 2022 このときの鹿野さんのセッションで知ったCSSについてのメモ scroll-margin-top これまでアンカーリンクでページ内遷移をした際に、アンカー要素の上部にスクロールするた…

コアWeb Vitalsの一つLCPを改善したい 対応策としては調査済みで、 改善方法 サーバーのレスポンス時間の改善 レンダーブロッキングスクリプトを避ける 効率的な画像エンコード 次世代フォーマットでの画像配信 テキスト圧縮の有効化 オリジンへの事前接続 …

TypeScriptで元はstringだが型定義したIDを作りたいとき type AreaId = string; のように定義していたが、TypeScriptは構造的な部分一致により同一の型かどうかを判断しているので、これではどんなstringの文字列も通してしまう そこで厳密に区別される仕組…

Figma Config 2022 発表されたアップデートのうち、気になった機能を触ってみた Figma Releases Auto Layout Auto Layoutは入れ子になっている要素の長さや数に応じて、自動的にオブジェクトのレイアウトを調整してくれる機能 これの複数要素間のスペースを…

ChromaticのビルドをGithub ActionsのJobにするときにブランチ名を使いたい Github Actionsでブランチ名を取得するにはどうするか調べた 以下の記事が参考になった qiita.com プルリクエスト時は以下 マージするブランチ名は ${{github.head_ref}} マージ先…

Redisを使っているプロジェクトでJestでテストが失敗するのでRedisをモック化したい 調べたらredis-mockがよさそう www.npmjs.com 基本的な使い方 import redis from 'redis-mock' jest.mock('redis', () => redis) 毎回これを記述するのは大変なのでjest.co…

Chromaticは特に指定がない限り同じブランチかそのブランチのコミット履歴に属する以前のビルドとの差分をチェックする そしてその差分が承認されるとそれがベースラインのスナップショットとなり次回の変更との差分に使用される Chromaticのブランチングと…

Github Actionsのあるジョブ内でnpm installしているが、毎回やるのは無駄なのでキャッシュしてビルドを早くしたい 調べたら公式のこれを使うのがよいみたい github.com Jobの実行前のnodeの環境を設定できる 基本的な使い方 steps: - uses: actions/checkou…

Github Actionsでラベルの種類によってJobをスキップする方法を調べた https://docs.github.com/ja/actions/using-jobs/using-conditions-to-control-job-execution 基本的な使い方はjobs.<job_id>.ifを使う 例えばこんな感じ name: example-workflow on: [push] job</job_id>…

以前Vitestについて軽く調べたが、実際に試してみる 【Vite】Viteとは - UGA Boxxx こちらの記事を参考にさせていただく dev.classmethod.jp 上の記事ではReactだが、今回はVueで同じようなことをやってみる テストするページはテンプレートから作ったままの…

ViteはマルチページAppに対応しているので、複数ページの設定を調査した Building for Production | Vite マルチページAppとは上の図にあるように/だけではなく、/nest/というページがあるようなアプリケーション やりかたはvite.config.jsのrollupOptions.i…

Viteを実プロジェクトで使うことを視野に入れていくつか試してみた Viteについて uga-box.hatenablog.com このうち、buildして出力されるファイル名を変えたいのでどうやるか調査した vite.config.ts を変更する デフォルトではindex.[hash].js が出力される…