kyohei's blog

React のカスタムフックのテストでハマったので備忘録として書きます。 現象 以下のようなオブジェクトの配列の state とそれを更新する関数を持つカスタムフックを作成しました。 export function useCheckState() { const [data, setData] = useState([ { id: 'foo', isChecked: t… read more

去年の今頃（2022 年 1 月）くらいから、コーディングチャレンジを始め、Leetcode での問題解答のストリーク日数が 365 に達したので振り返りも含めて、やってきたこと書いてみようと思う。 https://leetcode.com/kyohei8/ コーディングチャレンジとは プログラミングコンテストやコーディングテストなどと言われてて、正式な名称はわからないのだけど、オンライン上のサ… read more

前記事の続き JavaScript Map vs Object（実装編） | kyohei's blog パフォーマンス 結局、どちらも同じようなことができることはわかったので、パフォーマンス的にどちらを利用するかを検証してみます。 Perflik を利用して、各処理のブラウザでのパフォーマンスを図ってみた。 (macOS Monterey) Chrome Version 99 Safari Ve… read more

JavaScript では単純な連想配列（ハッシュマップ）を実装する場合、Map または Object を利用することが多いと思う、使い方がよく似ているためどちらを選択していいか迷うときがある、今回はその違い、パフォーマンス、使い所をまとめてみた。 そもそも... JavaScript は元来(ES5 までは)、プリミティブな型以外の”データの集合”を表す場合、すべて Object となっており、… read more

TypeScript で ES Module を import を絶対パスで参照するやり方です。 絶対パスで import 文を書くと以下のようになります。 import { Heading } from '../../../components/common/Typography'; import { UserTypes } from '../../../constant… read more

Next.js (React)でモーダルやページ内でステップを表示する際に別の内容を表示しようとする際に、リロードやブラウザバックにより、その状態を保持したり、ユーザが思ったような挙動をしたい場合、location.replace メソッドを使って、ページ遷移をせず、その状態をブラウザに保持することができます。 例えば以下のようにモーダルが開いているような UI の場合、通常は js 内の変数(s… read more

CircleCI を利用して GitHub の push から自動的に vercel のプロジェクトへデプロイする方法です。2019 年頃、まだ vercel が now だった時代にやっていたのですがいろいろ変わったので再度設定してみました。 TL;DR; 自分の場合は CircleCI の config ファイルを以下のように設定し、GitHub に push することで自動的にデプロイが実行… read more

TL; DR: import axios, { AxiosError } from 'axios'; try { await axios.get('...'); } catch (e) { if ((e as AxiosError).isAxiosError && e.response) { // axiosのエラー thr… read more

React TypeScript Cheatsheet を見ていたら、React.FC を非推奨してたので、理由を少し調べてみた。 主な理由はこの CRA の pr に書いてあった。 https://github.com/facebook/create-react-app/pull/8177 マイナス面として 暗黙的な children の定義してしまう React.FC でコンポーネントを… read more

The TL;DR: Next.js の Link component と chakraUI の Link component を利用するときは hrefPass を利用します。 import NextLink from 'next/link'; import { Link } from '@chakra-ui/react'; <NextLink href=… read more