My Tech Blog
個人記事一覧
2025-10-06
[個人開発] React×TypeScript×Geminiで調味料代替案アプリをリリースしました！
2025-09-23
[エラー対応] Vitest の vi.mock で ‘Cannot access before initialization’ が出たときの解決法
2025-09-23
[エラー対応] Vitest で useNavigate() may be used only in the context of a <Router> component. が出た時の解決方法
2025-09-23
Vitest で Jest と同じモックを書いたときのエラー原因と解決方法
2025-09-23
Supabaseの戻り値でクラスメソッドが呼べない (is not a function) 問題を解決する方法
2025-09-23
Reactでチェックボックスの状態を管理する方法【filterで実装】
2025-09-07
React開発時のURL手入力を解消！useLocationで条件付きナビゲーションを実装
2025-09-06
Tailwind CSS v4 + Viteのセットアップ手順（v3からの変更点も解説）
前へ
次へ
![[個人開発] React×TypeScript×Geminiで調味料代替案アプリをリリースしました！](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.1.1%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY2NzU5MjQlMkY3NzViODVlMDQ1OThmYzVhNjYzOTI1YTViM2JjZDg3Yjg5MDEzMjM5JTJGeF9sYXJnZS5wbmclM0YxNzQxMTg4NTc0P2l4bGliPXJiLTQuMS4xJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz1iYTNmNjFjMzZhODEwMTFkY2IyOTkxNjU5MzQ0N2FhYg%26blend-x%3D120%26blend-y%3D462%26blend-w%3D90%26blend-h%3D90%26blend-mode%3Dnormal%26mark64%3DaHR0cHM6Ly9xaWl0YS1vcmdhbml6YXRpb24taW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1vcmdhbml6YXRpb24taW1hZ2UlMkZkYjQ2NGVlODMyZjg4MDZhNWY4OWU5NGI0NDZjNzJmYTNkZjNhMzhjJTJGb3JpZ2luYWwuanBnJTNGMTcxMjU0NjM1Nj9peGxpYj1yYi00LjEuMSZ3PTQ0Jmg9NDQmZml0PWNyb3AmbWFzaz1jb3JuZXJzJmNvcm5lci1yYWRpdXM9OCZiZz1GRkZGRkYmYm9yZGVyPTIlMkNGRkZGRkYmZm09cG5nMzImcz03YjBlOGQ0ZmYzNGY4MzNlNjJiYWIwYTc5ZjU2OGU0Mw%26mark-x%3D186%26mark-y%3D515%26mark-w%3D40%26mark-h%3D40%26s%3Dd050d695760e94c96301d387e69f61ea?ixlib=rb-4.1.1&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU1JTgwJThCJUU0JUJBJUJBJUU5JTk2JThCJUU3JTk5JUJBJTVEJTIwUmVhY3QlQzMlOTdUeXBlU2NyaXB0JUMzJTk3R2VtaW5pJUUzJTgxJUE3JUU4JUFBJUJGJUU1JTkxJUIzJUU2JTk2JTk5JUU0JUJCJUEzJUU2JTlCJUJGJUU2JUExJTg4JUUzJTgyJUEyJUUzJTgzJTk3JUUzJTgzJUFBJUUzJTgyJTkyJUUzJTgzJUFBJUUzJTgzJUFBJUUzJTgzJUJDJUUzJTgyJUI5JUUzJTgxJTk3JUUzJTgxJUJFJUUzJTgxJTk3JUUzJTgxJTlGJUVGJUJDJTgxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9NDcxNDgyOTgwMTUwZmQ4MzIwN2ZlNDcwODE4ZmUyNDA&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTgzOCZoPTU4JnR4dD0lNDB5LWtlaXl1JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9N2YxYjA5OTY3MDdkNDY5ZmZhY2I5ZTgwODM2YTU4ZjU&blend-x=242&blend-y=454&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&txt64=SklTT1UgfCDjg5fjg63jgrDjg6njg5_jg7PjgrDjgrPjg7zjg4Hjg7PjgrA&txt-x=242&txt-y=539&txt-width=838&txt-clip=end%2Cellipsis&txt-color=%231E2121&txt-font=Hiragino%20Sans%20W6&txt-size=28&s=d12ccb5b279e460218932c27345a5896)
![[エラー対応] Vitest の vi.mock で ‘Cannot access before initialization’ が出たときの解決法](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.1.1%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY2NzU5MjQlMkY3NzViODVlMDQ1OThmYzVhNjYzOTI1YTViM2JjZDg3Yjg5MDEzMjM5JTJGeF9sYXJnZS5wbmclM0YxNzQxMTg4NTc0P2l4bGliPXJiLTQuMS4xJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz1iYTNmNjFjMzZhODEwMTFkY2IyOTkxNjU5MzQ0N2FhYg%26blend-x%3D120%26blend-y%3D462%26blend-w%3D90%26blend-h%3D90%26blend-mode%3Dnormal%26mark64%3DaHR0cHM6Ly9xaWl0YS1vcmdhbml6YXRpb24taW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1vcmdhbml6YXRpb24taW1hZ2UlMkZkYjQ2NGVlODMyZjg4MDZhNWY4OWU5NGI0NDZjNzJmYTNkZjNhMzhjJTJGb3JpZ2luYWwuanBnJTNGMTcxMjU0NjM1Nj9peGxpYj1yYi00LjEuMSZ3PTQ0Jmg9NDQmZml0PWNyb3AmbWFzaz1jb3JuZXJzJmNvcm5lci1yYWRpdXM9OCZiZz1GRkZGRkYmYm9yZGVyPTIlMkNGRkZGRkYmZm09cG5nMzImcz03YjBlOGQ0ZmYzNGY4MzNlNjJiYWIwYTc5ZjU2OGU0Mw%26mark-x%3D186%26mark-y%3D515%26mark-w%3D40%26mark-h%3D40%26s%3Dd050d695760e94c96301d387e69f61ea?ixlib=rb-4.1.1&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUUzJTgyJUE4JUUzJTgzJUE5JUUzJTgzJUJDJUU1JUFGJUJFJUU1JUJGJTlDJTVEJTIwVml0ZXN0JTIwJUUzJTgxJUFFJTIwdmkubW9jayUyMCVFMyU4MSVBNyUyMCVFMiU4MCU5OENhbm5vdCUyMGFjY2VzcyUyMGJlZm9yZSUyMGluaXRpYWxpemF0aW9uJUUyJTgwJTk5JTIwJUUzJTgxJThDJUU1JTg3JUJBJUUzJTgxJTlGJUUzJTgxJUE4JUUzJTgxJThEJUUzJTgxJUFFJUU4JUE3JUEzJUU2JUIxJUJBJUU2JUIzJTk1JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MWU5MGZjOWRhNDNiZjM5OTExYjM1MDNmYjZjZDlkN2M&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTgzOCZoPTU4JnR4dD0lNDB5LWtlaXl1JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9N2YxYjA5OTY3MDdkNDY5ZmZhY2I5ZTgwODM2YTU4ZjU&blend-x=242&blend-y=454&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&txt64=SklTT1UgfCDjg5fjg63jgrDjg6njg5_jg7PjgrDjgrPjg7zjg4Hjg7PjgrA&txt-x=242&txt-y=539&txt-width=838&txt-clip=end%2Cellipsis&txt-color=%231E2121&txt-font=Hiragino%20Sans%20W6&txt-size=28&s=30f8f2a96dd3fedbff1ce911f9d146fd)
![[エラー対応] Vitest で useNavigate() may be used only in the context of a <Router> component. が出た時の解決方法](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%3Fixlib%3Drb-4.1.1%26w%3D1200%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkY2NzU5MjQlMkY3NzViODVlMDQ1OThmYzVhNjYzOTI1YTViM2JjZDg3Yjg5MDEzMjM5JTJGeF9sYXJnZS5wbmclM0YxNzQxMTg4NTc0P2l4bGliPXJiLTQuMS4xJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz1iYTNmNjFjMzZhODEwMTFkY2IyOTkxNjU5MzQ0N2FhYg%26blend-x%3D120%26blend-y%3D462%26blend-w%3D90%26blend-h%3D90%26blend-mode%3Dnormal%26mark64%3DaHR0cHM6Ly9xaWl0YS1vcmdhbml6YXRpb24taW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1vcmdhbml6YXRpb24taW1hZ2UlMkZkYjQ2NGVlODMyZjg4MDZhNWY4OWU5NGI0NDZjNzJmYTNkZjNhMzhjJTJGb3JpZ2luYWwuanBnJTNGMTcxMjU0NjM1Nj9peGxpYj1yYi00LjEuMSZ3PTQ0Jmg9NDQmZml0PWNyb3AmbWFzaz1jb3JuZXJzJmNvcm5lci1yYWRpdXM9OCZiZz1GRkZGRkYmYm9yZGVyPTIlMkNGRkZGRkYmZm09cG5nMzImcz03YjBlOGQ0ZmYzNGY4MzNlNjJiYWIwYTc5ZjU2OGU0Mw%26mark-x%3D186%26mark-y%3D515%26mark-w%3D40%26mark-h%3D40%26s%3Dd050d695760e94c96301d387e69f61ea?ixlib=rb-4.1.1&w=1200&fm=jpg&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUUzJTgyJUE4JUUzJTgzJUE5JUUzJTgzJUJDJUU1JUFGJUJFJUU1JUJGJTlDJTVEJTIwVml0ZXN0JTIwJUUzJTgxJUE3JTIwdXNlTmF2aWdhdGUlMjglMjklMjBtYXklMjBiZSUyMHVzZWQlMjBvbmx5JTIwaW4lMjB0aGUlMjBjb250ZXh0JTIwb2YlMjBhJTIwJTNDUm91dGVyJTNFJTIwY29tcG9uZW4lRTIlODAlQTYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1iMDExYThkODA4MGY2NjcxYWNkNmU3NWYyNWQ1YmZjYw&mark-x=120&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjEuMSZ3PTgzOCZoPTU4JnR4dD0lNDB5LWtlaXl1JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9N2YxYjA5OTY3MDdkNDY5ZmZhY2I5ZTgwODM2YTU4ZjU&blend-x=242&blend-y=454&blend-w=838&blend-h=46&blend-fit=crop&blend-crop=left%2Cbottom&blend-mode=normal&txt64=SklTT1UgfCDjg5fjg63jgrDjg6njg5_jg7PjgrDjgrPjg7zjg4Hjg7PjgrA&txt-x=242&txt-y=539&txt-width=838&txt-clip=end%2Cellipsis&txt-color=%231E2121&txt-font=Hiragino%20Sans%20W6&txt-size=28&s=f56e66e4af2a8db819b4cbb50c19529d)
