クライアントコンポーネント

hono/jsx はサーバー側だけでなくクライアント側にも対応しているため、ブラウザーで動作する対話的な UI を作成できます。これをクライアントコンポーネント、または hono/jsx/dom と呼びます。

高速で、とても小さいのが特徴です。hono/jsx/dom のカウンタープログラムは Brotli 圧縮後わずか 2.8KB ですが、React では 47.8KB になります。

このセクションでは、クライアントコンポーネント固有の機能を紹介します。

カウンターの例

以下はシンプルなカウンターの例です。React と同じコードで動作します。

tsx

import { useState } from 'hono/jsx'
import { render } from 'hono/jsx/dom'

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

function App() {
  return (
    <html>
      <body>
        <Counter />
      </body>
    </html>
  )
}

const root = document.getElementById('root')
render(<App />, root)

`render()`

render() を使うと、指定した HTML 要素内に JSX コンポーネントを挿入できます。

tsx

render(<Component />, container)

完全なサンプルコードはこちらで確認できます：カウンターの例。

React と互換性のある Hooks

hono/jsx/dom には、React と互換性がある、または部分的に互換性のある Hooks が用意されています。これらの API は React ドキュメントで学べます。

useState()
useEffect()
useRef()
useCallback()
use()
startTransition()
useTransition()
useDeferredValue()
useMemo()
useLayoutEffect()
useReducer()
useDebugValue()
createElement()
memo()
isValidElement()
useId()
createRef()
forwardRef()
useImperativeHandle()
useSyncExternalStore()
useInsertionEffect()
useFormStatus()
useActionState()
useOptimistic()

`startViewTransition()` ファミリー

startViewTransition() ファミリーには、View Transitions APIを簡単に扱うための独自の Hooks と関数が含まれます。以下の例で使い方を説明します。

1. とてもシンプルな例

startViewTransition() を使うと、document.startViewTransition によるトランジションを簡潔に記述できます。

tsx

import { useState, startViewTransition } from 'hono/jsx'
import { css, Style } from 'hono/css'

export default function App() {
  const [showLargeImage, setShowLargeImage] = useState(false)
  return (
    <>
      <Style />
      <button
        onClick={() =>
          startViewTransition(() =>
            setShowLargeImage((state) => !state)
          )
        }
      >
        Click!
      </button>
      <div>
        {!showLargeImage ? (
          <img src='https://hono.dev/images/logo.png' />
        ) : (
          <div
            class={css`
              background: url('https://hono.dev/images/logo-large.png');
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              width: 600px;
              height: 600px;
            `}
          ></div>
        )}
      </div>
    </>
  )
}

2. `viewTransition()` と `keyframes()` の併用

viewTransition() 関数で、一意の view-transition-name を取得できます。

keyframes() と組み合わせて使えます。::view-transition-old() は ::view-transition-old(${uniqueName)) に変換されます。

tsx

import { useState, startViewTransition } from 'hono/jsx'
import { viewTransition } from 'hono/jsx/dom/css'
import { css, keyframes, Style } from 'hono/css'

const rotate = keyframes`
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
`

export default function App() {
  const [showLargeImage, setShowLargeImage] = useState(false)
  const [transitionNameClass] = useState(() =>
    viewTransition(css`
      ::view-transition-old() {
        animation-name: ${rotate};
      }
      ::view-transition-new() {
        animation-name: ${rotate};
      }
    `)
  )
  return (
    <>
      <Style />
      <button
        onClick={() =>
          startViewTransition(() =>
            setShowLargeImage((state) => !state)
          )
        }
      >
        Click!
      </button>
      <div>
        {!showLargeImage ? (
          <img src='https://hono.dev/images/logo.png' />
        ) : (
          <div
            class={css`
              ${transitionNameClass}
              background: url('https://hono.dev/images/logo-large.png');
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              width: 600px;
              height: 600px;
            `}
          ></div>
        )}
      </div>
    </>
  )
}

3. `useViewTransition` の使用

アニメーション中だけスタイルを変更するには、useViewTransition() を使えます。この Hook は [boolean, (callback: () => void) => void] を返し、それぞれ isUpdating フラグと startViewTransition() 関数を表します。

この Hook を使うと、コンポーネントは次の 2 つのタイミングで評価されます。

startViewTransition() 呼び出しのコールバック内。
finish promise が完了したとき。

tsx

import { useState, useViewTransition } from 'hono/jsx'
import { viewTransition } from 'hono/jsx/dom/css'
import { css, keyframes, Style } from 'hono/css'

const rotate = keyframes`
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
`

export default function App() {
  const [isUpdating, startViewTransition] = useViewTransition()
  const [showLargeImage, setShowLargeImage] = useState(false)
  const [transitionNameClass] = useState(() =>
    viewTransition(css`
      ::view-transition-old() {
        animation-name: ${rotate};
      }
      ::view-transition-new() {
        animation-name: ${rotate};
      }
    `)
  )
  return (
    <>
      <Style />
      <button
        onClick={() =>
          startViewTransition(() =>
            setShowLargeImage((state) => !state)
          )
        }
      >
        Click!
      </button>
      <div>
        {!showLargeImage ? (
          <img src='https://hono.dev/images/logo.png' />
        ) : (
          <div
            class={css`
              ${transitionNameClass}
              background: url('https://hono.dev/images/logo-large.png');
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
              width: 600px;
              height: 600px;
              position: relative;
              ${isUpdating &&
              css`
                &:before {
                  content: 'Loading...';
                  position: absolute;
                  top: 50%;
                  left: 50%;
                }
              `}
            `}
          ></div>
        )}
      </div>
    </>
  )
}

`hono/jsx/dom` ランタイム

クライアントコンポーネント用の小さな JSX ランタイムがあります。これを使うと、hono/jsx よりもバンドルサイズを小さくできます。tsconfig.json に hono/jsx/dom を指定してください。Deno の場合は deno.json を変更します。

json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "hono/jsx/dom"
  }
}

また、vite.config.ts の esbuild の変換オプションで hono/jsx/dom を指定することもできます。

import { defineConfig } from 'vite'

export default defineConfig({
  esbuild: {
    jsxImportSource: 'hono/jsx/dom',
  },
})

クライアントコンポーネント ​

カウンターの例 ​

render() ​

React と互換性のある Hooks ​

startViewTransition() ファミリー ​

1. とてもシンプルな例 ​

2. viewTransition() と keyframes() の併用 ​

3. useViewTransition の使用 ​

hono/jsx/dom ランタイム ​