node_modulesが500MBを超えたら、Nueという選択肢を思い出してほしい

はじめに

新しいプロジェクトを始めるたびに、npm installのあとのnode_modulesが数百MBに膨れ上がるのを見て、うんざりした経験はありませんか？ReactやVueのエコシステムは便利な反面、コンポーネントの中にロジック・構造・スタイルがすべて混ざり合い、気づけばビルド設定やツールチェーンの管理そのものが仕事になってしまうことがあります。

そんな「複雑さ疲れ」を感じている方に知ってほしいのが、今回紹介するNueです。Nueは「Fastest way to build modern websites（モダンなWebサイトを最速で構築する方法）」を掲げるフレームワークで、開発環境全体をわずか1MB程度に収めるという極端なまでのミニマリズムを追求しています。

この記事では、Nueの特徴からインストール、基本的な使い方までをコード例とあわせて解説します。

Nueとは

Nue（nuejs.org）は、React・Next.js・Vite・Astroといった既存のフロントエンドツールチェーンに代わる選択肢として開発されている、オープンソースのWebフレームワークです。GitHubリポジトリはnuejs/nueで公開されており、MITライセンスのもとで開発が続けられています。

最大の特徴は「HTML・CSS・JS」という3つの関心事を、コンポーネント内で混ぜ合わせずに明確に分離する設計思想です。JSXのようにマークアップとロジックを1つのファイルに詰め込むのではなく、構造はHTML、デザインはCSS、振る舞いはJavaScriptモジュールという役割分担を徹底します。これにより、Web標準の知識がそのまま活かせる、学習コストの低い開発体験を目指しています。

主な特徴

驚異的な軽量さ - エコシステム全体がグローバルインストールで約1MBに収まり、従来500MB超だったnode_modulesからの解放を実現します
関心の分離 - コンポーネントにロジックを埋め込まず、HTML・CSS・JSをそれぞれ独立したファイルとして管理できます
爆速な開発体験 - 起動時間は10ms程度とされ、変更を即座に反映するユニバーサルなホットリロードに対応しています
段階的な採用 - index.htmlまたはindex.mdを1つ用意するだけで動き始める「インスタントスタート」が可能で、複雑な初期設定が不要です

Nueは単一のパッケージではなく、Webフレームワーク本体のNuekit、UI組み立てを担うNuedom、URL中心の状態管理を行うNuestate、Markdownベースのコンテンツ制作用のNuemarkなど、役割ごとに分かれたツール群で構成されています。

インストール

Nueの動作にはJavaScriptランタイムのBun（1.2以上）が必要です。まだインストールしていない場合は、以下のコマンドで導入します。

curl -fsSL https://bun.sh/install | bash

Bunの準備ができたら、NuekitをグローバルインストールしてCLIを使えるようにします。

bun install --global nuekit

インストールが完了すると、nueコマンドが使えるようになります。

基本的な使い方

まずはnue createコマンドで新規プロジェクトを作成します。Nueにはminimal・blog・spa・fullという4種類のテンプレートが用意されており、目的に応じて選択できます。

# ブログテンプレートでプロジェクトを作成
nue create blog

cd blog

プロジェクトディレクトリに移動したら、開発サーバーを起動します。

nue dev

http://localhost:4000でローカルサーバーが立ち上がり、ファイルを保存すると即座にブラウザへ反映されます。

Nueのテンプレート構文はVueに近い書き味になっており、{ }で変数を式として埋め込みます。

<article>
  <h1>{ title }</h1>
  <p>{ published ? '公開中' : '下書き' }</p>

  <script>
    title = 'Nueへようこそ'
    published = true
  </script>
</article>

このように、コンポーネントの末尾に置く<script>ブロックの中でプロパティやメソッドを定義し、テンプレート側からはシンプルな式として参照する構成になっています。

実践的なユースケース

Webサイトによくあるニュースレター登録フォームを例に、ユーザー操作をハンドリングする実装を見てみましょう。:onsubmitディレクティブを使うと、フォームのデフォルト送信を止めて独自のロジックを実行できます。

<form :is="newsletter-form" :onsubmit="submit" autocomplete="on">
  <label>
    <span>お名前</span>
    <input type="text" name="name" placeholder="山田 太郎" required>
  </label>

  <label>
    <span>メールアドレス</span>
    <input type="email" name="email" placeholder="your@email.com" required>
  </label>

  <button>登録する</button>

  <script>
    async submit(e) {
      const data = Object.fromEntries(new FormData(e.target))

      await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      })

      location.href = '/thanks'
    }
  </script>
</form>