JavaScript ライジングスター 2022

優勝: Bun 🏆

今年の総合優勝は、Bunです！

パフォーマンスとDXにこだわった新しいJavaScriptランタイムであるBunは、2022年夏のベータ版リリース直後から人気沸騰しました。 一か月で20000以上のスターを獲得しましたが、Best of JSがプロジェクトのトラッキングを始めて以来、これほどの爆発は見たことがありません。

しかしいったい、何がBunをこれほど特別に押し上げたのでしょうか？ Bunは、2年前の総合優勝であるDenoと同じくTypeScriptをナチュラルにサポートしています。

さらにBunはただのランタイムではなく、以下のような機能も持っています。

• パッケージマネージャ(Yarn、npm、pnpmのような)
• ビルドツール(Webpack、ESBuild、Parcelのような)
• テストランナー
• その他諸々

Bunはpackage.jsonから依存関係をインストールすることができます。 Bunはスクリプトを実行することができます。 そして、他のランタイムよりも高速に、それらを行うことができます。

Bunは、JavaScriptエコシステムにおいて、パフォーマンスに焦点を合わせた新たな試みです。

Fetchなどの標準的Web API、およびNode.js APIの多くをサポートしており、またほとんどのnpmパッケージとも互換しています。 まだプロダクションレベルにまでは達していないかもしれません(特にWindowsのサポートがない)が、非常に将来有望なツールです。 Denoに比べると歴史は浅いですが、早々とフレームワークElysiaが登場しており、最速のHTTPフレームワークであると主張しています。

Bunの最も驚くべきところは、作者のJarred Sumnerが、全ての機能をZigという低水準言語でゼロから実装したというところです。

これ以上詳しく知りたければ、A Complete Overhaul of the JavaScript Ecosystemを読むとよいでしょう。

Tauri

2021年は5位だったTauriは、2022年には新たに3万人の星をみるひとを獲得し、人気を広げつつあります。 これはRust製のデスクトップアプリケーション作成ツールであり、Web技術を使って製作できることが特徴です。

2022年6月にはついにバージョン1.0に到達しました。

セキュリティとパフォーマンスに重点を置いて作られています。 競合のElectronと比べると、使用するAPIや機能などを開発者が指定する必要があるかわりに、フットプリントが小さくて済みます。

React and Next.js

3位のReactと4位のNext.jsは同じくらいの数値であり、共に2万人を獲得しました。

2022年10月にリリースされたNext.js 13.0においては、React 17で導入されたReact Server Componentsがフル活用されています。

ReactのメンテナのひとりAndrew Clarkは、Server Componentsの将来についてこちらで大胆に語っています。

Server ComponentsはReactの未来であり、我々の目標はこのアーキテクチャをReact全体に広げることである。

Vite

5位のViteは、最もトレンドなアプリケーションビルドツールであり、素晴らしい開発者体験を提供します。 2022年は6月のv3、12月のv4と2回のメジャーアップデートが行われました。

SvelteKitやQwikといったフレームワーク、はたまたテストツールVitestなど多くのプロジェクトと力を合わせています。

2022年はReactが頂点に立ちました。 なお、Vue.jsはv2とv3のリポジトリに分かれているため、合算すれば近いくらいの力関係となります。

目新しいところとしては、Qwikが2位に上昇しました。 QwikはReactに比較的似ており、テンプレートをJSXで書きますが、主な違いは、ブラウザに送られるJavaScriptの量を最小限にすることにフォーカスしているところです。

これは"ゼロベースJavaScript"と呼ばれるトレンドのひとつです。 最近のWebサイトやWebアプリケーションは、ブラウザのパフォーマンスに影響を与えるほどJavaScriptの重さが肥大化することがよくあります。 たとえサーバサイドレンダリングを使ったとしても、JavaScriptをロードし、解析し、実行するまでユーザは待たされます。

SSRでレンダリングされたページにインタラクティブ性を与える方法として、Qwikはhydrationではなく、Resumabilityという技術を用いています。 状態をHTML内にシリアライズすることで、極めて高速な初動を実現します。

このプロジェクトはAngularJSの開発者であるMiško Heveryによって進められています。 AngularJSのスローガンが『HTMLをWebアプリのために強化する』であるのに対して、Qwikは『HTMLファーストのフレームワーク』であり、即ち古き良きHTMLの上にアプリを構築するという意図を持っています。

2022年は、Reactのこだわりがより強くなった年でした。

Reactは今でもどんなWebページにでも適用できるライブラリです。 しかしReactはさらに、インタラクティブで応用性がありパフォーマンスの高いフロントエンドを実現するためのアーキテクチャに進化しています。

3月にリリースされたReact18では、フレームワークのアーキテクチャを刷新する機能とAPIが同時に提供されました。 React Server Componentsも、新しいアーキテクチャパターンと連動するように設計されています。

use clientなど幾つかの規約がフレームワーク間で標準化されつつあり、またasync/awaitなどその他についてもベータ版などを通じてブラッシュアップが図られています。

2023年は、React個々の新機能によるイノベーションだけではなく、より広くReactエコシステムそのものにも大きなイノベーションが起こることでしょう。 UIコンポーネントだけではなく、型安全性を向上させるライブラリも成長し続けます。

2022年はVueのメジャーアップデートが多数ありました。 Vue2.7ではComposition APIがネイティブサポートされ、<script setup>構文がVue2にバックポートされました。

これによって、Vue3への移行がよりスムーズになります。 <script setup>はStableとなり、さらにDXを強化するためのReactivity TransformがExperimentalとして利用可能です。 Vueチームはまた、Solid.jsに触発された新しいレンダリング戦略、"Vapor mode"に取り込んでいます。 これによってVueはさらに高いパフォーマンスを発揮できるようになるはずです。

Vueのエコシステムが十分に成熟しつつあることは、Nuxt 3とVuetify 3のStableがリリースされたことからもわかるでしょう。 Viteはこの一年で倍に成長し、そしてcreate-vue、Nuxt、Quasar、Astroといった数々の新しいフレームワークが多くのユーザに採用されつつあります。

Viteのおかげで、VueユーザはVitestやHistoireといった良い開発体験を得ることができました。 さらにvue-termuiのような、独創的すぎるVueの使い方も現れています。

今年はDXにとって、なんとも素晴らしい年です。 これらのツールでワークフローをこれまで以上に向上できることを願っています。 そして、次に何が来るかを楽しみにしています。

フロントエンドがこれまでより多くのことをサーバ上で行うようになってきているため、フロントエンドとバックエンドのフレームワークの境界は徐々に曖昧になってきています。 そこでこのセクションでは、フルスタックフレームワーク、メタフレームワーク、バックエンドフレームワークについて紹介します。

Next.js

前回と同じく、Next.jsがこのセクションの覇者になりました。 バージョン13では、React Server Componentsや、appディレクトリという新しい機能が追加されました。 開発者は各機能を使うことにより、ネストされたルートを強力に処理することができるようになります。

tRPC and the create-t3-app

このセクション最大の変化は、tRPCが2位に上がってきたことです。 REST VS GraphQLのことはいったん忘れてください。 tRPCを後押しするJSON RPC 2.0プロトコルも存在します。 サーバで定義された型をクライアントでインポートすることで、E2Eの型安全性を実現する機能が非常に秀逸です。

4位のcreate-t3-appを、tRPC・Next.js・Tailwind CSSと組み合わせたスタックは人気のあるボイラープレートになっています。

Astro

3位のAstroは2021年に現れた静的サイトジェネレータであり、パーシャルハイドレーションという概念を世に知らしめました。

Astroチームは快適な開発者体験を実現することに注力しており、Astro 1.0のリリースにおいてもそのことが強調されています。

新しいSSRのサポートと、ReactやSCSSといった多くのフロントエンドツールを巻き込んだ統合により、Webアプリ開発が極めて容易に感じられることでしょう。

Remix

5位のRemixは急成長を続けています。 2021年にオープンソース化されたのち、わずか1年でShopifyに買収されました。

Kent C. Doddsによるブログ記事、The Web Next Transitionにおいて、Remixが画期的である理由が明快に示されています。

静的生成だけに頼るのではなく、分散コンピューティングやネイティブブラウザの機能も活用することで、優れたパフォーマンスと素晴らしい開発者体験の両方を提供します。

2022年もViteが勢いを保ち続け、最もポピュラーなフロントエンドツールのひとつになりました。 その前身であったSnowpackは既にメンテナンスされておらず、公式にもViteの使用が推奨されています。 Viteの採用はVueエコシステムに留まるわけではありません。 SvelteKitやStorybook、Vitestをはじめ、Create-React-Appの代替にすら使われます。

モノレポのためのビルドツールとして、NxやTurborepoが台頭しつつあります。 Nxの開発元であるNwrlはLernaの運営を引き継ぎ、Nxに最適化されたLerna 6をリリースしました。

Babelは依然として人気を保っていますが、swcやesbuildといったツールが多くの新しいプロジェクトやメタフレームワークに採用されつつあります。 これら新しいツールは、ビルドとトランスパイルの性能を大きく向上させることができます。 またswcはプラグインシステムを提供しているため、よりモジュール化を進められます。

Vercelは、新しいバンドルツール、Turbopackを発表しました。 これはWebpackの作者であるTobias Koppersが取り組んでいる、Rust製の非常に高速なバンドルツールです。

Romeは初めての安定版をリリースしました。 興味深いリンターとフォーマッターを持っており、今のところ採用は控えめですが今後増えていくことが期待されます。

2023年は、Rust製のフロントエンドツールがたくさんニュースになることでしょう。

• Lightning CSS：旧Parcel CSS。高速なCSSツールチェイン。
• Speedy TypeScript type checker：tscのより高速な代替。
• mdxjs-rs：MDXのより高速な実装。

2022年は、ネイティブアプリをJavaScriptで構築する世界が大きな進展を見せました。 Replitモバイルアプリの登場や、ShopifyアプリをReact Nativeにするといった成功に代表されます。 実際React Nativeに関連するリポジトリがモバイルカテゴリのトップ10のうち7個を占めており、そしてReact Nativeは7年連続でモバイルカテゴリの1位に輝き続けています。

またReact Nativeの成功に加え、人気のあるWebパターンをモバイルに持ち込む傾向もみられました。 Tailwind CSSをモバイルアプリに広げるNativeWind、レンダリングのSkiaなどです。

Expoがファイルシステムベースのルーティングという、古典的なWeb機能を採用したことからも、ネイティブアプリの開発がウェブ開発のますます身近になりつつあることを示しています。

モバイルアプリの将来を予測することは困難ですが、この1年のことを考えると、2023年はウェブアプリとモバイルアプリの垣根がますます低くなっていくことでしょう。