ログラスのReactの技術選定について🐳

CRANK

はじめにこんにちはログラスのフロントエンドエンジニアの @Yuiiitoto です。「次世代型経営管理クラウド」のSaaSを開発しています。今回Reactを使って開発しているログラスのフロントエンドがどういう技術を使っているのか、なぜそれを選んだかについて解説していきます。Reactはライブラリの数が豊富な反面で群雄割拠している領域が多く、技術選定がとても大変です。同じ悩みを抱えるフロントエンドエンジニアの方に少しでも力になれればと思って記事にしました。ログラスのフロントエンド似たようなサービスの場合に特に参考にできる場合が多いと思うので、記事の前提としているサービスについて少し説明します。ログラスはいわゆるtoBのSaaSの業務システムみたいな立ち位置です。ほぼ全てのページに認証が入り、画面の中の要素はtoCのサイトより多めです。Next.jsで構成されていて、SSGやSSRなどは使わずにデータはクライアントからフェッチしています。※ログラスは事業の予実を管理するサービスです。解説する領域今回、技術選定する領域は以下の3つです。状態管理スタイリングフォーム状態管理状態管理はSWRとContextを使った状態管理をしています。APIからの値はSWR…