nuqsとは？導入方法やメリット、導入した感想を解説｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG

BLOG

ブログ

nuqsとは？導入方法やメリット、導入した感想を解説

2025-04-23 制作・開発

こんにちは！商品開発部でエンジニアとして働いている成田です。普段は、専門知識がなくても簡単に使える国産CMS・MAツール『LeadGrid』を開発しています！

皆さんはフロントエンド（React）での状態管理をどうしていますか？ライブラリを用いる場合、ReduxやRecoil、Jotaiなど実績のある状態管理ライブラリがたくさんあって迷ってしまいますよね。

そんななか、ここ数年で急激にシェアを伸ばしているモダンな状態管理ライブラリ『nuqs』を皆さんはご存知でしょうか？実は、先日LeadGridでも導入が決まり、すでに一部がnuqsに置き換えられています。

今回は、nuqsを導入するメリットと、実際に導入してどのような効果があったのかを詳しく解説します。

そもそも『nuqs』とは？

クエリパロメーターで状態管理する、という新しい考え方

『nuqs』は、Next.jsやReactで使える、クエリパロメーターで状態管理が行えるライブラリです！

ここ数年、フロントエンド界隈ではNextやReactなどの普及により、「SPA」を取り入れたWebアプリケーションが一般的になりました。また、SPAにおける状態管理は、ReactではStateなど、ブラウザのメモリ内に格納されるのが一般的でした。

しかし、状態をブラウザのメモリ内に秘匿してしまうことで、そのページを開いた初期状態とユーザーがアクションした状態では、URLを見ただけではわからないようになってしまいます。

たとえば、ひたすらボタンを連打するシーンを想像してみてください。もし誤ってページをリロードすると、カウントが0に戻ってしまうということです。そんな状況だと、過去にゲームのボタン連打で有名だったあの「高橋名人」も思わず困ってしまうかもしれません。

このような問題を防ぐために、URLで状態管理をする方法があります。これにより、ユーザーがアクションした状態をURLで再現し、同じURLで同じ状態が共有された方がいいというのが、「クエリパロメーターで状態管理する」という考え方です。

Store型 VS クエリパロメータ型を比べてみた

Reduxに代表されるようなStore型の状態管理ライブラリは長く覇権を取っていました。なんといっても、Store型の良さはグローバルに状態を維持できるということです。

たとえば、動物紹介サイトを想像してみてください。ユーザーはまず「猛禽類一覧ページ」を開きました。ユーザーは楽しくなり2ページ目を開きました。すると、読んでいる途中でちらっと目に入った「哺乳類一覧ページ」が気になりそれをクリックして開きました。

さらにその後も、ユーザーの関心は次から次へと移り変わり、いろんなページを開いた後、原点回帰のように「猛禽類一覧ページ」を開きます。ここでStore型の状態管理を行っていると、2ページ目の「猛禽類一覧ページ」をユーザーに開いてもらうことができます。

このように、Store型はWebアプリケーション全体の状態を包括して行うので、全体を通したユーザーのUX体験を向上させることができます。しかし、これだけすごいことができる分、Store型には弱点もあります。

まず挙げられるのがシンプルに大変だということです。Storeに保存するためにはReducerなどいろいろなものを用意しなければいけません。そのため管理が複雑になってしまいます。

また、複雑ということに付随して、学習コストが高いことも挙げられます。とっつきにくく、使いこなすためにまずライブラリ自体の学習をしなければなりません。一方で、クエリパロメータ型のいいところは、ユーザーのアクションにURLが紐付いていることです。

たとえば、商品検索ページで「ボールペン」と検索します。「おっ！これいいな！」と思って友人にURLをそのままコピーして送ると、その友人は「ボールペン」と検索されたページを開くことができます。複雑な検索条件になったときに、「ここをこうして、こうして……」と友人に再現してもらう手間が省けますね。

また、一覧の2ページ目から詳細へ飛ぶとします。クエリパロメータ型では、ブラウザの戻るボタンを押すだけで2ページ目に戻ることができます。わざわざStoreから情報を参照しなくてもいいことも強みです。

クエリパロメータ型の弱点は、グローバルな状態管理はできないということです。全体を通したユーザーのUX体験をクエリパロメータ型の状態管理で行うことは難しいと言えます。

nuqsを導入するメリット

ここでは、実際にnuqsを導入することで得られるメリットをご紹介します。

1. コード記述量の大幅削減

クエリパロメータ型のライブラリで私がおすすめするのが『nuqs』です。ここではnuqsを導入するメリットをご紹介します。

まずは、状態管理においてコード記述量の大幅削減が見込めるという点です。なんと、nuqsはuseStateの代わりにuseQueryStateを使うだけで状態管理を行うことができます。状態管理を行う場所だけに、useQueryStateを用いるだけでURLに反映されるようになります！

2. 開発効率の向上

useQueryStateだけで済むので、状態管理を行う際にReducerに情報を渡して、ReducerからStoreに入れて……とファイルを行き来しなくて済むようになります。

個人的にはファイルの行き来がに手間がかかることもあったりするので、1ファイルで済むのがとても便利です。

3. パフォーマンスへの影響

わずかですが、初期表示のパフォーマンスに少し向上が見込めます。

初期状態をURLで持っていることで、ブラウザのメモリにある状態を参照する時間が省かれるためです。ただし、状態が増えすぎるとパースに時間がかかってしまうので、その際はStore型よりパフォーマンスが落ちてしまうこともあるかもしれません。「状態を持ったときの初期表示が遅い」ときには、改善の最後のピースになりうるかもしれません。

どちらにしても、状態管理が簡単だからといってStore型よりパフォーマンスが悪くなることはほとんど考えられません。

nuqsの導入方法

環境構築と簡単な例（画像つきで解説）

ここでは、公式ドキュメントに添いながら、実際に『nuqs』を使ってみます！

1. まずはこちらからインストール！

 <code>pnpm add nuqs</code>

2. NuqsAdapterでApp全体をラップ！（今回はReactで導入してみます！）

 <code>
import { NuqsAdapter } from 'nuqs/adapters/react'
 
createRoot(document.getElementById('root')!).render(
  <NuqsAdapter>
    <App />
  </NuqsAdapter>
)
</code>

3. 名前を入力するコンポーネントを作成！

 <code>
'use client'
 
import { useQueryState } from 'nuqs'
export function Demo() {
  const [name, setName] = useQueryState('name') // ここでuseQueryStateを呼び出してみます！
  return (
    <>
      <input value={name || ''} onChange={e => setName(e.target.value)} />
      <button onClick={() => setName(null)}>Clear</button>
      <p>Hello, {name || 'anonymous visitor'}!</p>
    </>
  )
}
</code>

4. 名前を入力するコンポーネントを呼び出し、ブラウザで試してみる
ブラウザで名前を入力してみてください！画像のようになったでしょうか？