【超簡単】Next.jsのページ遷移時にLoadingを表示させる方法

React Next.js

Next.jsの初回アクセス後にnext/router等で画面遷移すると、getServerSidePropsの処理中が挟むことによって画面遷移の待ちが発生してしまいます。フリーズしているような見た目になってしまうので、見た目としてあまり好ましくありません。待機中にloading…

React Next.js

2022-07-22

Next.jsとdevise_token_authを使って認証周りを実装する

React Rails Devise Next.js

前回、Rails7 APIモードの認証機能をdevise_token_authで実装するという記事で、devise_token_authの導入方法や使い方を一通り説明いたしました。今回はNext.jsとdevise_token_authを使ってログイン処理と認証制御周りを具体的な実装例を踏まえて説明します…

Next.js React Rails7

2022-05-20

React+Reduxのアクション名のコンフリクトを避ける方法

React

React+Reduxのパターンで開発しているとアクション名の衝突を避けるために管理が煩雑になってきます。例えば、ある機能でINCREMENTというアクション名をすでに使用している場合、他の機能で同じような振る舞いのアクションを定義する場合はINCREMENTという…

react Redux

2022-04-15

react-virtualizedのMultiGridでアプリ開発したときのTIPS

Javascript React

react-virtualizedとは SPAで構築されたReactアプリでも、大量のリストを画面いっぱいに表示しようとすると初期描画に時間がかかってしまいます。これは、画面に見えてない部分も含めて全てのデータをレンダリングしてしまっていることが原因です。 react-v…

React JavaScript

2022-04-01

Rails7でReactを使う場合はimportmapはオススメできない

Rails React Javascript

Rails7からJavascriptバンドラーとしてNode.jsが非依存のimportmapが標準機能に採用されました。早速、importmapを使ってReactを使用した開発を試みてみましたが、結論としてはimportmapは使用しないことになりました。 Reactの場合はimportmapをオススメで…

Rails7 React

2020-10-02

Reactのライフサイクル一覧まとめ