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を [...]
2021.11.08 WEBシステム開発 Reactのprops drilling(バケツリレー)とhooksに我々はどう立ち向かっていけばよいのか 最近Reactに入門しました。 アプリケーションの規模が大きくなってくると問題になってくる一つにprops drilling(バケツリレー)と呼ばれるものがあります。 今回はprops drilling(バケツリレー)が“つらい”と思ってから、どのように立ち向かっていったのか一例をご紹介します。 [...]
2021.09.09 WEBシステム開発 Windowsで至高のターミナル生活を求めて(番外編:ArchLinux on WSL2) 以前の記事「Windowsで至高のターミナル生活を求めて(Windows Terminal編)」 ではWindows Terminal + Ubuntu-20.04 on WSL2をご紹介しました。 Ubuntu-20.04もとてもいいLinuxディストリビューションだと思いますが、MSYS2を使 [...]
2021.07.07 WEBシステム開発 VueとReactのプロジェクトをHMR(ホットリロード)が爆速と噂の「Vite」を使って構築してみる Vitehttps://vitejs.dev/ Vite(ヴィート)はVue.jsの作者のEvan You氏が開発した次世代フロントエンドツーリングです。 公式では以下のように説明してます。 以下、Google翻訳 On demand file serving over native ESM [...]
2021.05.08 WEBシステム開発 Docker Desktop on WSL2でWin32パスを使用したファイル操作でハマったこと 皆さんファイル操作していますか。 単純な文字列や、簡便な正規表現での置換処理であれば sed や perl のワンライナーで置換することもあるかと思います。 ただ、複雑な置換操作になると何かしらのアプリケーション、スクリプトを書いて置換しないと辛い時 [...]