2024年11月18日 / 最終更新日時 : 2024年11月18日 masaakiota React 【React】Cannot find module ‘swiper/css’【Vite】 こんにちは、フリーランスエンジニアの太田雅昭です。 Swiper Swiperはスライドショーを簡単に作れるライブラリです。 エラー内容 Viteでbuildしようとした際、以下のエラーが出ました。 解決 vite-en […]
2024年10月17日 / 最終更新日時 : 2024年10月17日 masaakiota React 【React】ComponentType<T>で汎用コンポーネントを作成する【Typescript】 こんにちは、フリーランスエンジニアの太田雅昭です。 React.ComponentType<T> React.ComponentType<T>は、T型のPropsを受け取るコンポーネントを表します。例えば、以 […]
2024年10月17日 / 最終更新日時 : 2025年1月17日 masaakiota MUI 【MUI】@toolpad/coreのDialogsProviderが便利すぎる【TypeScript】 こんにちは、フリーランスエンジニアの太田雅昭です。 MUI MUIはGoogleの開発するReactライブラリで、簡単にマテリアルデザインを実装できます。 DialogsProvider DialogsProviderは […]
2024年10月14日 / 最終更新日時 : 2024年10月14日 masaakiota React 【React】コンポーネントをそのまま表も含めてPDFに変換する こんにちは、フリーランスエンジニアの太田雅昭です。 jsPDF jsPDFは、クライアントサイドでPDFを作成できるライブラリです。 htmlからも作成できるため、表などが簡単に作れます。 参考サイト 以下のサイトを参考 […]
2024年8月15日 / 最終更新日時 : 2024年8月15日 masaakiota React 【React】lazy導入で画面遷移しなくなった話 こんにちは、フリーランスエンジニアの太田雅昭です。 lazyローディング Reactで開発すると、通常はすべてのページがバンドルされ、ファイルサイズが膨大になります。それを防ぐため、逐一必要な部分だけロードするのがlaz […]
2024年3月31日 / 最終更新日時 : 2024年4月2日 masaakiota Next.js 【Next.js】”use client”境界では関数外でclient関数を使えない こんにちは、フリーランスエンジニアの太田雅昭です。 use client Next.jsのApp Routerでは、use clientをつけることで、ここからのツリーはclientで動かすことを明示します。実際にはサー […]
2024年3月23日 / 最終更新日時 : 2024年3月23日 masaakiota MUI 【MUI】DataGridをlimit, offsetで使用する こんにちは、フリーランスエンジニアの太田雅昭です。 MUI DataGridのpagination DataGridのpaginationは、0から始まる値が採用されており、プログラマーに親和性のある仕様となっています。 […]
2024年2月15日 / 最終更新日時 : 2024年7月25日 masaakiota Next.js 【Next.js】実行時の環境変数をクライアントで使いたい(NEXT_PUBLIC_不使用) こんにちは、フリーランスエンジニアの太田雅昭です。 2024/07/25追記 下記の方法は、結局うまくいきませんでした。正常に動作すると思っていたら、急に不具合が出たりします。Next.jsは子コンポーネントからレンダリ […]
2024年1月30日 / 最終更新日時 : 2024年1月30日 masaakiota dnd kit 【dnd-kit】DndContextを入れ子にすると、親には伝わらない こんにちは、フリーランスエンジニアの太田雅昭です。 dnd-kit dnd-kitは、ドラッグ&ドロップを簡単に実装できるライブラリです。 Contextを入れ子にすると、親には伝わらない 公式でも入れ子にする事 […]
2024年1月25日 / 最終更新日時 : 2024年1月25日 masaakiota Next.js 【Next.js】NextRouter was not mounted. こんにちは、フリーランスエンジニアの太田雅昭です。 時々やってしまうこの問題。 useRouterはnext/navigationからimportする 今私が使ってるNextはv14なのですが、その場合useRouter […]