React 【React×TypeScript】propsの型を条件分岐させる propsの型を条件によって分岐させる方法を2つ記録しておきます🙋♀️※コンポーネントのサンプルコードに関しては、あくまでコードの書き方を示すものとして見てください。 1つ... 2022.07.31 ReactTypeScriptフロントエンド
React globalThis.IS_REACT_ACT_ENVIRONMENTを設定してもエラーが解決しないとき エラー内容 actがテスト環境に設定されてないという、React18から発生する可能性があるエラーです。 Warning: The current testing environment is not configured t... 2022.07.25 React
JavaScript 【Jest / React Testing Library】フォームのテストをすっきり書く フォームのテストって、項目数の多さや、複雑な仕様のために、テストケースが多くなってどんどん見にくくなることってありませんか🥲そんな時にちょっと役に立つ、フォームのテストをすっきり書く方法を紹介します。 テストするフォ... 2022.07.16 JavaScriptReactフロントエンド
JavaScript 【Jest/Testing Library/ next/link】TypeError: Cannot read properties of null (reading ‘push’) Jest, React Testing Libraryを用いたテスト時に、next/link周りで出たエラーの対処法です。 エラー内容 TypeError: Cannot read properties of null (re... 2022.05.18 JavaScriptNext.jsReactTypeScriptフロントエンド
React 【React Hook Form×Material UI】 defaultValue, defaultCheckedが効かない時に確認すること React Hook Form(以下RHF)とMaterial UIを組み合わせた、defaultValue系にハマりやすいので備忘録です。 useFormのresetを実行しているか APIでdefaultValueをフェッ... 2022.03.24 Reactフロントエンド
React 【React/Formik】入力時に自動送信する方法 Formikを使用しているときに、入力に合わせて自動送信させたかったので、調べて実装してみました。 方針 FormikのuseFormikContextを使用する!FormikのForm内の子コンポーネント等で呼び出すと、Fo... 2021.12.15 Reactフロントエンド
React ReactSelect(AsyncSelect)でデバウンスする方法 ReactSelect、とても便利ですね!初めて使った時は感動しました。今回はReactSelectで用意されているAsyncSelectでデバウンスする方法を記しておきます。 デバウンスとは 連続して呼び出される同じ... 2021.12.06 Reactフロントエンド
制作物/つくってみた npmライブラリ(ReactのUIライブラリ)作ってみた 何を作ったの? React用のスピナーライブラリを作りました。スピナー集のようなものです。 なんで作ったの? ライブラリを作ってみたかったから! 本当にこの気持ちだけです笑便利なライブラリを作りたい気持ちはありまし... 2021.11.14 制作物/つくってみた
React 【React/Portal】関数コンポーネントで作るPortalの使い方 モーダルやスナックバーなどを使用するとき、z-indexの関係でうまく一番上に出てこない...なんてことありますよね。そんな悩みに、React Portalという救世主がいるのでご紹介します。 React Portalとは R... 2021.09.20 Reactフロントエンド
React 【Jest/GraphQL/React】Error: No more mocked responses for the query: mutation このエラーで何時間も消えていったため、確認事項を記録しておきます。 大体のエラー原因 モック化しているリクエスト、もしくはレスポンスの型や内容が異なっている。 具体的に確認すべきこと 使用するクエリのドキュメントを... 2021.07.22 Reactフロントエンド
React 【React】マウントとレンダリングとその違い 自分の中でマウントとレンダリングの違いがごちゃごちゃになったので、調べ直してみました。 マウントとは Reactコンポーネントに対応するインスタンスとDOMノードの作成と、それをDOMツリー(DOMコンテナ)への追加を行う処理... 2021.07.12 Reactフロントエンド開発
React 【React×TypeScript】コンポーネントをPropsとして渡す方法 コンポーネントをPropsとして渡す方法に少し手こずったので、メモしておきます。 ポイント 指定するPropsの型は、JSX.ElementやReact.ReactNodeなどを使用するコンポーネントを受け取る際は、引数にpr... 2021.07.03 Reactフロントエンド
制作物/つくってみた 自主制作Webアプリ解説「パンBOX – お気に入りのパン屋さんを見つける、つながる」 アプリ概要 ユーザーは福岡市内のパン屋を探したり、口コミ投稿やお気に入り保存ができます。また、店舗側は店舗情報充実や口コミへの返信ができるアプリです。 ユーザー側福岡市にあるパン屋を検索できるパン屋への口コミを点数付き... 2021.03.10 制作物/つくってみた開発
React 【React】map関数で作ったリストを並び替え・ソートする方法 map関数で作ったリストの並び替えに苦戦したので、解決方法を記載します。 やりたかったこと 親コンポーネントでstateに格納した配列を、子コンポーネントにPropsとして渡し、それを子コンポーネントで一覧表示にしていました。... 2021.03.01 Reactフロントエンド開発
JavaScript 【React × JavaScript or TypeScript】ページネーションをreact-paginateライブラリを使って実装してみた 使用したライブラリ react-paginateを使用しました。 Reactのnpmでインストール可能なページネーション系で、本日時点でpopularityが第2位のものです。1位のものよりこちらの方がスタイルの調整が効きそう... 2021.02.28 JavaScriptReactTypeScriptフロントエンド開発
React 【TypeScript×React】childrenの受取を必須にしたい!もしくは拒否したい! 開発をするなかで、このコンポーネントにはchildrenが絶対必要って設定したい…!ってなるとき、たまにありませんか? かなり簡潔ですが、以下のようにすればできます。 必ず受け取るとき ReactNodeを指定します。 ... 2021.02.22 ReactTypeScriptフロントエンド開発
React 【TypeScript×React】React.FCとは? その特徴 TypeScriptとReactで開発をしていると、必ずと言ってもいいほど使うのがReact.FCです。 最初に見たときは「なんぞや?」と思ったので、基本的な点を説明していきます。 React.FCとは? 略さずに書くと... 2021.02.20 ReactTypeScriptフロントエンド開発
React 【TypeScript×React】useReducerとuseContextを使ってログイン状態を管理する SPAを制作しているときに、Reactの状態管理でログイン状態かログアウト状態かを取得したかったため、useReducertとuseContextで実装しました。 方針 ログイン状態を判断するstateをグローバルで管理するそ... 2021.02.08 ReactTypeScriptフロントエンド開発
React 【React】FontAwesomeの使い方(同じ名前のアイコンをインポートする場合もあり) ReactでFontAwesomeを使いたいときのやり方です。 【事前準備】FontAwesomeをインストールする まず、以下のコマンドを実行してFontAwesomeをインストールします。 インストールするものは5種... 2021.01.28 Reactフロントエンド開発
React 【TypeScript×React】React-Modalの使い方 Reactで簡単にモーダルが作れるライブラリのインストールと使い方の説明です。今までは自分で一からモーダルを作っていたのですが、今回はライブラリにあやかりました。 前提環境 TypeScriptとReactはインストー... 2021.01.27 ReactTypeScriptフロントエンド開発