Reactの記事

React-toastifyを使用してアラート機能を簡単に実装する

React-toastifyをインストールすると、アラート機能を簡単に実装することができます。 React-toastifyをインストール 使い方 基本的にはドキュメントに書かれている通りに実装すれば問題なく動きます。ス […]

【React】react-swipeableライブラリを使用してスワイプイベントを取得する

スマホ向けのWebアプリで、右にスワイプしたか左にスワイプしたかなど指で操作する際のイベントを取得したい時に使用したライブラリを紹介します。 最初スマホのタッチジェスチャーを実装する際に検索で引っかかったライブラリは「H […]

ReactのHooksで動的にwindowサイズを取得する

管理画面などでウィンドウサイズによってサイドバーの開閉を調節したいときにReactのHooksで動的にwindowサイズを取得を取得できたら便利です。今回はReactのHooksで動的に画面サイズを取得し処理を実行する方 […]

JavaScriptでInvalid Dateを判定する

フロントエンドの開発で日付操作にdate-fnsを使用しています。今回日付を年・月・日と別々のselectボックスから選択させて検索をするという仕様でUIを作成していたのですが、この状態ですと存在しない日付を選択できてし […]

LaravelのURLからpublicを消したらReactからのapiリクエストがうまく動かなくなった

Laravel×React(Laravelの中にReactがあるパターン)でアプリを作成しサーバーにアップした際に、ドキュメントルートのpublicを消すために.htaccessを設置しました。しかしなぜかReactから […]

【Laravel×React】サブディレクトリにViteでビルドしたReactアプリをアップしたら真っ白になった

ルートディレクトリではなくサブディレクトリにLaravelとReactで作成したアプリをアップした際に真っ白になってしまって詰まったので備忘録を残したいと思います。 環境 Laravel9 React17 React R […]

React + React Router Dom v6 + Recoilでリロード時もログイン状態を維持する

Reactのログイン認証の状態維持についてハマったので備忘録として残しておきます。バックエンドはLaravelを使用していますが今回はあまり関係がないので取り上げません。 使用技術 React17 React Route […]

VSCodeにViteで設定したresolve aliasを認識させる

Laravel × Reactでの開発においてcomponentをimportする際に、相対パスを書く手間が省くためにエイリアスを設定することがあるかと思います。その際に、コンパイルは通るのにVScode上で以下のメッセ […]

【Laravel9系】 Laravel Sail Viteを使ってReact TypeScriptの開発環境を用意する。

Laravel9系でViteが公式プラグインとして使えるようになったということでReact(TypeScript)の環境をサクッと構築したいと思います。 環境 Laravel 9x React 18x Vite 3x L […]

WordPressのWP REST APIとNext.jsのSSGでサイトを作る

ReactとTypeScriptの学習も兼ねてWordPressのWP REST APIとNext.jsのSSGモードを利用した簡単な当ブログの記事一覧を作成しました。CSSはTailwind.cssでホスティングはVe […]