React の useId っぽいことが実現できる Simple scope

この記事の概要

React では v18 から useId という hook が追加されています。

アクセシビリティのための id 生成や、同一ページ内の違う要素間での id 被りを気にしなくて良くなる機能です。

非常に便利なのですが、React の機能なので React でしか使えません。

しかし、Vite を使っていれば Vue でも Svelte でも関係なく解消できるのが Simple scope です。

使い方について、Astro を例にして説明した記事です。

使い方

まずはインストールします。

npm i vite-plugin-simple-scope

次にsrc/env.d.tsに型を追加します。

  /// <reference types="astro/client" />
+ /// <reference types="vite-plugin-simple-scope/types" />

その上で、astro.config.mjsでプラグインを適用します。

  import { defineConfig } from "astro/config";
+ import simpleScope from "vite-plugin-simple-scope";

  export default defineConfig({
+   vite: {
+     plugins: [simpleScope()],
+   },
  });

後は、各ページで使用するのみです。

some-page.astro

---
import { scope } from "simple:scope";
---

<form>
  <label for={scope("email")}>Email</label>
  <input id={scope("email")} name="email" />
</form>

これにより、ランダムな id が生成され、コンポーネント間の被りを気にしなくて良くなります。

補足

フレームワークごとで plugin 指定の方法が微妙に違いますが、それ以外で使い方に違いはありません。