新興のJavaScriptフレームワークNueとは？公式サイトざっくりまとめ

Nueとは

Nueは、MITライセンスでGitHubでホストされているオープンソースプロジェクトで、ヘルシンキ出身のフロントエンド開発者であるTero Piirainen氏によって開発されました。彼はオープンソースプロジェクト、テクノロジー製品、スタートアップの構築に25年以上の経験を持ち、Riot.js、Flowplayer、jQuery Toolsの製作者として知られています。

公式サイトのファーストビューでは「Nueは強力なReact、Vue、Next.js、Vite、Astroの代替ツールです。あなたのウェブ開発のやり方を変えるかもしれません。」とチャレンジングな記載がされています。

現在、Nueは開発中であり、2024年3月までにすべてのツールを完成させることを目標としています。

Nueの特徴

公式サイトでは以下の3つが紹介されています。

1.開発者のエクスペリエンスの向上

コンテンツ、スタイル、レイアウト、ロジックがきちんと分離されたNueは、「ユニバーサルホットリロード」と呼ばれる強力な機能を提供します。保存ボタンをクリックすると、ドキュメントが新しい状態に変わります。コンテンツの編集、新しいアセットの追加、レイアウトの変更、サーバー側コンポーネントの変更、リアクティブコンポーネントの編集、デザインの変更など、すべての操作を行うと、その変更は即座にブラウザーに反映されます。この機能を使用することで、UX開発者、JavaScript開発者、コンテンツ作成者はより迅速に行動でき、大幅に優れた開発者エクスペリエンスを享受できます。

2.プロジェクトをより速く完了する

Nueは関心の分離を採用し、Webチームのすべてのメンバーにとってコードを読みやすく、理解しやすく、拡張しやすくします。これにより、チームメンバーは他のメンバーをブロックしたり、コードを壊したりすることなく単独で作業できるため、作業が大幅に速くなります。

3.ページの読み込み時間の短縮

Nueはインターネット上で技術的に達成できる最速のページレンダリングパフォーマンスを実現できます。その秘密は、TCPスロースタートアルゴリズムの14kbルールを尊重することです。初期ビューポートをレンダリングするためのすべてのコンテンツとスタイルを含むHTMLリクエストが14kb未満の場合、ページの読み込みが大幅に高速になります。

ディレクトリ構造

クローンすると以下のようなディレクトリ構造になっています。

記法について

Nue は HTML ベースのテンプレート構文を使用します。

<div @name="media-object" class="{ type }">
  <img src="{ img }">
  <aside>
    <h3>{ title }</h3>
    <p :if="desc">{ desc }</p>
    <slot/>
  </aside>
</div>

コンポーネントについて

Server components、Reactive components、Isomorphic componentsが提供され、一般的なフレームワークと同じように、他のコンポーネント内でネストしてツリー状の構造を形成することができ、コンポーネントをループしたり、条件付きでレンダリングしたりすることで制御フローを構築できます。

テンプレートの構文について

以下のような記述が可能です。

最も単純なテキスト表現

<span>Text: { text }</span>

HTML 式

<!-- Value is escaped: Hello, <b>World!</b> -->
<p>{ value }</p>
<!-- Value is rendered as HTML: Hello, <b>World!</b> -->
<p>{{ value }}</p>
<!-- Same as the above (Vue compatibility) -->
<p :html="value"/>

属性のレンダリング

<p :attr="data">
  <script>
    data = {
      title: 'My title',
      alt: 'My alt',
    }
  </script>
</p>

これは次のようにレンダリングされます。

<p title="My title" alt="My alt"></pa>

イベントハンドラーについて

以下のようにイベントハンドリングを行うことが可能です。

シンプルなインラインハンドラー

<button @click="count++">Increment</button>

メソッドハンドラー

<dialog>
  <button @click="close">Close</button>
  <script>
    close() {
      this.root.close()
      location.hash = ''
    }
  </script>
</dialog>

イベント引数

<div>
  <button @click="first">First</button>
  <button @click="second('Hello')">World</button>
  <button @click="third('Hello', $event, 'World')">Nue</button>
  <script>
    // prints "First"
    first($event) {
      console.info($event.target.textContent)
    }
    // prints "Hello World"
    second(hey, $event) {
      console.info(hey, $event.target.textContent)
    }
    // prints "Hello Nue World"
    third(hey, $event, who) {
      console.info(hey, $event.target.textContent, who)
    }
  </script>
</div>

スタイリングについて

スタイルはコンポーネントに書くことはできず、外部スタイルシートで記述します。

おわりに

最近のフロントエンドの構築方法への不満から開発しているフレームワークだけあって、ReactやVueに逆行するような仕様がいくつか見られますね。

より詳しく正確な情報が知りたい方はNueの公式サイトをご確認ください。また、開発メンバーも募集しているようなので、興味がある方は参加してみてはいかがでしょうか！