おはこんにちばんは。<a href="https://github.com/IshinoJun/nextjs-storybook" target="_blank" rel="noopener noreferrer">Next.jsにStorybookを導入</a>してみました。その手順を記載します。 <h2 id="hfe5a8eaaf7">実行環境</h2><ul><li>Next.js 9.5.3</li><li>React 16.13.1</li><li>Storybook/react 6.0.12</li><li>Node.js 12.18.0</li></ul> <h2 id="hc2e1b5db24">packageを追加</h2>いくつか便利なアドオンも追加しています。 <pre><code>yarn add -D @storybook/react @storybook/addons @storybook/addon-a11y @storybook/addon-actions @storybook/addon-info @storybook/addon-knobs @storybook/addon-links @storybook/addon-storyshots @types/storybook__addon-info @types/storybook__addon-storyshots @types/storybook__react</code></pre> <h2 id="hfa896f3411">設定ファイルを追加</h2>以下、必要な設定を追加します。 <pre><code>.storybook/main.js

const path = require("path");
const SRC_PATH = path.join(__dirname, '../src');

module.exports = {
 stories: ['../src/**/*.stories.tsx'],
 addons: [
 '@storybook/addon-a11y',
 '@storybook/addon-actions',
 '@storybook/addon-knobs',
 '@storybook/addon-links',
 ],
 webpackFinal: async(config, {configType}) =&gt; {
 config.module.rules.push({
 test: /\.(ts|tsx)$/,
 include: [SRC_PATH],
 use: [
 {
 loader: require.resolve('babel-loader'),
 options: {
 presets: [['react-app', { flow: false, typescript: true }]],
 }
 },
 { loader: require.resolve('react-docgen-typescript-loader') }
 ]
 });
 config.resolve.extensions.push('.ts', '.tsx');
 return config;
 }
};</code></pre> <pre><code>.storybook/preview.js

import { addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { withKnobs } from '@storybook/addon-knobs';
import { withA11y } from '@storybook/addon-a11y';

addDecorator(withInfo);
addDecorator(withKnobs);
addDecorator(withA11y);</code></pre> <h2 id="hc389788d77">コンポーネントとStroyを追加</h2>簡単なコンポーネントとStoryを以下の通り追加します。 Stroyの命名は、<code>Component名 + .stories.tsx</code>&nbsp;になります。 <pre><code>src/components/Button.tsx

import * as React from "react";

interface Props {
 text:string;
}

type ButtonProps = React.ButtonHTMLAttributes&lt;HTMLButtonElement&gt; &amp; Props;

const Button: React.FC&lt;ButtonProps&gt; = (props:ButtonProps) =&gt; {
 const { text } = props;

 return (
 &lt;button {...props}&gt;{text}&lt;/button&gt;
 );
};

export default Button;</code></pre> <pre><code>src/components/Button.stories.tsx

import { Meta } from "@storybook/react/types-6-0";
import React from "react";
import Button from "./Button";

export default {
 title: "Button",
 component: Button,
} as Meta;

export const Default = (): JSX.Element =&gt; &lt;Button text="test" /&gt;;</code></pre> <h2 id="hb047d44edf">Storybookを起動</h2>packageに以下を追加して起動できるようにします。 <pre><code>package.json

"scripts": {
 "storybook": "start-storybook -p 6006",
 "build:storybook": "build-storybook -o build/storybook"
 }</code></pre> yarn storybook&nbsp;&nbsp;で起動し、<a style="color:#6200ac" href="http://localhost:6006/" target="_blank" rel="noopener noreferrer">http://localhost:6006</a>&nbsp;にアクセス出来たら成功です。以下のような画面が出るはずです。お疲れ様でした。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/storybook.png" alt=""> <h2 id="h1afe451c43">さいごに</h2>たまたま触る気があったのでまとめてみました。調べると意外と古い情報が記事が多くありました。 例えば、Storybookの5系から推奨されるCFSで書かれていなかったり、設定ファイルが7系で消えるconfig.jsやaddons.jsを利用しているなど。移り変わりが早いですね... なので、今回は2020/9/20時点で推奨される記法で書いたつもりです。 また良き情報があれば発信したいと思います。 以上です。最後まで読んで頂きありがとうございます。

【Next.js】Storybookを導入してみた

おはこんにちばんは。<a href="https://github.com/IshinoJun/nextjs-microcms-contact" target="_blank" rel="noopener noreferrer">Next.js + microCMSで問い合わせ機能</a>を実装してみました。 <h2 id="h8d027c8ed3">はじめに</h2><ul><li>実装方法について触れています。特にAPIキーを隠蔽せずに実装している記事が見受けられてたので、その辺は注意して触れていきます。</li><li>Next.js や microCMSとは？っといった概要には触れません。</li></ul> <h2 id="h38c8766536">microCMSの設定</h2>この辺は他のサイトで触れてるところがあったので雑に説明します。 <h3 id="h2c9414f5a4">コンテンツ（API）の追加</h3>API名とエンドポイントを入力し、コンテンツ（API）を追加します。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B1.png" alt=""> 続いて、POSTが使えるリスト形式を選択します。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B2.png" alt=""> 必要なAPIスキーマーを設定すれば終了です。 <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B3.png" alt=""> なお、以下も忘れずに実施ください。<ol><li>POSTリクエストを有効にする（API設定 &gt; HTTPメソッド設定）</li><li>APIリファレンスからX-WRITE-API-KEYを作成して控えておく</li></ol> <h2 id="h131d3691cd">Next.jsで問い合わせ機能を実装</h2>フォーム機能を実装していきます。 <h3 id="h2ce7c28a66">問い合わせ用の関数を作成</h3>Next.jsにはサーバーレス関数を起動できるAPI Routes機能があります。 その機能を利用し、サーバサイド経由でAPIキーを隠蔽してリクエストを送るようにします。 まず、環境変数を利用するために.env.localを作成し、先ほどメモしたX-WRITE-API-KEYを記載します。 NEXT_PUBLIC_を変数の前にを付けるとフロント側にも公開されてしまうので、APIキーなどでは付けない方が良さそうですね。<pre><code>WRITE_API_KEY="メモしたX-WRITE-API-KEY"</code></pre> 次に以下のような関数とクエリをチェックするタイプガード を用意します。 詳しくはリンクのコード見てもられば！ <a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/api/contact.ts" target="_blank" rel="noopener noreferrer">/</a><a style="color:#454545" href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/api/contact.ts" target="_blank" rel="noopener noreferrer">pages/api/</a><a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/api/contact.ts" target="_blank" rel="noopener noreferrer">contact.ts</a><pre><code> // クエリとAPIキーのチェック
 if (!isContact(req.body) || typeof WRITE_API_KEY === "undefined") {
 return res.status(404).end();
 }

 const content = await fetch(`https://xxxxxx.microcms.io/api/v1/contacts/`, {
 headers: { "X-WRITE-API-KEY": WRITE_API_KEY },
 body: JSON.stringify(req.body),
 })
 .then(() =&gt; "Created")
 .catch(() =&gt; null);

 // CMS側で正しく作成されたかチェック
 if (content !== "Created") {
 return res.status(401).json({ message: "Unauthorized" });
 }

 res.status(200).json({ message: "OK" });

 res.end("Contact enabled");
};</code></pre> <a href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/utils/TypeGuardUtils.ts" target="_blank" rel="noopener noreferrer">/utils/TypeGuardUtils.ts</a><pre><code>const isContact = (item: unknown): item is Contact =&gt; {
 const target = item as Contact;

 return (
 "name" in target &amp;&amp;
 typeof target.name === "string" &amp;&amp;
 !!target.name &amp;&amp;
 "email" in target &amp;&amp;
 typeof target.email === "string" &amp;&amp;
 !!target.email &amp;&amp;
 "body" in target &amp;&amp;
 typeof target.body === "string" &amp;&amp;
 !!target.body
 );
};

</code></pre> これで&nbsp; `/api/contact` でこの関数を起動できるようになりました。 処理としては、以下のチェックをし、問題無ければ200を返すようにしています。問題があればエラーを返します。<ol><li>クエリとして渡されるオブジェクトが期待通りのオブジェクトか</li><li>実際にmicroCMSのAPIを呼び出して正しく作成されたか</li></ol> microCMSのAPIの呼び出し処理はラッパーなりを用意した方が無難かもですね。keyの設定なりを毎回しなくてはいけないので。 <h3 id="h782dc6ea91">ページ側の作成</h3>今回はフォームバリデーションライブラリの <a href="https://github.com/react-hook-form/react-hook-form" target="_blank" rel="noopener noreferrer">react-hook-form</a>（<a href="https://github.com/jquense/yup" target="_blank" rel="noopener noreferrer">yup</a>）とUIライブラリの<a href="https://material-ui.com/" target="_blank" rel="noopener noreferrer">Material-UI</a>を利用しています。 上記ライブラリについて詳しくは触れませんが、react-hook-formは公式に記載通り以下の点で優秀だなっと思った最近この頃。 <ul><li>再レンダリングが最小に抑えられている</li><li>コードの記述量が少ない</li><li>外部 UI コンポーネントライブラリとの統合が容易</li></ul> ページとしては以下の３つを作成します。量が多いので必要なとこだけ説明します。 <a style="color:#454545" href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/contact/index.tsx" target="_blank" rel="noopener noreferrer">pages/conatct/index.tsx</a><pre><code> const onSubmit = async (contact: Contact): Promise&lt;void&gt; =&gt; {
 try {
 await fetch(baseUrl + "/api/contact", {
 method: "POST",
 headers: {
 "Content-Type": "application/json; charset=utf-8",
 },
 body: JSON.stringify(contact),
 }).then((res) =&gt; {
 if (!res.ok) {
 throw Error(`${res.status} ${res.statusText}`);
 }
 });

 void router.push("/contact/success");
 } catch (err) {
 void router.push("/contact/error");
 }
 };</code></pre> フロント側から上記のように叩くことで先ほど作成した問い合わせ用の関数を起動させています。 これでサーバサイド経由でAPIキーを隠蔽し、リクエストを送るよう出来ました。 「何故フロントからだとAPIキーが隠蔽されないのか」は<a href="https://microcms.io/blog/nuxt-secure-api-key/" target="_blank" rel="noopener noreferrer">このサイト</a>で詳しく解説されておりました。 <a style="color:#454545" href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/contact/success/index.tsx" target="_blank" rel="noopener noreferrer">pages/success/index.tsx</a> <a style="color:#454545" href="https://github.com/IshinoJun/nextjs-microcms-contact/blob/master/src/pages/contact/error/index.tsx" target="_blank" rel="noopener noreferrer">pages/error/index.tsx</a> 上記は、問い合わせの成功時と失敗時の画面です！ これで実装としては完了です。 実装後に作成したフォームで送信してみて、microCMSでその結果が表示出来ていれば完成です！！！ <img src="https://images.microcms-assets.io/protected/ap-northeast-1:136b87b4-3e31-4ee2-8359-d4d4f86f4885/service/jun-dev/media/%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B5.png" alt=""> 最後に通知が必要な方は、Webpack &gt; API設定でSlackやメール通知などが可能なので設定しておくと良いでしょう。 <h2 id="ha214098e44">まとめ</h2>Next.js と microCMS を問い合わせ機能しました。APIキー周りの管理は基本的に自己責任となるので注意が必要ですね。（てかブログ書くの大変）

TypeScript

【Next.js】Storybookを導入してみた

【Next.js】 microCMSで問い合わせ機能を実装してみた