<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/c38e31d48b89483994121a397960e31f/image.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/c81a04c0dd554f2caca8a3a45fbb7a36/Screenshot%20from%202024-04-19%2001-07-56.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/b3a756028d65467fbed31c31726ec1d0/Screenshot%20from%202024-04-19%2021-45-31.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/fc2d78eb63284e3c8761d846bd09316c/Screenshot%20from%202024-04-17%2023-39-52.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/9a37ba0f0285471b895ed33f60a68f79/image.png" alt="">↓<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/149388bf8cd1483988cec54829a694c6/Screenshot%20from%202024-04-17%2023-41-34.png" alt="">APIの疎通を確認したいだけなので今回はレスポンスをそのまま貼ってます。

成果物

図にするまでもないほど単純ですがインフラ構成図は以下のとおりです。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/03dcccc7c27b48fea22130c63db88996/image.png" alt="">NextJSアプリはAmplifyでホスティングしました。下のAPI Gateway + Lambdaは自作のAPIで、前回までで使っていたMicropost APIのインフラをそのまま活用します。

インフラ

設計

雛形アプリには元々External APIとして<code>read:shows</code>というスコープが必要なAPIが定義されています。今回は追加で<code>read:microposts</code>というスコープを要求する自作のAPIを認可して呼んでみようと思います。 IDトークンのaudはクライアントアプリケーション（今回であればNextJSアプリ）ですがアクセストークンのaudは<code>AUTH0_AUDIENCE</code>環境変数で設定したものになります。 注意点としてAuth0のアクセストークンのaudは一つしか取れないようです（userinfoエンドポイント用のものを除いて）。複数のAPIを使いたい場合はどうすればいいかというと、audは共通のものを使い、scopeで区切ればいいみたいです。（<a href="https://zenn.dev/tatsuyasusukida/articles/auth0-multiple-api" target="_blank" rel="noopener noreferrer">こちら</a>の記事を参考にさせていただきました）今回は、<code>my-custom-api</code>というaud(API)を登録し要求するスコープとして<code>read:shows read:microposts</code>を定義しました。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/b5bcada393f340daadc03efd81a3aaef/image.png" alt="">

概要

<pre><code>diff --git a/app/api/microposts/route.js b/app/api/microposts/route.js
new file mode 100644
index 0000000..b16ab50
--- /dev/null
+++ b/app/api/microposts/route.js
@@ -0,0 +1,23 @@
+import { getAccessToken, withApiAuthRequired } from '@auth0/nextjs-auth0';
+import { NextResponse } from 'next/server';
+
+export const GET = withApiAuthRequired(async function shows(req) {
+&nbsp; try {
+&nbsp; &nbsp; const res = new NextResponse();
+&nbsp; &nbsp; const { accessToken } = await getAccessToken(req, res, {
+&nbsp; &nbsp; &nbsp; scopes: ['read:microposts']
+&nbsp; &nbsp; });
+&nbsp; &nbsp; const apiPort = process.env.API_PORT || 8000;
+&nbsp; &nbsp; const apiHost = process.env.API_HOST;
+&nbsp; &nbsp; const response = await fetch(`${apiHost}:${apiPort}/auth0/microposts`, {
+&nbsp; &nbsp; &nbsp; headers: {
+&nbsp; &nbsp; &nbsp; &nbsp; Authorization: `Bearer ${accessToken}`
+&nbsp; &nbsp; &nbsp; }
+&nbsp; &nbsp; });
+&nbsp; &nbsp; const shows = await response.json();
+
+&nbsp; &nbsp; return NextResponse.json(shows, res);
+&nbsp; } catch (error) {
+&nbsp; &nbsp; return NextResponse.json({ error: error.message }, { status: error.status || 500 });
+&nbsp; }
+});
diff --git a/app/microposts/page.jsx b/app/microposts/page.jsx
new file mode 100644
index 0000000..edf0e43
--- /dev/null
+++ b/app/microposts/page.jsx
@@ -0,0 +1,75 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Button } from 'reactstrap';
+import { withPageAuthRequired } from '@auth0/nextjs-auth0/client';
+
+import Loading from '../../components/Loading';
+import ErrorMessage from '../../components/ErrorMessage';
+import Highlight from '../../components/Highlight';
+
+function External() {
+&nbsp; const [state, setState] = useState({ isLoading: false, response: undefined, error: undefined });
+
+&nbsp; const callApi = async () =&gt; {
+&nbsp; &nbsp; setState(previous =&gt; ({ ...previous, isLoading: true }));
+
+&nbsp; &nbsp; try {
+&nbsp; &nbsp; &nbsp; const response = await fetch('/api/microposts');
+&nbsp; &nbsp; &nbsp; const data = await response.json();
+
+&nbsp; &nbsp; &nbsp; setState(previous =&gt; ({ ...previous, response: data, error: undefined }));
+&nbsp; &nbsp; } catch (error) {
+&nbsp; &nbsp; &nbsp; setState(previous =&gt; ({ ...previous, response: undefined, error }));
+&nbsp; &nbsp; } finally {
+&nbsp; &nbsp; &nbsp; setState(previous =&gt; ({ ...previous, isLoading: false }));
+&nbsp; &nbsp; }
+&nbsp; };
+
+&nbsp; const handle = (event, fn) =&gt; {
+&nbsp; &nbsp; event.preventDefault();
+&nbsp; &nbsp; fn();
+&nbsp; };
+
+&nbsp; const { isLoading, response, error } = state;
+
+&nbsp; return (
+&nbsp; &nbsp; &lt;&gt;
+&nbsp; &nbsp; &nbsp; &lt;div className="mb-5" data-testid="external"&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1 data-testid="external-title"&gt;Microposts&lt;/h1&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &lt;div data-testid="external-text"&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p className="lead"&gt;Ping an external API by clicking the button below&lt;/p&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; This will call a local API on port 3001 that would have been started if you run &lt;code&gt;npm run dev&lt;/code&gt;.
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/p&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; An access token is sent as part of the request's &lt;code&gt;Authorization&lt;/code&gt; header and the API will validate
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; it using the API's audience value. The audience is the identifier of the API that you want to call (see{' '}
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href="https://auth0.com/docs/get-started/dashboard/tenant-settings#api-authorization-settings"&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; API Authorization Settings
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;{' '}
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for more info).
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/p&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &lt;Button color="primary" className="mt-5" onClick={e =&gt; handle(e, callApi)} data-testid="external-action"&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Ping API
+&nbsp; &nbsp; &nbsp; &nbsp; &lt;/Button&gt;
+&nbsp; &nbsp; &nbsp; &lt;/div&gt;
+&nbsp; &nbsp; &nbsp; &lt;div className="result-block-container"&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; {isLoading &amp;&amp; &lt;Loading /&gt;}
+&nbsp; &nbsp; &nbsp; &nbsp; {(error || response) &amp;&amp; (
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div className="result-block" data-testid="external-result"&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h6 className="muted"&gt;Result&lt;/h6&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {error &amp;&amp; &lt;ErrorMessage&gt;{error.message}&lt;/ErrorMessage&gt;}
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {response &amp;&amp; &lt;Highlight&gt;{JSON.stringify(response, null, 2)}&lt;/Highlight&gt;}
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; )}
+&nbsp; &nbsp; &nbsp; &lt;/div&gt;
+&nbsp; &nbsp; &lt;/&gt;
+&nbsp; );
+}
+
+export default withPageAuthRequired(External, {
+&nbsp; onRedirecting: () =&gt; &lt;Loading /&gt;,
+&nbsp; onError: error =&gt; &lt;ErrorMessage&gt;{error.message}&lt;/ErrorMessage&gt;
+});
diff --git a/components/NavBar.jsx b/components/NavBar.jsx
index bf4eea4..c393d66 100644
--- a/components/NavBar.jsx
+++ b/components/NavBar.jsx
@@ -54,6 +54,11 @@ const NavBar = () =&gt; {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;External API
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/PageLink&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/NavItem&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;NavItem&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;PageLink href="/microposts" className="nav-link" testId="navbar-external"&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Microposts
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/PageLink&gt;
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/NavItem&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/Nav&gt;</code></pre> 中身はほぼテンプレにあったExternal APIのコピペです。

フロントエンド

<pre><code>diff --git a/app.py b/app.py
index df4073e..c6791ef 100644
--- a/app.py
+++ b/app.py
@@ -6,6 +6,7 @@ import urllib
&nbsp;from datetime import datetime, timedelta, timezone
&nbsp;from chalicelib.models import Microposts
&nbsp;from chalicelib.utils import login
+import jwt
&nbsp;
&nbsp;
&nbsp;app = Chalice(app_name="XXXXXXXXXXXXXXXXXXX")
@@ -16,6 +17,7 @@ ssm = boto3.client("ssm")
&nbsp;CLIENT_ID = ssm.get_parameter(Name="/google_oauth/client_id")["Parameter"]["Value"]
&nbsp;CLIENT_SECRET = ssm.get_parameter(Name="/google_oauth/client_secret")["Parameter"]["Value"]
&nbsp;REDIRECT_URI = ssm.get_parameter(Name="/google_oauth/redirect_uri")["Parameter"]["Value"]
+AUTH0_CLIENT_ID = ssm.get_parameter(Name="/auth0/client_id")["Parameter"]["Value"]
&nbsp;
&nbsp;
&nbsp;@app.route("/get_token", methods=["POST"], cors=CORSConfig(allow_origin="https://XXXXXXXXXXXXXXXXXXXXXXXXXXXXX"))
@@ -112,3 +114,33 @@ def _parse_schedule(schedule_str):
&nbsp; &nbsp; &nbsp;summary = " ".join(parts[5:])
&nbsp;
&nbsp; &nbsp; &nbsp;return start, end, summary
+
+
+@app.route("/auth0/microposts", methods=["GET"])
+def get_micropost_for_auth0():
+&nbsp; &nbsp; if "Authorization" not in app.current_request.headers:
+&nbsp; &nbsp; &nbsp; &nbsp; return Response(body=None, status_code=401)
+
+&nbsp; &nbsp; access_token = app.current_request.headers["Authorization"].removeprefix("Bearer ")
+
+&nbsp; &nbsp; jwks_client = jwt.PyJWKClient("https://dev-XXXXXXXXXXXXXXXXXXXXX.us.auth0.com/.well-known/jwks.json")
+&nbsp; &nbsp; try:
+&nbsp; &nbsp; &nbsp; &nbsp; signing_key = jwks_client.get_signing_key_from_jwt(access_token)
+&nbsp; &nbsp; &nbsp; &nbsp; payload = jwt.decode(
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; access_token,
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; signing_key.key,
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; algorithms=["RS256"],
+&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; audience=AUTH0_CLIENT_ID,
+&nbsp; &nbsp; &nbsp; &nbsp; )
+&nbsp; &nbsp; except Exception as e:
+&nbsp; &nbsp; &nbsp; &nbsp; app.log.error(e)
+&nbsp; &nbsp; &nbsp; &nbsp; return Response(body=None, status_code=401)
+
+&nbsp; &nbsp; # scopeの検証
+&nbsp; &nbsp; if "read:microposts" not in payload["scope"].split():
+&nbsp; &nbsp; &nbsp; &nbsp; app.log.error("insufficient scope")
+&nbsp; &nbsp; &nbsp; &nbsp; return Response(body=None, status_code=401)
+
+&nbsp; &nbsp; posts = Microposts.query(payload.get("sub"))
+&nbsp; &nbsp; res = [post.to_simple_dict() for post in posts]
+&nbsp; &nbsp; return Response(body=res, status_code=200)</code></pre>

バックエンド

API連携の実装

Auth0においてはIDトークンだけでなくアクセストークンも実態は署名付きJWTです。実装していてそれぞれのpayloadを参照したいことが結構あると思ったので以下に記載しておきます。 IDトークンのpayload<pre><code>{
&nbsp; "nickname": "XXXXXXX",
&nbsp; "name": "XXXXXXXXXXXXXXX",
&nbsp; "picture": "https://s.gravatar.com/avatar/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.png",
&nbsp; "updated_at": "2024-04-18T14:31:52.952Z",
&nbsp; "iss": "https://dev-XXXXXXXXXXXXXXXXXXXXXXXXXXX.us.auth0.com/",
&nbsp; "aud": "XXXXXXXXXXXXXXXXXXXXXXXX",
&nbsp; "iat": 1713450713,
&nbsp; "exp": 1713486713,
&nbsp; "sub": "auth0|XXXXXXXXXXXXXXXXXXXXXXXXXX",
&nbsp; "sid": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
&nbsp; "nonce": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
}</code></pre> アクセストークンのpayload<pre><code>{
&nbsp; "iss": "https://dev-XXXXXXXXXXXXXXXXXXXXXXXX.us.auth0.com/",
&nbsp; "sub": "auth0|XXXXXXXXXXXXXXXXXXXXXXXXXXXXXx",
&nbsp; "aud": [
&nbsp; &nbsp; "my-custom-api",
&nbsp; &nbsp; "https://dev-XXXXXXXXXXXXXXXXXXXXXX.us.auth0.com/userinfo"
&nbsp; ],
&nbsp; "iat": 1713452513,
&nbsp; "exp": 1713538913,
&nbsp; "scope": "openid profile read:shows read:microposts",
&nbsp; "azp": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
}</code></pre>

Auth0のアクセストークンとIDトークン

今回はAuth0環境の構築から自作のAPIを投げてみるまで試してみました。 迷ったのはAPIでユーザを検証するときにIDトークンを使うかアクセストークンを使うかです。APIのクライアントが確実に限定される場合はIDトークンのほうがユーザが認証されていることが保証されるのでセキュリティ的なことを考えてもいいと思いますが、アクセストークンを使うのでも使い方としては正しいと思います。（むしろ投稿アプリの使用をユーザが認可したという意味になるのでアクセストークンの方が本来の目的にあってそうな気がします）ただその考え方を推し進めると全てのバックエンドとのやり取りはアクセストークンを使えばいいとなって逆にIDトークンいらなくない？とちょっと思いましたが、見ての通りIDトークンにはユーザ名やアバターなどアプリの見た目をユーザのためにカスタマイズするのに必要ですし（userinfoエンドポイントにアクセスすればいいじゃんという話もありますが・・・）、アクセストークンでは認証の証明にはならないためアプリ側でIDトークンの検証は行うべきだと思います。

さいごに

Auth0環境を構築して自作のAPIと連携してみた

公式<a href="https://github.com/pmndrs/zustand" target="_blank" rel="noopener noreferrer">https://github.com/pmndrs/zustand</a> 軽量なグローバル管理ライブラリです。Reduxを使用するとめんどくさいので業務でも個人開発でも使用してます。<pre><code>import { create } from 'zustand'

const useBearStore = create((set) =&gt; ({
 bears: 0,
 increasePopulation: () =&gt; set((state) =&gt; ({ bears: state.bears + 1 })),
 removeAllBears: () =&gt; set({ bears: 0 }),
}))</code></pre> <pre><code>function BearCounter() {
 const bears = useBearStore((state) =&gt; state.bears)
 return &lt;h1&gt;{bears} around here ...&lt;/h1&gt;
}

function Controls() {
 const increasePopulation = useBearStore((state) =&gt; state.increasePopulation)
 return &lt;button onClick={increasePopulation}&gt;one up&lt;/button&gt;
}</code></pre>

zustand

公式<a href="https://storybook.js.org/" target="_blank" rel="noopener noreferrer">https://storybook.js.org/</a> コンポーネントごとに単体テストが簡単にできるようになります。個々にstorybookのファイルを作成しないといけないので業務ではリソース次第で採用するといいと思います。 こんな感じのページが生成されます。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/39f5d58dc5504b50ae02649bf20f3281/mdx-example.png" alt="">

Storybook

classに直接書いていくとどうしても可読性が下がってしまうので必要な時に使用するといいと思います。(tailwindには@applyというオプションもあるのですが、ホバーでスタイル確認できないので 簡単なのですぐ使えると思います。<pre><code>import { tw } from "tw-tag";

// ()で囲むとホバー時にスタイルが確認できる。
const error_message = tw(`text-red-600 text-sm mb-2`);

&lt;p className={`${error_message} mx-auto`} style={{ whiteSpace: "pre-wrap" }}&gt;
	{errorMessage}
&lt;/p&gt;</code></pre>

tw-tag

いかがでしたでしょうか？ 他にも便利なライブラリがたくさんありますので、探してみるのもいいかもしれませんね。

まとめ

【React】使ってみていい感じだったライブラリ

そもそもReactHookFormって何？と思う方もいるかもしれませんので簡単に説明するとフォームに対してバリデーションをかけてくれるReact専用ライブラリです。 公式でも拡張機能に優れていると自負していますが、バリデーションで言うとresolverオプションに<a href="https://github.com/colinhacks/zod" target="_blank" rel="noopener noreferrer">Zod</a>、<a href="https://github.com/jquense/yup" target="_blank" rel="noopener noreferrer">Yup</a> などの別のバリデーションライブラリを設定することができ、<a href="https://mui.com/" target="_blank" rel="noopener noreferrer">mui</a>などのコンポーネントライブラリと組み合わせることもできます。 muiと組み合わせるとこんな感じです。(muiはデフォルトでアニメーションがついてるのでかっこいいです！赤文字がReact Hook Formのバリデーション部分となります。<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/4a3409894257435fac2cff5647bb09ad/screencapture-localhost-3000-Login-2024-01-04-12_42_59.png" alt=""> 公式のデモからも実際にフォームを入力して確かめることができます。<a href="https://react-hook-form.com/" target="_blank" rel="noopener noreferrer">React Hook Form</a>

ReactHookFormとは？

【React】ReactHookFormのinputを分割して送信時に結合する。

フォーム分割の利点はユーザの入力工数を減らせることにあります。<h3 id="ha133a18a47">数字入力の桁数が多い場合</h3>分割なし1232343454565676<ul><li>何桁?</li><li>どこを間違えたか分かりづらい</li></ul> 入力が分割されている場合1232 3434 5456 5676 <h3 id="hdd7e77fb12">日付などの間に/が必要な場合</h3>分割なしYY/MM<ul><li>/までユーザに入力させている。</li></ul> 入力が分割されている場合YY MM

input分割の利点

では本題に移っていきます。 まず完成をお見せします。<pre><code>"use client";

import React, { useState } from "react";
import { useForm, SubmitHandler, Controller } from "react-hook-form";

type FormData = {
 birthday: string;
};

export default function page() {
 const [isValue, setIsValue] = useState("");
 const {
 control,
 handleSubmit,
 formState: { errors },
 } = useForm&lt;FormData&gt;();


 const onSubmit: SubmitHandler&lt;FormData&gt; = (data) =&gt; {
 setIsValue(data.birthday);
 };


 return (
 &lt;div className="flex justify-center items-center w-screen h-screen flex-col"&gt;
 {isValue &amp;&amp; (
 &lt;p className="mb-8 text-lg"&gt;
 あなたの生年月日は&lt;span className="text-blue-600"&gt;{isValue}&lt;/span&gt;
 です。
 &lt;/p&gt;
 )}
 &lt;form onSubmit={handleSubmit(onSubmit)} className="flex w-50 h-50 p-12 bg-gray-400 gap-8 flex-col"&gt;
 &lt;div&gt;
 &lt;label&gt;生年月日&lt;/label&gt;
 &lt;Controller
 name="birthday"
 control={control}
 rules={{ required: true }}
 render={({ field }) =&gt; (
 &lt;div className="flex !w-2/4 items-center"&gt;
 &lt;input
 className="h-6"
 type="text"
 name="Year"
 placeholder="年"
 onChange={(e) =&gt; {
 const yearValue = e.target.value;
 const monthValue = field.value?.split("/")[1];
 const dayValue = field.value?.split("/")[2];
 const newBirthdayValue = `${yearValue}/${monthValue}/${dayValue}`;
 field.onChange(newBirthdayValue);
 }}
 maxLength={4}
 /&gt;
 &lt;p className="mx-2"&gt;/&lt;/p&gt;
 &lt;input
 className="h-6"
 type="text"
 name="Mouth"
 placeholder="月"
 onChange={(e) =&gt; {
 const yearValue = field.value?.split("/")[0];
 const monthValue = e.target.value;
 const dayValue = field.value?.split("/")[2];
 const newBirthdayValue = `${yearValue}/${monthValue}/${dayValue}`;
 field.onChange(newBirthdayValue);
 }}
 maxLength={2}
 /&gt;
 &lt;p className="mx-2"&gt;/&lt;/p&gt;
 &lt;input
 className="h-6"
 type="text"
 name="Day"
 placeholder="日"
 onChange={(e) =&gt; {
 const yearValue = field.value?.split("/")[0];
 const monthValue = field.value?.split("/")[1];
 const dayValue = e.target.value;
 const newBirthdayValue = `${yearValue}/${monthValue}/${dayValue}`;
 field.onChange(newBirthdayValue);
 }}
 maxLength={2}
 /&gt;
 &lt;/div&gt;
 )}
 /&gt;
 {errors.birthday &amp;&amp; &lt;p className="text-red-600"&gt;{errors.birthday.message}&lt;/p&gt;}
 &lt;/div&gt;
 &lt;button className="h-10" type="submit"&gt;
 送信
 &lt;/button&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 );
}</code></pre> 大事な部分はonChangeです。<pre><code> onChange={(e) =&gt; {
 const yearValue = e.target.value;
 const monthValue = field.value?.split("/")[1];
 const dayValue = field.value?.split("/")[2];
 const newBirthdayValue = `${yearValue}/${monthValue}/${dayValue}`;
 field.onChange(newBirthdayValue);
 }}</code></pre> この部分で結合してfieldに返してます。<pre><code>const newBirthdayValue = `${yearValue}/${monthValue}/${dayValue}`;
field.onChange(newBirthdayValue);</code></pre> 送信してみると<img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/5f906f724bbd4488a3e1c92b55f23e64/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2014.18.54.png" alt=""><img src="https://images.microcms-assets.io/assets/b30d7661c2694503832399a83cea2137/b11058d9b71347719097fc2b2974e3a3/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-04%2014.19.01.png" alt="">/区切りになってますね。

実装

ReactHookFormのcontrollerを複数用意して個別にバリデーションをかけたり、結合された値にバリデーションをかけたりできるので用途に応じて柔軟に利用できるところがいいですね。 それでは、次回の記事でお会いしましょう！

【React】React Hook Formでフォーム分割して送信時にデータ結合する

こんにちは、Vercel Ship Day4にて、フロントエンドアプリケーションに認証機能を簡単に実装する方法が紹介されました。 <a href="https://vercel.com/blog/authentication-for-the-frontend-cloud" target="_blank" rel="noopener noreferrer">この</a>記事では、Vercelが提供するAuth0という認証プラットフォームを使用し、フロントエンドアプリケーションに認証機能を簡単に実装する方法が解説されています。Auth0は、多様な認証方法をサポートしており、簡単に実装することができます。 認証機能を実装することで、ユーザーのプライバシーやセキュリティを保護し、信頼性の高いウェブアプリケーションを作ることができます。また、Auth0を使用することで、ユーザー認証に関する複雑な機能やセキュリティについての懸念を払拭することができます。 この記事では、VercelとAuth0を組み合わせることで、フロントエンドアプリケーションに簡単かつ高度な認証機能を実装する方法が紹介されています。認証機能を実装したい方は、ぜひ<a href="https://vercel.com/blog/authentication-for-the-frontend-cloud" target="_blank" rel="noopener noreferrer">この</a>記事を参考にしてください。 以上、VercelとAuth0を組み合わせた、フロントエンドアプリケーションに認証機能を簡単に実装する方法についてご紹介しました。

【Vercel】フロントエンドアプリケーションに認証機能を簡単に実装できるように！

Vercel Ship Day5 #1 〜【Vercel】Frontend App に認証機能を簡単に実装！〜

こんにちは、Next.jsの新しいバージョン「Next.js 13.4」がリリースされました。今回のアップデートでは、Incremental Static Regeneration（ISR）という新機能が追加されました。 ISRは、静的生成されたウェブページを、動的に再生成する機能です。これにより、ユーザーがウェブサイトにアクセスした際に、古い情報が表示されることを防ぎ、常に最新の情報を提供することができます。 また、ISRは、ウェブサイトのパフォーマンスを向上させることができます。通常の静的生成では、全てのページを一度に生成する必要がありますが、ISRを使うことで、必要なページだけを再生成することができます。これにより、ウェブサイトのロード速度を改善し、ユーザー体験を向上させることができます。 Next.js 13.4では、ISRを簡単に実装するためのAPIが提供されています。また、ISRを活用することで、動的なコンテンツを持つウェブサイトでも、静的なウェブサイトと同じように高速でスムーズな動作を実現することができます。 以上、Next.jsの新機能「Incremental Static Regeneration」についてご紹介しました。Next.jsを利用している方は、ぜひこの新しい機能を活用して、ウェブサイトのパフォーマンスを改善してください。

【Next.js 13.4】新機能のIncremental Static Regenerationでウェブサイトのパフォーマンスを改善！？

Vercel Ship Day4 〜【Next.js 13.4】新機能のISRでウェブサイトのパフォーマンスを改善！〜

<code>MatterArea.tsx</code><pre><code>import {
 Engine,
 Body,
 Render,
 Bodies,
 MouseConstraint,
 Mouse,
 Runner,
 Composite,
} from 'matter-js'
import { memo, useLayoutEffect } from 'react'
import styles from '@/styles/components/MatterArea.module.scss'

export const MatterArea = memo(() =&gt; {
 useLayoutEffect(() =&gt; {
 // イベントリスナー クリーンアップ関数で呼ぶため先に定義
 let scrollTimer: NodeJS.Timeout

 function initMatter(matterHolder: HTMLElement) {
 const engine = Engine.create()
 const width = matterHolder?.clientWidth
 const height = matterHolder?.clientHeight

 const render = Render.create({
 element: matterHolder,
 engine,
 options: {
 width: width,
 height: height,
 background: 'transparent',
 wireframes: false,
 pixelRatio: 5,
 },
 })

 // 壁の追加
 Composite.add(engine.world, [
 Bodies.rectangle(width / 2, height + 250, width, 500, {
 isStatic: true,
 label: '_noMap',
 render: {
 fillStyle: 'transparent',
 },
 }),
 Bodies.rectangle(-50, height / 2, 100, height * 20, {
 isStatic: true,
 label: '_noMap',
 render: {
 fillStyle: 'transparent',
 },
 }),
 Bodies.rectangle(width + 50, height / 2, 100, height * 20, {
 isStatic: true,
 label: '_noMap',
 render: {
 fillStyle: 'transparent',
 },
 }),
 ])

 matterHolder
 .querySelectorAll('[data-object]')
 .forEach((object: HTMLImageElement) =&gt; {
 if (object.getAttribute('data-circle')) {
 addObjectCircle(object)
 } else {
 addObject(object)
 }
 })

 function addObjectCircle(object: HTMLImageElement) {
 const objWidth = object.clientWidth
 const objHeight = object.clientHeight
 let rect: Body

 rect = Bodies.circle(
 Math.random() * (width - 200) + 100,
 -300,
 objWidth / 2,
 {
 label: object.getAttribute('data-object'),
 // density:
 // object.getAttribute('data-object') === 'obj2' ? 0.01 : 0.02, // 質量
 // frictionAir: 0.01, // 空気抵抗
 restitution: 0.75, // 跳ね返り
 friction: 0.01, // 摩擦
 render: {
 sprite: {
 texture: `${object.getAttribute('src')}`,
 xScale: objWidth / object.naturalWidth,
 yScale: objWidth / object.naturalWidth,
 },
 },
 }
 )

 Composite.add(engine.world, rect)
 }

 function addObject(object: HTMLImageElement) {
 const objWidth = object.clientWidth
 const objHeight = object.clientHeight
 let rect: Body

 rect = Bodies.rectangle(
 Math.random() * (width - 200) + 100,
 -300,
 objWidth,
 objHeight,
 {
 label: object.getAttribute('data-object'),
 // density: 2, // 質量
 // frictionAir: 0.01, // 空気抵抗
 restitution: 0.75, // 跳ね返り
 friction: 0.01, // 摩擦
 render: {
 sprite: {
 texture: `${object.getAttribute('src')}`,
 xScale: objWidth / object.naturalWidth,
 yScale: objHeight / object.naturalHeight,
 },
 },
 }
 )

 Composite.add(engine.world, rect)
 }

 if (window.innerWidth &gt;= 768) {
 const mouse = Mouse.create(render.canvas)
 const mouseConstraint = MouseConstraint.create(engine, {
 mouse: mouse,
 constraint: {
 render: {
 visible: false,
 },
 },
 })
 render.mouse = mouse
 Composite.add(engine.world, mouseConstraint)
 }

 Render.run(render)
 const runner = Runner.create()
 Runner.run(runner, engine)

 matterHolder.classList.add('is-active')

 // スクロールで物体を動かす
 scrollTimer = setTimeout(() =&gt; {
 const allBodies = Composite.allBodies(engine.world)
 const scrollY = window.scrollY

 const scrollEvent = () =&gt; {
 const scrollDelta = window.scrollY - scrollY
 // console.log(scrollDelta)

 allBodies.forEach((body: Matter.Body) =&gt; {
 if (body.label === '_noMap') {
 return
 }

 if (Math.floor(scrollDelta) % 5 === 0) {
 Body.applyForce(
 body,
 { x: body.position.x, y: body.position.y },
 {
 x:
 (Math.floor(Math.random() * 2) === 0 ? -1 : 1) *
 Math.random() *
 0.01,
 y: -0.047,
 }
 )
 }
 })
 }

 if (typeof window === 'object') {
 // 画面内だけでスクロールイベント発生
 if (window.IntersectionObserver) {
 const observer = new IntersectionObserver((entries) =&gt; {
 for (const e of entries) {
 if (e.isIntersecting) {
 window.addEventListener('scroll', scrollEvent)
 } else {
 window.removeEventListener('scroll', scrollEvent)
 }
 }
 })
 const observerEl = document.querySelector('#observer')
 observer?.observe(observerEl)
 }
 }
 }, 2000)

 // リサイズが終了して1秒後に削除
 let timeoutId: NodeJS.Timeout
 let windowW = window.innerWidth
 window.addEventListener('resize', () =&gt; {
 if (
 window.innerWidth &gt;= 768 ||
 (window.innerWidth &lt;= 767 &amp;&amp;
 Math.abs(windowW - window.innerWidth) &gt; 5)
 ) {
 clearTimeout(timeoutId)

 timeoutId = setTimeout(function () {
 const allBodies = Composite.allBodies(engine.world)
 allBodies.forEach((body) =&gt; {
 Composite.remove(engine.world, body)
 })
 Engine.clear(engine)
 Runner.stop(runner)
 }, 1000)
 }
 })
 }

 const matterHolder: HTMLElement =
 document.querySelector('[data-html-matter]')

 if (typeof window === 'object') {
 // 画面内で物理エンジンを実行
 if (window.IntersectionObserver) {
 const observer = new IntersectionObserver((entries) =&gt; {
 for (const e of entries) {
 if (e.isIntersecting) {
 if (!matterHolder.classList.contains('is-active')) {
 initMatter(matterHolder)
 }
 } else {
 // console.log('out');
 }
 }
 })

 const observerEl = document.querySelector('#observer')
 observer.observe(observerEl)
 }
 }

 // リサイズが終了して1秒後に再生成
 // safariは過剰にresizeイベントが発火されるのでそれ対策
 let timeoutId: NodeJS.Timeout
 let windowW = window.innerWidth
 const initMatterResize = () =&gt; {
 if (
 window.innerWidth &gt;= 768 ||
 (window.innerWidth &lt;= 767 &amp;&amp; Math.abs(windowW - window.innerWidth) &gt; 5)
 ) {
 clearTimeout(timeoutId)

 timeoutId = setTimeout(function () {
 initMatter(matterHolder)
 }, 1000)
 }
 }

 window.addEventListener('resize', initMatterResize)

 return () =&gt; {
 Engine.clear
 Runner.stop
 window.removeEventListener('resize', initMatterResize)
 clearTimeout(scrollTimer)
 }
 }, [])

 return (
 &lt;&gt;
 &lt;div className={`${styles.matter}`} data-html-matter&gt;
 &lt;div className={`${styles.observer}`} id='observer'&gt;&lt;/div&gt;
 &lt;img
 className={`${styles.logo}`}
 src='/images/top/matter/logo.svg'
 data-object='obj1'
 data-circle
 alt=''
 /&gt;
 &lt;img
 className={`${styles.team}`}
 src='/images/top/matter/team.svg'
 data-object='obj2'
 data-circle
 alt=''
 /&gt;
 &lt;img
 className={`${styles.yoku}`}
 src='/images/top/matter/yoku.svg'
 data-object='obj3'
 alt=''
 /&gt;
 &lt;img
 className={`${styles.build}`}
 src='/images/top/matter/build.svg'
 data-object='obj4'
 alt=''
 /&gt;
 &lt;img
 className={`${styles.member}`}
 src='/images/top/matter/member.svg'
 data-object='obj5'
 alt=''
 /&gt;
 &lt;img
 className={`${styles.product}`}
 src='/images/top/matter/product.svg'
 data-object='obj6'
 alt=''
 /&gt;
 &lt;img
 className={`${styles.service}`}
 src='/images/top/matter/service.svg'
 data-object='obj7'
 alt=''
 /&gt;
 &lt;/div&gt;
 &lt;/&gt;
 )
})

MatterArea.displayName = 'MatterArea'</code></pre> <code>MatterArea.module.scss</code><pre><code>@use '../variable' as v;
@use '../mixin.scss' as r;

.observer {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 1px;
 height: 1px;
 opacity: 0;
 pointer-events: none;
}

.matter {
 width: 676rem;
 height: 500rem;
 background-color: #fff;
 border-radius: 20px;
 overflow: hidden;
 position: relative;

 canvas {
 position: absolute;
 z-index: 1;
 left: 50%;
 bottom: 0;
 width: 100%;
 height: 100%;
 transform: translateX(-50%);
 background-color: transparent;
 }

 [data-object] {
 position: absolute;
 border-radius: 5px;
 background: rgba(0, 0, 0, 0.05);
 pointer-events: none;
 opacity: 0;

 * {
 pointer-events: all;
 }
 }

 [data-object='obj1'],
 [data-object='obj2'] {
 border-radius: 50%;
 }

 @include r.mq(mdless) {
 border-radius: 0;
 width: 390rem;
 height: 500rem;
 margin-left: -28rem;
 margin-top: -156rem;
 }
}</code></pre> 少し長いですが、全体像はこんな感じです。cssはCSS Modulesであててます。読めば大体わかるはずなので、肝心なところを取り上げて説明します。

全体のソースコード

Matter.jsは、ブラウザのDOMのレンダリングサイクルのタイミングに合わせて、物理エンジンのアニメーションを実行する必要があります。 Reactでは、useEffectはレンダリング後に実行されるため、物理エンジンのアニメーションが描画される前に実行されてしまう可能性があります。これにより、描画される前に計算された位置に物理オブジェクトが表示されたり、描画が一時停止したりするなどの問題が発生する可能性があります。 一方、useLayoutEffectは、ReactがDOMのレンダリング前に呼び出す関数であり、物理エンジンのアニメーションを描画する前に実行されます。これにより、物理エンジンが正確な位置でアニメーションされることが保証されます。

useEffect内ではなくuseLayoutEffect内で実行する

<pre><code>return () =&gt; {
 Engine.clear
 Runner.stop
 window.removeEventListener('resize', initMatterResize)
 clearTimeout(scrollTimer)
}</code></pre> 上記のクリーンアップ関数内で物理エンジンをクリアしたり、イベントリスナー、タイマーを除去してます。アンマウントされる際にリソースの解放を行う必要があるのでこれは大事な処理です。

クリーンアップ関数を書く

Reactで動かすためにすること

パフォーマンス改善のために、画面内でのみ物理エンジンを実行するようにしました。<pre><code>if (typeof window === 'object') {
 // 画面内で物理エンジンを実行
 if (window.IntersectionObserver) {
 const observer = new IntersectionObserver((entries) =&gt; {
 for (const e of entries) {
 if (e.isIntersecting) {
 if (!matterHolder.classList.contains('is-active')) {
 initMatter(matterHolder)
 }
 } else {
 // console.log('out');
 }
 }
 })

 const observerEl = document.querySelector('#observer')
 observer.observe(observerEl)
 }
}</code></pre> <a href="https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API" target="_blank" rel="noopener noreferrer">Intersection Observer API</a>を使います。#observerの要素が画面に入ってきてるかどうかで判定しています。[data-html-matter]の要素に<code>.is-active</code>がついてない時に、<code>initMatter</code>を実行してます。initMatterの関数内で.is-activeが付くので、2回目以降は実行されないようにしています。

画面内でのみ物理エンジンを実行する

<pre><code>const allBodies = Composite.allBodies(engine.world)
const scrollY = window.scrollY

const scrollEvent = () =&gt; {
 const scrollDelta = window.scrollY - scrollY

 allBodies.forEach((body: Matter.Body) =&gt; {
 if (body.label === '_noMap') {
 return
 }

 if (Math.floor(scrollDelta) % 5 === 0) {
 Body.applyForce(
 body,
 { x: body.position.x, y: body.position.y },
 {
 x:
 (Math.floor(Math.random() * 2) === 0 ? -1 : 1) *
 Math.random() *
 0.01,
 y: -0.047,
 }
 )
 }
 })
}</code></pre> <code>allBodies.forEach</code>でWorld内の要素をループで回します。<code>scrollDelta</code>でスクロール幅を計算してます。スクロールのスピードはブラウザで確認しながら調整しました。<code>Body.applyForce</code>で要素を動かすことができます。y軸は固定ですが、x軸はランダムに動くようにしました。<code>Math.floor(scrollDelta) % 5 === 0</code>ちなみにこれ←を書かないと要素が無限に上に消えていきます。(ここは調整)

スクロールで要素が動くようにする

<pre><code>const render = Render.create({
 element: matterHolder,
 engine,
 options: {
 width: width,
 height: height,
 background: 'transparent',
 wireframes: false,
 pixelRatio: 5,
 },
})</code></pre> 画質が悪い場合、<code>pixelRatio: 5</code>を指定すれば治ります。解像度の設定ですね。高く設定しすぎると端末が対応していなくてmatter.jsの表示自体されなくなるので注意です。

画質が悪い場合にすること

時間がなくてかなり駆け出しで説明しましたが、分からないところや聞きたいこと、間違いなどがあればTwitterなどで何なりと聞いてください。

BuildersIO produced by YOKU

#Next.js の記事一覧

Auth0環境を構築して自作のAPIと連携してみた

【React】使ってみていい感じだったライブラリ

【React】React Hook Formでフォーム分割して送信時にデータ結合する

Vercel Ship Day5 #1 〜【Vercel】Frontend App に認証機能を簡単に実装！〜

Vercel Ship Day4 〜【Next.js 13.4】新機能のISRでウェブサイトのパフォーマンスを改善！〜

物理エンジンライブラリ「matter.js」を使って要素が動くリッチなアニメーションを作ってみた

OpenAIとDeeplのAPIを使ってChatGPTのCLIツール作ってみた

「Googleでログイン」を実装してみた〜トークンリフレッシュ編〜

Vercel Ship Day5 #1 〜【Vercel】Frontend App に認証機能を簡単に実装！〜