TypeScript

React + React Hook Form v7 なフォームに、MUI v5 の DateTime Picker を組み込んでみた

React Hook Form に MUI の DateTime Picker を組み込んだところ、いくつか悩んだことがあったため、メモを残します。 目次 環境 作るもの 実装の流れ MUI で Modal を作る React Hook Form を使ってフォームを作る MUI DateTime Picker と組み合わせる セッ…

React + React Router v6 + MUI の Breadcrumbs で、動的ルーティングを含むパンくずリストを作ってみた

前回、MUI の Breadcrumbs のサンプルコードが React Router v6 では動かなかったため、React + React Router v6 + use-react-router-breadcrumbs を使って、パンくずリストを作ってみました。 React + React Router v6 + use-react-router-breadcrumbs でパ…

React + MUI DataGrid 用に作成した Custom Operator を、Jest + jest-mock-extended でテストしてみた

以前、 MUI DataGrid の Custom Operator を作りました。 React + MUI のDataGridにて、ある列が複数の日付を持つデータに対し、valueFormatter・sortComparator・filterModelを使って表示・ソート・フィルタしてみた - メモ的な思考的な この時に作成した C…

React + MUI のDataGridにて、ある列が複数の日付を持つデータに対し、valueFormatter・sortComparator・filterModelを使って表示・ソート・フィルタしてみた

React の MUI (旧 Material UI) では、コンポーネントとして DataGrid が提供されていることから、グリッド表示したい時に便利です。 React Data Grid component - MUI そんな中 const rows = [ { id: 1, name: 'シナノドルチェ', purchaseDate: [new Date(2…

Play Framework の View に React + TypeScript を組み込み、 sbt + Vite.js ですべてコンパイルできるようにしてみた

Play Framework アプリに React を組み込んでみる機会がありました。 ただ、Reactを使って SPA にするのではなく、まずは ルーティングは Play Framework (バックエンド)が担当 Play Framework の View上で React が動く Scriptタグでコンパイルした React …

Next.js と express-openid-connect を使った Relying Party を TypeScript 化してみた

前回、Next.js と express-openid-connect を使った Relying Party を書きました。 Next.js と express-openid-connect を使って、認証が必要/不要な各ページを持つ Relying Party を作ってみた - メモ的な思考的な 上記の記事では JavaScript で実装してい…

React + TypeScript + Django REST frameworkでToDo管理アプリを作ってみた

先日、大岡由佳さんの「りあクト! 第3.1版 (2020年12月26日 初版第1刷発行)」を読みました。書籍では理由や経緯などが書かれており、とてもためになりました。ありがとうございました。 りあクト! TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語…