オタクくん「ギャル先輩、Next.jsの状態管理ってどうしたらいいんですか？」

Next.jsの状態管理に困っているオタクくん

オタクくん「ギャル先輩、Next.jsの状態管理ってどうしたらいいんですか？」

ギャル先輩「え？Next.jsの状態管理？それって、具体的にどこで困ってるわけ？」

オタクくん「コンポーネント間でデータを共有したいんですけど、どの方法が一番いいのかわからなくて…」

ギャル先輩「なるほどね〜、初心者にはちょっとややこしいかもね。じゃ、基本的なところから教えてあげるよ〜」

Reactの状態管理の基本

ギャル先輩「まず、Next.jsはReactベースだから、基本的にはReactの状態管理の方法が使えるんだよね。例えば、useStateフックとか、useContextとかね。」

オタクくん「useStateは使ったことありますけど、useContextはよくわかってないです…」

ギャル先輩「おっけーおっけー。じゃ、まずはuseContextからいくよ〜」

import React, { createContext, useContext, useState } from 'react';

// コンテキストの作成
const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [state, setState] = useState("Hello, world!");

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

const ChildComponent = () => {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState("Hello, Next.js!")}>
        Update State
      </button>
    </div>
  );
};

const App = () => (
  <MyProvider>
    <ChildComponent />
  </MyProvider>
);

export default App;

ギャル先輩「こんな感じでコンテキストを作って、プロバイダーでラップすれば、子コンポーネントでその状態にアクセスできるようになるんだよ〜」

オタクくん「なるほど、これなら状態を共有できるんですね！」

Next.jsでの状態管理

ギャル先輩「次に、Next.jsならではの方法もあるんだよね。例えば、getServerSidePropsとかgetStaticPropsを使えば、サーバーサイドでデータをフェッチして、ページコンポーネントに渡せるんだよ。」

オタクくん「サーバーサイドでデータを取ってくるんですね…それってどうやるんですか？」

ギャル先輩「こんな感じだよ〜」

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

const Page = ({ data }) => {
  return (
    <div>
      <h1>Server-side Rendered Data</h1>
      <p>{data.message}</p>
    </div>
  );
};

export default Page;

ギャル先輩「これで、サーバーサイドでフェッチしたデータをページコンポーネントのプロップスとして受け取れるんだよね〜」

オタクくん「すごいですね！これでデータの取得も簡単にできるんですね」

状態管理ライブラリの導入

ギャル先輩「でもね、もっと大規模なアプリになると、これだけじゃ足りなくなることもあるんだよね。そんなときは、ReduxとかRecoilみたいな状態管理ライブラリを使うのもアリだよ〜」

オタクくん「ReduxとかRecoilって聞いたことありますけど、使い方が全然わからないです…」

ギャル先輩「じゃ、Recoilの基本的な使い方を教えてあげるよ〜」

import { atom, selector, useRecoilState, useRecoilValue } from 'recoil';

// Atomの定義
const textState = atom({
  key: 'textState',
  default: '',
});

// Selectorの定義
const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

const TextInput = () => {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
};

const CharacterCount = () => {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
};

const App = () => (
  <div>
    <TextInput />
    <CharacterCount />
  </div>
);

export default App;

ギャル先輩「Recoilはこんな感じで、状態をatomっていう形で管理して、selectorでその状態を元にした値を計算できるんだよ〜」

オタクくん「なるほど、これなら複雑な状態管理も簡単にできそうです！」

状態管理のまとめ

オタクくん「ギャル先輩、本当にありがとうございました！これでNext.jsの状態管理が少しわかった気がします！」

ギャル先輩「ふふん、どういたしまして〜。てーか、あーしの教え方、わかりやすかったっしょ？www」

オタクくん「はい、本当に助かりました！ギャル先輩、すごいです！」

ギャル先輩「もっと聞きたいことがあったら、いつでも聞いてね〜。じゃ、次はどんな質問してくれるかな？www」

オタクくん「うーん、また困ったときにお願いします…（ギャル先輩、実はすごく優しいんだな…）」

以上、オタクくんとギャル先輩によるNext.jsの状態管理についての会話でした。次回もお楽しみに！