Frontend Weekly 2023-04-14

Q. 社用 eslint-config を導入したら、hasSuggestion を設定しろと言われた#

状況

社用 eslint-config は、eslint とそれのみを導入すれば良いように構成されており、ESLint v8 に依存していたため、社用 eslint-config の導入と同時に ESLint v8 へのアップグレードも行われていました。

出力されていたエラーは、ESLint v8 から変更を提案するルールにおいて hasSuggestion が必須になったため発生したものです。エラーを見ると、react-hooks/exhaustive-deps で発生していました。

https://eslint.org/docs/latest/use/migrate-to-8.0.0#-rules-require-metahassuggestions-to-provide-suggestions

ですが、社用 eslint-config が依存している eslint-plugin-react-hooks バージョンは最新であり、hasSuggestion が設定されていました。また社用 eslint-config では、CI で自己テストをしており、エラーは発生していませんでした。

原因

これは社用 eslint-config を導入したリポジトリに、古いバージョンの hasSuggestion が指定されていない eslint-plugin-react-hooks のバージョンが別途指定されていたために発生していました。

このようにパッケージを導入したり更新をしてエラーが出た場合、パッケージの依存関係を確認すると、すぐに原因を特定できるケースがあります。次のコマンドが便利です。

1
npm ls -a

このコマンドは、パッケージの依存関係に基づいた論理的依存ツリーを出力します。次のような出力が行われます。実際はもっと複雑なツリーが表示されると思います。

1
[email protected]
2
├── [email protected]
3
├── ...
4
├─┬ [email protected]
5
│ ├── ...
6
│ └── [email protected]
7
└── [email protected]

コマンドの引数に確認したいパッケージ名を指定すれば、絞り込んで表示できます。

1
npm ls -a eslint-plugin-react-hooks
2

3
[email protected]
4
├─┬ [email protected]
5
│ └── [email protected]
6
└── [email protected]

ネスティング CSS#

Chrome 112 では、CSS のネストがサポートされました。

次のような記述が出来ます。

1
.nesting {
2
  color: hotpink;
3

4
  > .is {
5
    color: rebeccapurple;
6

7
    > .awesome {
8
      color: deeppink;
9
    }
10
  }
11
}

これは次の記述と同等です。

1
.nesting {
2
  color: hotpink;
3
}
4

5
.nesting > .is {
6
  color: rebeccapurple;
7
}
8

9
.nesting > .is > .awesome {
10
  color: deeppink;
11
}

CSS のネストは、Edge 112 でもサポートされ、Safari 16.5 の Technology Preview にも含まれているため、Chrome や Safari のみサポートすれば良い環境では近い内に実務でも利用して良くなると思います。一方、それ以外の環境では Firefox をはじめ軒並みサポートされていないため、雑に利用できるようになるには、まだしばらくかかると思われます。

また、いくつかのフォーマッタは CSS のネストをまだサポート出来ていないため、利用には注意が必要です。

UI デザインの刷新#

UI が全体的に刷新され、より重要な情報にアクセスしやすくなりました。

特にドキュメントがタブで切り替えて表示する形式から、コンポーネントの表示される箇所でそのまま表示されるようになったため、以前よりドキュメントへのアクセスが簡単になりました。

First-class Framework integrations#

Storybook v7 ではいくつかのフレームワークを決め打ちして、ゼロコンフィグで利用できるような対応が行われています。

https://storybook.js.org/blog/framework-api/

現在は Vite、Next.js、SvelteKit で導入されており、今後 Remix や Nuxt も予定されています。

Next.js の場合、Webpack、Babel、Turbopack などのビルド設定のミラーリングによるゼロコンフィグだけでなく、next/image や next/router などのモックが挿入されるため、以前よりはるかに導入しやすくなっています。

Interaction testing - Group steps#

Storybook のインタラクションテストでは、今まで jest の describe や it のようにそのテストコードが何をするためのものなのか表す手段やテストをグループ化する存在しませんでした。

今後は、次のように step メソッド利用して、ヒューマンリーダブルなグループ化を行えます。

1
import type { Meta, StoryObj } from "@storybook/your-framework";
2
import { userEvent, within } from "@storybook/testing-library";
3
import { SignupForm } from "./SignupForm";
4
const meta: Meta<typeof SignupForm> = {
5
  title: "SignupForm",
6
  component: SignupForm,
7
};
8
export default meta;
9
type Story = StoryObj<typeof SignupForm>;
10

11
export const Submitted: Story = {
12
  play: async ({ args, canvasElement, step }) => {
13
    const canvas = within(canvasElement);
14
    await step("Enter email and password", async () => {
15
      await userEvent.type(canvas.getByTestId("email"), "[email protected]");
16
      await userEvent.type(canvas.getByTestId("password"), "supersecret");
17
    });
18
    await step("Submit form", async () => {
19
      await userEvent.click(canvas.getByRole("button"));
20
    });
21
  },
22
};

ファイルベース Metadata API#

Next.js v13.2 で追加されたコンフィグベースの Metadata API に加えて、ファイル規則によってメタデータをカスタマイズ出来るようになりました。この機能は、App Router でのみ利用できます。

次のように利用します。

1
app
2
├── favicon.(ico|jpg|png|svg)
3
├── sitemap.(xml|js|jsx)
4
├── robots.(txt|js|jsx)
5
├── manifest.(json|js|jsx)
6
├── layout.js
7
├── page.js
8
└── about
9
    ├── opengraph-image.(jpg|png|svg)
10
    ├── twitter-image.(jpg|png|svg)
11
    └── page.js

配置された favicon、sitemap、 robots、manifest、opengraph-image、twitter-image は自動で head に反映されます。

動的なファイル生成

JS や JSX をサポートしている sitemap や robots、manifest では動的な生成が可能です。

1
export default async function sitemap() {
2
  const res = await fetch("https://.../posts");
3
  const allPosts = await res.json();
4

5
  const posts = allPosts.map((post) => ({
6
    url: `https://acme.com/blog/${post.slug}`,
7
    lastModified: post.publishedAt,
8
  }));
9

10
  const routes = ["", "/about", "/blog"].map((route) => ({
11
    url: `https://acme.com${route}`,
12
    lastModified: new Date().toISOString(),
13
  }));
14

15
  return [...routes, ...posts];
16
}

動的な OGP 及び Twitter 画像生成#

ファイルベース Metadata API における opengraph-image や twitter-image も動的な生成が可能です。拡張を js や jsx にして次のようにします。

1
import { ImageResponse } from "next/server";
2

3
export const size = { width: 1200, height: 600 };
4
export const alt = "About Acme";
5
export const contentType = "image/png";
6

7
export default function og() {
8
  // 中身であるsatoriと同様の記述が出来ます。
9
  return new ImageResponse(
10
    (
11
      <div
12
        style={{
13
          fontSize: 128,
14
          background: "white",
15
          width: "100%",
16
          height: "100%",
17
          display: "flex",
18
          textAlign: "center",
19
          alignItems: "center",
20
          justifyContent: "center",
21
        }}
22
      >
23
        Hello world!
24
      </div>
25
    ),
26
    {
27
      width: 1200,
28
      height: 600,
29
    }
30
  );
31
}

App Router の静的エクスポート#

App Router を完全に静的なファイルとして出力できるようになりました。

1
**
2
 * @type {import('next').NextConfig}
3
 */
4
const nextConfig = {
5
  output: 'export',
6
};
7

8
module.exports = nextConfig;

静的エクスポートの場合、サーバーコンポーネントや動的な画像生成などは、ビルド中に実行されます。ただし、サーバーが必要な headers()や cookies()などは実行出来ません。

また、この変更により next export コマンドは不要になりました。

Interception Routes#

Interception routes は URL を変化させつつ、現在のレイアウトに新しいページを表示します。Interception routes では、相対パスの../を表す(..)や app からの相対パスを表す(…)を利用します。

次は Vercel が用意したサンプルアプリケーションの構成です。

1
app
2
├── @modal
3
│   └── (..)photos
4
│       └── [id]
5
│           └── page.tsx
6
├── page.tsx
7
├── layout.tsx
8
└── photos
9
    └── [id]
10
        └── page.tsx

ルートページには画像一覧があり、画像をクリックすると/app/@modal/(..)photos/[id]/page.tsx で定義された画像を子要素に持つモーダルが表示されますが、このとき URL は../photos/[id]になります。この状態でページをリロードすると、表示されるのは/app/photos/[id]/page.tsx の内容になります。

Parallel Routes#

Parallel routes は、同じレイアウトの中に複数のページを表示します。Interception Routes で紹介したサンプルアプリケーションでは、この機能によってルートページに画像一覧とモーダルを同時に表示しています。

Parallel routes は、Web components の slot をイメージすると良いと思います。ディレクトリ名の先頭@を付けて、名前付きのスロットとして定義して利用します。サンプルアプリケーションでは@modal がこれに相当します。

1
app
2
├── @modal
3
│   └── (..)photos
4
│       └── [id]
5
│           └── page.tsx
6
├── page.tsx
7
├── layout.tsx
8
└── photos
9
    └── [id]
10
        └── page.tsx

名前付きのスロットは同じ階層にある layout.js の props から利用します。サンプルアプリケーションでは app/layout.js が相当します。

1
export default function Layout(props) {
2
  return (
3
    <html>
4
      <body>
5
        <GithubCorner />
6
        {props.children}
7
        {props.modal}
8
      </body>
9
    </html>
10
  );
11
}