Blog
Reactのカスタムフックテストでハマった話
July 21, 2024 - 360 words - 2 mins
React のカスタムフックのテストでハマったので備忘録として書きます。
現象
以下のようなオブジェクトの配列の state とそれを更新する関数を持つカスタムフックを作成しました。
export function useCheckState() {
const [data, setData] = useState([
{ id: 'foo', isChecked: t…
read more
LeetCodeに挑戦して1年間過ごした話
February 05, 2023 - 3053 words - 16 mins
去年の今頃(2022 年 1 月)くらいから、コーディングチャレンジを始め、Leetcode での問題解答のストリーク日数が 365 に達したので振り返りも含めて、やってきたこと書いてみようと思う。
https://leetcode.com/kyohei8/
コーディングチャレンジとは
プログラミングコンテストやコーディングテストなどと言われてて、正式な名称はわからないのだけど、オンライン上のサ…
read more
JavaScript Map vs Object (パフォーマンス編)
March 26, 2022 - 1223 words - 7 mins
前記事の続き
JavaScript Map vs Object(実装編) | kyohei's blog
パフォーマンス
結局、どちらも同じようなことができることはわかったので、パフォーマンス的にどちらを利用するかを検証してみます。
Perflik を利用して、各処理のブラウザでのパフォーマンスを図ってみた。
(macOS Monterey)
Chrome Version 99
Safari Ve…
read more
JavaScript Map vs Object(実装編)
March 23, 2022 - 2264 words - 12 mins
JavaScript では単純な連想配列(ハッシュマップ)を実装する場合、Map または Object を利用することが多いと思う、使い方がよく似ているためどちらを選択していいか迷うときがある、今回はその違い、パフォーマンス、使い所をまとめてみた。
そもそも...
JavaScript は元来(ES5 までは)、プリミティブな型以外の”データの集合”を表す場合、すべて Object となっており、…
read more
TypeScriptでimportを絶対パスの参照にする
January 19, 2022 - 585 words - 3 mins
TypeScript で ES Module を import を絶対パスで参照するやり方です。
絶対パスで import 文を書くと以下のようになります。
import { Heading } from '../../../components/common/Typography';
import { UserTypes } from '../../../constant…
read more
Next.jsでダイアログの状態をパラメータで保持する
January 13, 2022 - 1088 words - 6 mins
Next.js (React)でモーダルやページ内でステップを表示する際に別の内容を表示しようとする際に、リロードやブラウザバックにより、その状態を保持したり、ユーザが思ったような挙動をしたい場合、location.replace メソッドを使って、ページ遷移をせず、その状態をブラウザに保持することができます。
例えば以下のようにモーダルが開いているような UI の場合、通常は js 内の変数(s…
read more
CircleCIでvercelにデプロイする(2021年版)
November 01, 2021 - 1336 words - 7 mins
CircleCI を利用して GitHub の push から自動的に vercel のプロジェクトへデプロイする方法です。2019 年頃、まだ vercel が now だった時代にやっていたのですがいろいろ変わったので再度設定してみました。
TL;DR;
自分の場合は CircleCI の config ファイルを以下のように設定し、GitHub に push することで自動的にデプロイが実行…
read more
axiosのエラーハンドリング
October 20, 2021 - 316 words - 2 mins
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.FC(React.FunctionComponent)を使わないほうがいい理由
October 14, 2021 - 1108 words - 6 mins
React TypeScript Cheatsheet を見ていたら、React.FC を非推奨してたので、理由を少し調べてみた。
主な理由はこの CRA の pr に書いてあった。
https://github.com/facebook/create-react-app/pull/8177
マイナス面として
暗黙的な children の定義してしまう
React.FC でコンポーネントを…
read more
chakra-uiでNext.jsのLinkを利用するとき
August 24, 2021 - 379 words - 2 mins
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