やりたいこと styled-componentsでcss propsを使ってスタイリングをしたい 開発環境 開発環境はCRAで構築したReactアプリケーションであり、TypeScript、styled-componentsを採用している。 コンポーネントへのスタイル注入方法を検討中、css propsを活用し…

JavaScriptでの配列操作を使う機会が多いが、毎回ググってる気がするのでひとまずよく使うものについて整理してみる。 配列操作 const arr1 = [10, 20, 30]; const arr2 = [40, 50, 60]; const arrObj = [ { id: 1, name: "A" }, { id: 2, name: "B" }, { id…

やりたいこと null や undefined の値をfalsyな真偽値として扱いたい 結論 Boolean() あるいは !!で二重否定を使う。 const unData = undefined; const nullData = null; const strData = ""; const arrData: string[] = []; const objData = {}; // !! をつ…

すでに令和も4年。平成まではギリ西暦⇔和暦の変換ができていたけれど、令和になってからは覚えるのもめんどくさくなり、ググらないと今は令和何年なのかもわからないという人もいるのでは？ 前職は病院の事務員だったので、様々な行政の書類や日々の業務の中…

E2Eテストとは何か？ End to Endテストの略であり、ユーザー利用と同じようにシステム全体を操作して確認するテストのこと テストを自動化するメリデメ メリット 反復的な手作業のコストを削減できる テストの実施コストが下がり、早期にバグチェックがしや…

create-react-app で生成されている /public/manifest.json とは何者なのか？無知であったマニフェストファイルについて改めて調べてみた。 調査前の前提知識 デフォルトで生成される manifest.json { "short_name": "React App", "name": "Create React App…

PC、Android、iPhoneで「vh」の高さが違い、見事にハマったことがあるので、記事としてまとめておきたいと思います。 vh（viewport height）とは 「vh」は「viewport height」の略で、viewport の高さ（ブラウザの高さ）に対する割合を指定することが可能で…

アクセシビリティを極めていきたい駆け出しフロントエンドエンジニアです。 アクセシビリティな実装をする上で意識すべきことはたくさんありますが、中でもモーダルは考えることが多いなと思っています。 今回は、あえて react-modal などのライブラリを使用…

アクセシビリティとは アクセシビリティの言葉のとおり、アクセスのしやすさを意味していて、コンテンツの利用がしやすさとほぼ同義だとおもいます。 ユーザービリティは使いやすさ アクセシビリティは、更に幅広い人や状況でも使えることという棲み分けでし…

ErrorBoundary コンポーネントツリーのどこかで例外が発生した場合、アプリケーション全体が影響を受けてしまう。アプリの規模が大きくなると、例外が発生した箇所を特定するのが難しくなってくる。 ErrorBoundaryは、特定のコンポーネントで例外が発生した…

Hooksとは？ React16.8.0で追加された機能 クラスコンポーネントよりもコード量が少なくなる ロジックを分離できるので、ロジックの再利用やテストがしやすい。 フック API リファレンス 主なフックとしてあげられているものをまとめてみる useState stateと…