```sh
yarn add @types/gtag.js
```

```sh
touch lib/gtag.ts
```

```sh
echo "NEXT_PUBLIC_GA_TRACKING_ID=" >> .env
echo "NEXT_PUBLIC_GA_TRACKING_ID=" >> .env.sample
```

```gtag.ts
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID;

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url: string): void => {
  if (!GA_TRACKING_ID) return;
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  });
};
```

Next.jsにGoogle Analyticsを導入する

## ドキュメント

- [API Routes: Introduction | Next.js](https://nextjs.org/docs/api-routes/introduction)
- [HTTP リクエストメソッド - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Methods)

## 実装

```js
import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {

  switch (req.method) {

  case 'GET':
    res.status(200).json({ message: 'GET' })
    break

  case 'POST':
    res.status(200).json({ message: 'POST' })
    break

  case 'PATCH':
    res.status(200).json({ message: 'PATCH' })
    break

  case 'DELETE':
		res.status(200).json({ message: 'PATCH' })
    break

  default:
    res.status(405).end()
    break
  }
}
```

## API呼び出し

axiosを使用し、API を呼び出します。

```bash
yarn add axios
```

```js
// GET Method
await axios.get('/api/user', {
  params: {
    id: userId
  }
})

// POST Method
await axios.post('/api/user', {
	id: userId
})

// PATCH Method
await axios.patch('/api/user', {
	id: userId
})

// DELETE Method
await axios.delete('/api/user', {
  params: {
    id: userId
  }
})
```

- GET と DELETE は、リクエストのクエリに値を持つことができます（Bodyには含めることができません）
- POST と PATCH は、Bodyに値を持つことができます

`getServerSideProps`で API Routes を呼び出すのはあまりよくなさそうです 🤔

[use getStaticProps with /api routes · Discussion #16068 · vercel/next.js](https://github.com/vercel/next.js/discussions/16068)

## 値の取得

```js
const { id } = req.query // GET DELETE
const { id } = req.body // POST PATCH
```

## NextAuth

NextAuthを使用している場合は、sessionからuserIdを呼び出すこともできます。

- [Securing pages and API routes | NextAuth.js](https://next-auth.js.org/tutorials/securing-pages-and-api-routes#using-getsession)

```js
import type { NextApiRequest, NextApiResponse } from 'next'
import { getSession } from 'next-auth/client'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const session = await getSession({ req })

  if (!session?.user?.id) {
    res.status(401).send({ message: 'Unauthorized' })
    return
  }

  const userId = session.user.id
}
```

sessionにuserIdを含めるには、 `pages/api/auth/[...nextauth].ts`の `callbacks.session` を変更します。

- [Callbacks | NextAuth.js](https://next-auth.js.org/configuration/callbacks#session-callback)
- [How to get userId on api Endpoints while using next-auth · Discussion #536 · nextauthjs/next-auth](https://github.com/nextauthjs/next-auth/discussions/536)

```js
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
import { PrismaAdapter } from '@next-auth/prisma-adapter'
import { prisma } from '@/lib/server/prismaClient'

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  adapter: PrismaAdapter(prisma),
  callbacks: {
    session: async (session, user) => {
      return Promise.resolve({
        ...session,
        user: {
          ...session.user,
          id: user.id // 👈 ココ
        }
      })
    }
  }
})
```

Next.js API Routes で REST API 実装

`-p {PORT}`で変更する。

```package.json
"scripts": {
  "dev": "next dev -p 4000"
}
```

```bash
yarn dev
# or 
npm run dev
```

Next.js port 変更

## Nest.js

```bash
yarn add passport @nestjs/passport passport-jwt jwks-rsa
```

`ExtractJwt.fromAuthHeaderAsBearerToken()`のところで、`BearerToken`を扱っているようです。

```jwt.strategy.ts
import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { ExtractJwt, Strategy } from 'passport-jwt';
import { passportJwtSecret } from 'jwks-rsa';
import * as dotenv from 'dotenv';

dotenv.config();

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor() {
    super({
      secretOrKeyProvider: passportJwtSecret({
        cache: true,
        rateLimit: true,
        jwksRequestsPerMinute: 5,
        jwksUri: `${process.env.AUTH0_ISSUER_URL}.well-known/jwks.json`,
      }),

      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(), // 👈 ポイント
      audience: process.env.AUTH0_AUDIENCE,
      issuer: `${process.env.AUTH0_ISSUER_URL}`,
      algorithms: ['RS256'],
    });
  }

  validate(payload: unknown): unknown {
    return payload;
  }
}
```

```auth.module.ts
import { Module } from '@nestjs/common';
import { PassportModule } from '@nestjs/passport';
import { JwtStrategy } from './jwt.strategy';

@Module({
  imports: [PassportModule.register({ defaultStrategy: 'jwt' })],
  providers: [JwtStrategy,],
  exports: [PassportModule],
})
export class AuthModule {}
```

```users.controller.ts
import { Controller, Get, UseGuards } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';

@Controller('users')
export class UsersController {
  @Get('public')
  async test() {
    return '✅ Public API!'
  }

  @UseGuards(AuthGuard('jwt')) // 👈 ガード
  @Get('private')
  async private() {
    return '✅ Private API!'
  }
}
```

## Next.js

**※accessTokenが無い(or違う)と、`users/private`APIは401です。**

```index.js
import axios from "axios";
import { useAuth0 } from "@auth0/auth0-react";

const { getAccessTokenSilently } = useAuth0();

const publicApi = async () => {
  try {
    const res = await axios.get('http://localhost:8080/users/public')
    console.log('✅ res', res);
  } catch (e) {
    console.log(e.message);
  }
}

const privateApi = async () => {
  try {
    const accessToken = await getAccessTokenSilently({
      audience: process.env.NEXT_PUBLIC_AUTH0_AUDIENCE,
      scope: "read:current_user",
    });

    console.log('✅ accessToken', accessToken);

    const res = await axios.get('http://localhost:8080/users/private', {
      headers: {
        Authorization: `Bearer ${accessToken}`, // 👈 accessToken を含める
      },
    });
    console.log('✅ res', res);
    } catch (e) {
    console.log(e.message);
  }
}
```

### 実装結果

![Next.js Next.js  Prisma](//images.contentful.com/0jyj5pjwic68/56mORPNJ9f1wy7Ow2Jp2EK/4bae97b0493b6ddc22ba4a8042c9a6a5/image.png)

## 環境変数

Nest.js

```.env
AUTH0_AUDIENCE='http://localhost:8080'
AUTH0_ISSUER_URL='https://xxxxx.jp.auth0.com/'
```

Next.js

```.env
NEXT_PUBLIC_AUTH0_DOMAIN="xxxxx.jp.auth0.com"
NEXT_PUBLIC_AUTH0_CLIENT_ID="xxxxx"
NEXT_PUBLIC_AUTH0_REDIRECT_URI="http://localhost:3000"
NEXT_PUBLIC_AUTH0_AUDIENCE="http://localhost:8080"
```

## ドキュメント

- [Full-Stack TypeScript Apps: Developing a Secure API with NestJS](https://auth0.com/blog/developing-a-secure-api-with-nestjs-adding-authorization/)
- [Auth0 React SDK Quickstarts: Call an API](https://auth0.com/docs/quickstart/spa/react/02-calling-an-api)


Nest.js Next.js Auth0 JWT検証

ブラウザで使用したい場合は、`NEXT_PUBLIC_`を前につける

```.env
NEXT_PUBLIC_ANALYTICS_ID=xxxxx
```

```js
const x = process.env.NEXT_PUBLIC_ANALYTICS_ID;
```

つけない場合は、`getServerSideProps`や`getStaticProps`内でしかアクセスできない。

```.env
ANALYTICS_ID=xxxxx
```

```js
// Browser ❌ 
const x = process.env.ANALYTICS_ID;

// Server 🙆‍♂️
const x = process.env.ANALYTICS_ID;
```


Next.js Browser env

```bash
yarn add @auth0/auth0-react
```

```_app.js
import { Auth0Provider } from "@auth0/auth0-react";

function MyApp({ Component, pageProps }) {
  // 👇 Auth0コンソールで確認
  return (
    <Auth0Provider
      domain="xxx.jp.auth0.com"
      clientId="xxx"
      redirectUri="http://localhost:3000/"
    >
      <Component {...pageProps} />
    </Auth0Provider>
  )
}

export default MyApp
```

```index.js
import { useAuth0 } from "@auth0/auth0-react";

export default function Home() {
  const LoginButton = () => {
    const { loginWithRedirect } = useAuth0();

    return <button onClick={() => loginWithRedirect()}>Log In</button>;
  };

  return (
    <div>
        <LoginButton/>
    </div>
  )
}
```

`Allowed Callback URLs`と`Allowed Web Origins`を自分の開発環境と同じように設定しておく。

![Auth0 origin callback](//images.contentful.com/0jyj5pjwic68/4PMZbp3qVHkkvKkfLymigb/f8d1917dbdf5471d68918c6cd8be5667/____________________________2021-10-02_11.16.38.png)

Next.js Auth0 Login

`key="xxxx"`を設定すると、最後に読み込んだものが適用される。
`_app.tsx`でデフォルトのmetaタグを設定し、各ページコンポーネントで上書きしたいmetaタグを設定する。

以下、`key="og_title"`の例

```_app.jsx
function MyApp() {
  return (
    <>
      <Head>
        <meta property="og:title" content="Site name" key="og_title" />
      </Head>
      ...
    </>
  );
}
```

```index.jsx
function Index() {
  return (
    <>
      <Head>
        <meta property="og:title" content="Home" key="og_title" />
      </Head>
    </>
  );
}
```

[next/head | Next.js](https://nextjs.org/docs/api-reference/next/head)

Next.js metaタグ 重複を避ける

## 環境
- Next.js: v11.x

## Reduxを一言で

**「アプリのグローバル状態を管理するフレームワーク」**

親子間のコンポーネント程度であれば、`props` と `callback`で完結しますが、より大きな用途で使用する場合、`props` をバケツリレ−のように渡していくのは非常に辛いです。
その解決策として出ててくるのが、**グローバル状態** です。グローバル状態は、アプリのどのコンポーネントでも呼び出すことができ、更新することができます。そのフレームワークの1つが、 **Redux** です。

## Redux以外のフレームワークは？
- [Recoil](https://recoiljs.org/)
- SWR
- React.useContext
- [react-hooks-global-state](https://www.npmjs.com/package/react-hooks-global-state)

## インストール

## 参考
- [FAQ | Next.js](https://nextjs.org/docs/faq)
- [vercel/next.js/tree/canary/examples/with-redux](https://github.com/vercel/next.js/tree/canary/examples/with-redux): Next.jsのReduxサンプル
- [Getting Started with React Redux](https://react-redux.js.org/introduction/getting-started)
- [Reduxを分かりやすく解説してみた](https://future-architect.github.io/articles/20200429/)
- [Next.js の状態管理 2020](https://zenn.dev/takepepe/articles/state-manegement-in-nextjs-2020)
- [Global state using only React Hooks with the Context API (No Redux)](https://codeburst.io/global-state-with-react-hooks-and-context-api-87019cc4f2cf)

Reduxについて勉強

## 設計

Google Analytics Reporting API からPV数の多い記事を取得し、build時にjsonに出力します。`next build`時に、jsonを読み取り静的出力します。

## 実装

```ga.js
const fs = require('fs');
require('dotenv').config();
const { google } = require('googleapis');

const client = new google.auth.JWT({
  email: process.env.GA_CLIENT_EMAIL,
  key: process.env.GA_PRIVATE_KEY?.replace(/\\n/g, '\n'), // 👈 置換する
  scopes: ['https://www.googleapis.com/auth/analytics.readonly'],
});

console.log('✅ Client作成');

const analyticsreporting = google.analyticsreporting({
  version: 'v4',
  auth: client,
});

async function getPopularPostData() {
  const res = await analyticsreporting.reports.batchGet({
    requestBody: {
      reportRequests: [
        {
          viewId: process.env.GA_VIEW_ID, // 👈 Analytics ViewID の指定
          pageSize: 50, // 👈 要求するページの数
          dateRanges: [
            {
              startDate: '30daysAgo',
              endDate: 'today',
            },
          ],
          metrics: [{ expression: 'ga:pageviews' }],
          dimensions: [{ name: 'ga:pagePath' }, { name: 'ga:pageTitle' }],
          orderBys: [{ fieldName: 'ga:pageviews', sortOrder: 'DESCENDING' }],
        },
      ],
    },
  });
  return res.data;
}

getPopularPostData().then((data) => {
  console.log('✅ 人気記事の取得');
  const { reports } = data;
  const gaRowData = reports ? reports[0]?.data?.rows ?? [] : [];
  const popularPaths = gaRowData
    .filter((row) => row.dimensions && row.dimensions[0]) // dimensions や dimensions[0] が存在するデータのみ抽出
    .map((row) => {
      return row.dimensions[0];
    });
  console.log('popularPaths:', popularPaths);
  fs.writeFile('ga.json', JSON.stringify(popularPaths), (err) => {
    console.log('🎉 ga.json生成');
  });
});
```

`ga.json`が生成される

## Vercelビルド時に実行

```pacakge.json
"scripts": {
  "build": "node ga.js && next build && next-sitemap"
}
```

## 表示

```index.jsx
export const getStaticProps: GetStaticProps<Props> = async () => {
  // 👇 `ga.json`から人気の記事を取得する
  let popularArticles = await Promise.all(
    popularPaths.map(async (path: string) => {
      let remakePath = path.replace('/', ''); // 👈 先頭の`/`を削除する
      console.log('✅ PATH:', path.replace('/', ''));

      if (remakePath) {
        let article = await client.getEntries({
          content_type: CONTENT_TYPE.ARTICLE,
          'fields.slug': remakePath,
        });
        if (article?.total === 1) {
          return article.items[0];
        }
      }
    })
  );
  popularArticles = popularArticles.filter(Boolean); // 👈 Falseな要素を削除
  if (popularArticles.length > 10) popularArticles.length = 10; // 👈 11個目の要素から全て削除
  ...
};
```

Next.jsで人気記事の取得と表示

## ドキュメント

- [コンテクスト – React](https://ja.reactjs.org/docs/context.html) : 公式のドキュメント
- [Context API with TypeScript and Next.JS - DEV Community 👩‍💻👨‍💻](https://dev.to/shareef/context-api-with-typescript-and-next-js-2m25)

## 課題

Recoilによる、開発体験は非常によかったが、下記のエラーに悩まされた。

```bash
app_1    | Duplicate atom key "isLoading". This is a FATAL ERROR in
app_1    |       production. But it is safe to ignore this warning if it occurred because of
app_1    |       hot module replacement.
```

Issueはこちら

[[SSR][NextJS] Duplicate atom key during development and during production build in nextjs · Issue #733 · facebookexperimental/Recoil](https://github.com/facebookexperimental/Recoil/issues/733)

やりたいこととしては、シンプルなので、React Context APIを使用する。

## やりたいこと

- **ローディングコンポーネントの呼び出し**
- **メッセージ（アラート）の呼び出し**

などの状態をグローバルステート（React Context API）で管理し、開発体験を向上させる。

## ポイント

> コンテクストは各階層で手動でプロパティを下に渡すことなく、コンポーネントツリー内でデータを渡す方法を提供します。

## React Context 実装

```context/state.js
import { useState, createContext, useContext } from 'react';
import Loading from '@/components/atoms/loading'; // 👈 使用するローディングコンポーネント

// 👇 Contextの作成
const AppContext = createContext({
  loading: false,
  setLoading: (_) => {},
});

// 👇 _app.tsxでコンポーネントツリーの上の方に追加する
export const AppWrapper = ({ children }) => {
  const [loading, setLoading] = useState(false);

  const value = {
    loading,
    setLoading,
  };

  return (
    <AppContext.Provider value={value}>
      <Loading loading={loading} />
      {children}
    </AppContext.Provider>
  );
};

// 👇 Pageコンポーネントなどで読み込む
export const useAppContext = () => useContext(AppContext);
```

```pages/_app.tsx
import React from 'react';
import { AppProps } from 'next/app';
import { AppWrapper } from '@/context/state';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
			{/* 👇 Context を コンポーネントツリーに追加 */}
      <AppWrapper>
        <Component {...pageProps} />
      </AppWrapper>
    </>
  );
}

export default MyApp;
```

## コンポーネント呼び出し

```pages/index.tsx
import { useAppContext } from '@/context/state';

export default function Index() {
  const { setLoading } = useAppContext();

	const func = () => {
		setLoading(true); // 👈 ローディングの表示
		setLoading(false); // 👈 ローディングの非表示
	}
}
```

### ⚠️ SWRでデータがfetchできていない場合のローディング

```jsx
import { useAppContext } from '@/context/state';

const { setLoading } = useAppContext();
const { data: user, error } = useSWR('/api/user');

if (!user) {
	setLoading(true)
	return <></>;
}

setLoading(false)
```

上記の実装だと、下記のエラーが発生する。

```bash
react-dom.development.js:67 Warning: Cannot update a component (`AppWrapper`) while rendering a different component (`Index`). To locate the bad setState() call inside `Index`,
```

レンダリングできていない状態で、Index以外のHooksを呼び出すと警告される。（実行はできるが）

💡 **回避手段:** staticなローディングコンポーネントを返す。（もっといい方法があるかもしれない）

```jsx
import StaticLoading from '@/components/atoms/static-loading';
const { data: user, error } = useSWR('/api/user');

if (!user) return <StaticLoading />;
```

Next.js Context API を使用してローディング呼び出し

## ドキュメント

- [フック API リファレンス – React](https://ja.reactjs.org/docs/hooks-reference.html#useeffect)

> useEffectは、コンポーネントがレンダリング後に何かを行う必要があることをReactに伝えます。

## 実装

レンダリング時に一度実行する

```jsx
useEffect(() => {
  someFunc(); // 実行
}, []);
```

値が入ってきた時に、実行する

```jsx
const { data: user, error } = useSWR('/api/user');

// userが存在すれば実行する
useEffect(() => {
  someFunc(); // 実行
}, [user]);
```

Next.js ページのレンダリング時に関数を実行する

## ドキュメント

- [Redirect new user to dynamic URL · Discussion #530 · nextauthjs/next-auth](https://github.com/nextauthjs/next-auth/discussions/530) : よく読むべし
    - [Client API | NextAuth.js](https://next-auth.js.org/getting-started/client#specifying-a-callbackurl) : よく読むべし

## 実装

`callbackUrl`使う。

```jsx
import { signIn, signOut } from 'next-auth/client';

signIn('google'{ callbackUrl: `http://localhost/foo` });
signOut({ callbackUrl: `http://localhost/foo` });
```

### envを使う

```.env.local
NEXT_PUBLIC_BASE_URL="http://localhost:3000"
```

```jsx
import { signIn, signOut } from 'next-auth/client';

signIn('google', {
  callbackUrl: `${
    process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'
  }/foo`,
});

signOut({
  callbackUrl: `${
    process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'
  }/foo`,
});

```

`||`はもっといい使い方あるかも。

`env.local` を修正したら、再起動しましょう。

NextAuthでsignInとsignOut時に特定のURLにリダイレクトさせる

## ドキュメント

- [intercom/contentful-typescript-codegen: Generate TypeScript interfaces from a Contentful environment](https://github.com/intercom/contentful-typescript-codegen)
    - 使用したライブラリ
- [Contentfulで型安全にコンテンツを取得する](https://silurus.dev/article/7DJobP47XUTkDjNavzyf2s)

## インストール

```bash
yarn add contentful
yarn add -D contentful-management dotenv contentful-typescript-codegen @contentful/rich-text-types
```

```bash
npm install contentful
npm install --save-dev dotenv contentful-management contentful-typescript-codegen @contentful/rich-text-types
```

## 実装

`.env`を作成し、各値を設定する。

```.env
CONTENTFUL_SPACE_ID=
CONTENTFUL_ENVIRONMENT=
CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN=
```

プロジェクトルートに`getContentfulEnvironment.js`を作成する。

```getContentfulEnvironment.js
require('dotenv').config();
const contentfulManagement = require('contentful-management');

module.exports = function () {
  const contentfulClient = contentfulManagement.createClient({
    accessToken: process.env.CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN,
  });

  return contentfulClient
    .getSpace(process.env.CONTENTFUL_SPACE_ID)
    .then((space) => space.getEnvironment(process.env.CONTENTFUL_ENVIRONMENT));
};
```

`package.json`のscriptを追記する。

```json
"scripts": {
  "contentful-typescript-codegen": "contentful-typescript-codegen --output @types/generated/contentful.d.ts"
}
```

## 実行

```bash
yarn contentful-typescript-codegen
```

実行すると、`@types/generated/contentful.d.ts`が生成される。

いくつか要らないContent Typeも入っていたので、消した 🤢

## 使用の一例(Next.js)

```jsx
import { IArticle, IArticleFields } from '@/@types/generated/contentful';

interface Props {
	articles: IArticle[];
}

export default unction IndexPage({ articles }: Props) {
	....
}

export const getServerSideProps: GetServerSideProps<Props> = async () => {
  const articles = await client.getEntries({
    content_type: 'article'
  });

  return {
    props: {
      articles: articles.items,
    },
  };
};
```

Contentful の Content Type を型定義する

## ドキュメント

- [Best practice for instantiating PrismaClient with Next.js | Prisma Docs](https://www.prisma.io/docs/support/help-articles/nextjs-prisma-client-dev-practices)
- ["FATAL: sorry, too many clients already" postgres error in develop mode on · Issue #1983 · prisma/prisma](https://github.com/prisma/prisma/issues/1983)

## エラー

NextAuthを開発環境で使用していると、下記のエラーが発生し、クラッシュしてしまうことが多かった。

```jsx
FATAL: sorry, too many clients already

...

too many connections
```

## 解決策

開発環境で、単一の PrismaClient インスタンスを使用すること

## 実装

`@/lib/server/prismaClient.ts`に作成しています。

```jsx
import { PrismaClient } from '@prisma/client'

// 型定義
declare global {
  var prisma: PrismaClient | undefined
}

export const prisma =
  global.prisma ||
  new PrismaClient({
    log: ['query', 'info'], // 👈 ログ出力。消してOK！
  })

if (process.env.NODE_ENV !== 'production') global.prisma = prisma
```

`global`は、おそらくNode.jsのグローバルオブジェクト

[Global objects | Node.js v16.8.0 Documentation](https://nodejs.org/api/globals.html)

## 読み込み

`[...nextauth].ts`

```jsx
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
import { PrismaAdapter } from '@next-auth/prisma-adapter'
import { prisma } from '@/lib/server/prismaClient'

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  adapter: PrismaAdapter(prisma),
  callbacks: {
    session: async (session, user) => {
      return Promise.resolve({
        ...session,
        user: {
          ...session.user,
          id: user.id
        }
      })
    }
  }
})
```

API Routes

```jsx
import { prisma } from '@/lib/server/prismaClient'
await prisma.user.findUnique({...})
```

getServerSideProps

```jsx
const { prisma } = require('@/lib/server/prismaClient')
await prisma.user.findUnique({...})
```

開発環境で PrismaClient を単一インスタンスにする

Next.jsの中で使うReact.jsの記法やよく使う方法をまとめていきます。

## 値の変更を検知して実行する

### 例 Firebase auth

```js
import { auth } from '@/lib/firebase.js'

useEffect(async () => {
  if (auth.currentUser) {
    // 処理
  }
}, [auth.currentUser])
```

[reactjs - Detecting Firebase user change with useEffect vs onAuthStateChanged - what's the difference? - Stack Overflow](https://stackoverflow.com/questions/66764936/detecting-firebase-user-change-with-useeffect-vs-onauthstatechanged-whats-the)

## 値があれば表示する値がなければ表示しない

[reactjs - React Redux Store updating, but component not re-rendering - Stack Overflow](https://stackoverflow.com/questions/41964204/react-redux-store-updating-but-component-not-re-rendering/55167119)

```js

function Index () {
  const boardList = () => {
    return items.length < 1 ? null : items && <div>
      {items.map((item) => 
        <div key={item.id}>
          {item.name}
        </div>
      )}
    </div>
  }

  return (
    <>
      {boardList()}
    </>
  )
}

export default Index
```

## Valueの変更を検知してDOM変更

React Hooksを使用する。

[Introducing Hooks – React](https://reactjs.org/docs/hooks-intro.html)

```js
import { useState } from 'react'

const [articles, setArticles] = useState([])

useEffect(async () => {
  if (auth.currentUser) {
    const data = await ArticleModel.get()
    setArticles(data)
  }
}, [auth.currentUser])
```

以下だと検知してくれません。

```js
import { useState } from 'react'

let articles = []

useEffect(async () => {
  if (auth.currentUser) {
    articles = await ArticleModel.get()
  }
}, [auth.currentUser])
```