2025年2月10日 / 最終更新日時 : 2025年2月10日 masaakiota React 【React】PDFをレンダリングする【PDF.js】 こんにちは、フリーランスエンジニアの太田雅昭です。 PDF PDFはWeb上で表示するには、いろいろな方法があるかと思います。今回は、PDF.jsで直接表示します。 コード 以下のようにします。canvasに描画していま […]
2025年2月3日 / 最終更新日時 : 2025年2月3日 masaakiota MUI 【MUI】Fade + Slide を機能させる こんにちは、フリーランスエンジニアの太田雅昭です。 Fade, Slide Fade, Slideは、MUIで使えるコンポーネントです。それぞれ、フェードとスライドのアニメーションを、簡単に実装できます。 同時に使うとう […]
2025年2月2日 / 最終更新日時 : 2025年2月2日 masaakiota MUI 【MUI】AutoComplete + Fuse.jsで曖昧検索する こんにちは、フリーランスエンジニアの太田雅昭です。 AutoComplete AutoCompleteは、MUIのコンポーネントで、あらかじめ渡されたリストから一致するものを表示します。ただ曖昧検索はできないため、カスタ […]
2025年2月1日 / 最終更新日時 : 2025年2月1日 masaakiota React 【React】既存のページにReactを適用する【createPortal】 こんにちは、フリーランスエンジニアの太田雅昭です。 React Reactは、インタラクティブなUIを比較的手軽に実装できるフレームワーク、厳密にはライブラリです。通常、１ページに１つマウントします。複数マウントするには […]
2024年12月17日 / 最終更新日時 : 2024年12月17日 masaakiota React 【React】videoフレームをキャプチャして表示する こんにちは、フリーランスエンジニアの太田雅昭です。 videoフレームのキャプチャ videoフレームは、canvasを使用してキャプチャできます。以下のような具合です。 リアルタイムで描画する リアルタイムで描画するに […]
2024年11月29日 / 最終更新日時 : 2024年11月29日 masaakiota Next.js 【Next.js】Server Actionでbcryptエラー。Can’t resolve ‘mock-aws-s3’, ‘aws-sdk’,’nock’ こんにちは、フリーランスエンジニアの太田雅昭です。 bcrypt bcryptは暗号化に用いるライブラリです。ハッシュ化したり、検証したりできます。 Server Actionで使えなかった Server Actionは […]
2024年11月25日 / 最終更新日時 : 2024年11月25日 masaakiota React 【React】setIntervalは古いStateを参照する こんにちは、フリーランスエンジニアの太田雅昭です。 setIntervalは古いStateを参照する setIntervalは、定期実行を行う関数です。感覚的には、これを使用すると、常に新しいStateを得られると思いが […]
2024年11月20日 / 最終更新日時 : 2024年11月20日 masaakiota Next.js 【Next.js】モノレポでのパス解決の問題 こんにちは、フリーランスエンジニアの太田雅昭です。 モノレポ モノレポは関心の分離などの観点からも、とても便利です。ただ色々問題に直面することも多いかと思います。今回はNext.jsでのパス解決の問題に関してです。 パス […]
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を受け取るコンポーネントを表します。例えば、以 […]