2024.10.08 WEBシステム開発 Vitestでブラウザテストができる!? Browser Modeを試してみた 久々に Vitest のドキュメントを漁ったら experimental 段階ですが新しい機能が追加されていました。 昨今のフロントエンド界隈のエコシステムが更新されるスピードは早いですね。 参照Browser Mode | Guide | Vitest 今回は Vitest の実験的（expe [...]
2024.08.21 WEBシステム開発 TypeScriptの型定義がない外部ライブラリとmonorepoを組み合わせた時にTypeScriptのコンパイルエラーが発生して困ったこと 当社では CSS スタイリングではCSS Modulesを、日付選択（Datepicker）のライブラリにReact DayPickerを使用しています。 React DaypickerではCSSの型宣言はされているのですが、CSS Modulesの型定義ファイルがないため独自にCSSのスタイルを [...]
2024.06.11 WEBシステム開発 Storybook の「play 関数＋ composeStories」を使用したテストで、MSW のハンドラを通らないケースの原因について 今回は Storybook に play 関数を定義して API コールをしている Story があり、その Story を composeStories 関数で再利用したテストで、時折テストが失敗する不安定なテストの原因とその対策についてです。 Storybook と MSW のバージョン S [...]
2024.04.25 WEBシステム開発 Reactでフォーカス可能な要素にフォーカスを当てる方法 入力要素にフォーカスしたい 編集ボタンを押すと入力要素を表示するフォームを無性に作りたくなる時ってありますよね。 例えばこんな感じのフォームです。 キーボード操作の時に使いづらい 筆者はキーボード操作でフォームの入力を行うことが多いのですが、この場合キーボード操作だけだと使いづらいと感じます。 [...]
2024.02.15 WEBシステム開発 monorepoを1つのStorybookで管理したい！その手順と遭遇した問題を解説します。 現在開発中のフロントエンドのプロジェクトではアプリケーションを横断して使用するコンポーネントが必要なこともあり、pnpm workspace を利用した monorepo 構成を取っています。 アプリケーション開発では、コンポーネント単位で細かく実装、確認、テストができると便利です。そう、Stor [...]
2023.12.12 WEBシステム開発 React Hook FormでZodを使ってフォームの入力値をAPIのデータ形式に変換したい！ React Hook FormとZod便利ですよね。 個人的には特にZodを使うことで、不確定なデータをZodのパースを通した後は型安全に扱えるようになることや、parse don’t validateな雰囲気が気に入っています。 参照 https://react-hook-for [...]
2023.09.13 WEBシステム開発 複数OSに対応しているchezmoiを使ってdotfilesを効率的に管理する 9月に入っても残暑が厳しいこの頃ですね。 皆さん環境構築していますか？ 今回は dotfiles を管理するツールである chezmoi をご紹介します。 dotfiles とは CUIで使用するユーザ固有のアプリケーションの設定は、ドットファイル（ファイル名が dot（.）で始まるファイル）に保 [...]
2023.07.25 WEBシステム開発 jotai v2.2.0 で入った atomWithDefault の破壊的変更による影響と対策 jotai v2.2.0 で atomWithDefault に破壊的変更が入った // suppose we have this const asyncAtom = atom(() => Promise.resolve(1)); const countAtom = atomWithD [...]
2023.07.12 WEBシステム開発 TypeScript で引数の値によって返り値の型を絞り込みたい!!! やりたいこと 引数に “A” | “B” の Union 型を取る 引数の値が A の時は返り値の型は { readonly type: “A”, readonly foo: striin [...]
2023.03.09 WEBシステム開発 WSL2のUbuntu 22.04をAnsible playbookを使って環境構築してみる 寒い季節から段々と暖かくなり、目や鼻がむずむずする季節性の風邪が起こりやすい季節になってきました。 つまり環境構築のいい季節ですね。 今回はWSL2のUbuntu 22.04をAnsible playbookを使って環境構築してみたいと思います。 Ansibleの紹介 Ansible について A [...]
2023.01.10 WEBシステム開発 Beyond the render hooks (return component from hooks) pattern. ～それでもReactでReact.FCを返すカスタムフックを作りたい!!～ 「ハンマーを持つ人にはすべてが釘に見える」という格言に耳が痛いと思う今日この頃です。 みなさん render hooks パターン使ってますか。 今回は記事タイトルの通り React.FC を返すカスタムフックを作りたい!! という筆者の願望を叶えるべく試行錯誤した内容をお送り [...]
2022.11.14 WEBシステム開発 Visually Hiddenパターンでアクセシビリティに配慮したマークアップを意識する React Testing Library や Chrome の開発者ツールでアクセシビリティツリーが見えるようになるなど、最近はただ見た目通りにマークアップするだけではなく、アクセシビリティに配慮したマークアップも必要なスキルセットになってきている流れを感じます。 筆者といえば、最近HTMLやC [...]
2022.09.09 WEBシステム開発 GitHub PagesのデプロイにCustom GitHub Actions Workflows (beta) を試す GitHub Pages使ってますか？ 恥ずかしながら筆者はこれまでGitHub Pagesを使ったことがありませんでした。 GitHub Pagesを試してみようと思っていたところに、ちょうど1ヶ月前（2022年7月27日）GitHub Pages用のCustom GitHub Actions [...]
2022.07.11 WEBシステム開発 Reactのレンダリング、差分検出処理の仕組みを学ぶ 恥ずかしながらReactのレンダリングとは何か、差分検出処理とは何かをよく分からずに、 再レンダリングを回避するため雰囲気でReact.memoを使ってきました。 今回はReactのレンダリングと差分検出処理について調べました。 INDEXReactの差分検出処理とはレンダリングプロセスレンダー [...]
2022.05.13 WEBシステム開発 プロダクトにReact Testing Library（RTL）を導入してみてハマったこと みなさんテスト書いてますか。 恥ずかしながら、筆者が開発中のプロダクトでは、現状ではお世辞にもテストがあるとは言えない状況です。 今回は開発中プロダクトにReact Testing Library（RTL）を導入してハマったことについてご紹介したいと思います。 INDEXReact Testin [...]
2022.03.17 WEBシステム開発 Reactのerror boundaryでキャッチされないエラーをキャッチできるようにする INDEXReactのerror boundaryerror boundaryがキャッチしないエラーWindow: unhandledrejection イベントerror boundary が非同期コードをキャッチできない理由unhandledrejectionに対応したerror bound [...]
2022.03.17 WEBシステム開発 Google Workload identity federationでGitHub Actionsを設定してみた 現在開発中のプロジェクトでReactで構築したSPAのアプリケーションを開発しています。 提供方法はビルドしたReactのアプリケーションをGoogle Cloud Storage（GCS）に配置する方式でしたので、継続的なデプロイを円滑に進めるためにGitHub ActionsによるCI/CDを [...]
