Hyper — Reactの代替を本気で目指す新たなマークアップ言語が登場！圧倒的にシンプル、Web標準を尊重

5月7日、Nue JSが「Hyper: Outperform React on every metric」と題した記事を公開した。この記事では、Hyperという新しいマークアップ言語が、Reactを凌駕する可能性があるという点について詳しく紹介されている。

以下に、その内容を紹介する。

Hyperの登場

Hyperは、ユーザーインターフェース（UI）を構築するためのシンプルなマークアップ言語であり、開発者（およびAIモデル）が驚くほどクリーンな構文で複雑なUIを生成できることを目的としている。このライブラリの主な目標は、フロントエンド開発をより楽しいものにすることである。

ReactとHyperの比較

ReactとHyperの違いを段階的に見ていく。

Phase 1: シンプルなコンポーネント

Reactでのコンポーネントは、Reactパターンやカスタムコンポーネントを使用して書かれるが、Hyperでは、標準的なHTMLで完結する。以下は、ReactとHyperでの基本的なテーブルコンポーネントの定義方法の比較である。

モダンReact: ShadCN コンポーネントとTypeScript。
古典的React: JSXと分離されたCSS。
Hyper: クリーンで標準準拠のHTML。テーブルはただの<table>である。

以下は、Hyperを使ったコードがどれほどコンパクトになるかを視覚的に示した画像だ。

現在一般的なReactのコードで書かれたテーブルコンポーネントのコード例は以下のようになる。

import React from "react";

import { User, UserTableProps } from "./UserTable.types.ts";

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

export const UserTable: React.FC<UserTableProps> = ({ users }) => {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Age</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {users.map((user, index) => (
          <TableRow key={index}>
            <TableCell>{user.name}</TableCell>
            <TableCell>{user.email}</TableCell>
            <TableCell>{user.age}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};

export default UserTable;

一方、Hyperを用いたコードは以下のようにとてもシンプルだ。

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Age</th>
  </tr>
  <tr :for="user of users">
    <td>${ user.name }</td>
    <td>${ user.email }</td>
    <td>${ user.age }</td>
  </tr>
</table>

実際のコード比較はこちらのページを参照のこと。

Phase 2: 複雑なコンポーネント

Reactでは、Tanstack TableやRadix UIを組み合わせて複雑なコンポーネントを作成するが、これは非常に多くのボイラープレートコードを必要とし、約170行に達することがある。一方、Hyperでは同様のコンポーネントが40行のコードで実現できる。

Reactの問題: 依存関係が多層で、JavaScriptのトランスパイルやコンパイルを必要とする。
Hyperの利点: 単一のコンパイルステップで、ブラウザ上で動作し、非常に軽量。

ユースケースが複雑になるほど、Hyperのシンプルさが際立つ。

実際のコードはこちらから参照できる。

Phase 3: 再利用可能なコンポーネント

Hyperでは、コンポーネントの再利用が非常に簡単であり、デザインシステムの切り替えも容易である。Reactでは、コンポーネントごとにデザインがハードコードされているため、他のプロジェクトで再利用することが困難である。しかし、HyperではCSSでタイポグラフィを一元管理することで、コンポーネントの再利用性が高まる。

Phase 4: スケーラビリティ

Hyperは、そのシンプルさがスケーラビリティに寄与する。実際、フルスケールのアプリケーションでも、Reactのボタン一つ分と同等のコード量で済み、ボイラープレートがほぼゼロである。これにより、パフォーマンスの向上と開発の効率化が実現される。

Hyperの特長

シンプルな構文: Reactに比べて、必要なコードの量と認知負荷が大幅に削減される。
デザインとロジックの分離: HyperはCSSでスタイルを管理し、コンポーネントコードは純粋なロジックと表示に専念できる。
軽量: Hyperのコードは非常に軽量で、ブラウザで直接動作し、コンパイルを最小限に抑える。
再利用可能なコンポーネント: Hyperではコンポーネントの再利用が容易で、プロジェクト間でのスタイルや設計変更もシンプルに行える。

Hyperの導入

Hyperを使用するには、まずBunをインストールし、その後Hyperライブラリをインストールする必要がある。以下はその手順である。

# Bunをインストール
curl -fsSL https://bun.sh/install | bash

# Hyperをインストール
bun install nue-hyper

Hyperは、Bunを使用してブラウザ標準のサポート、組み込みのJavaScriptバンドラー、最適化されたパフォーマンスを提供する。

まとめ

Hyperは、Reactに比べて圧倒的にシンプルで効率的な方法でユーザーインターフェースを構築できるライブラリであり、そのシンプルさはスケーラビリティにも寄与する。これにより、フロントエンド開発はより効率的で楽しいものになる。

詳細はHyper: Outperform React on every metricを参照していただきたい。