JavaScript ライジングスター 2023

優勝: shadcn/ui 🏆

2023年、最もホットだったプロジェクトはshadcn/uiです。 これはTailwindを通してスタイルをカスタマイズすることができる、Reactで書かれたUIコンポーネントのコレクションです。

shadcn/uiは、アクセシビリティやキーボード操作などに対する一連のUIを提供するヘッドレスコンポーネントであるRadix上に構築されています。 shadcn/uiはNPMパッケージとしてダウンロードすることができないという点で、他の似たようなライブラリ(MUI・ChakraUI・React Spectrum等)と一線を画しています。 かわりにターミナルコマンドを実行することで、必要なコンポーネントだけを直接プロジェクトに組み込みます。 そしてコンポーネントをカスタマイズしたい場合は、自分のコードベースにあるコンポーネントのソースコードを直接編集します。

このプロジェクトが大成功した背景には、総合20位に入ったTailwind CSSの人気、React Server Componentsとの互換性、そして優れたドキュメントの存在があるでしょう。

現在、新進気鋭のReactプロジェクトはほとんどがshadcn/uiを採用しています。 またKent C. Doddsによって、Epic Stackにも選出されました。

他の例としてAIを挙げましょう。 v0.devはプロンプトから、shadcn/uiコンポーネントで構成されるJSXを生成します。素敵！

おっと大事なことを忘れていました。 Best of JSは先日SPAからNext.jsに書き換えを行ったのですが、その後shadcn/uiを使っています。

shadcn/uiのアプローチは、既にほかのプロジェクトに影響を与え始めています。

• shad-cn/svelteはSvelte移植版です。
• Draft UIはRadixのかわりにReact Ariaに構築された版です。

もっと詳しい分析については、The anatomy of shadcn/uiを参照するとよいでしょう。

準優勝: Bun

2022年の王者Bunは、今年もその勢いを保っています。

Bunは、JavaScriptおよびTypeScriptアプリケーションを実行、ビルド、テスト、デバッグするオールインワンツールキットになることを目指しています。

正式バージョン1.0が9月にリリースされ(グラフのピークを見てください)、Bunはついにプロダクションレベルになったと主張しました。

ドキュメントでは、Bunを今すぐ始めるのに役立つAPIおよびファイル操作、データベース操作などの優れたレシピが公開されています。

2023年末には非常に力強い声明を発表しました。

We have one goal for 2024 Flip the default backend JavaScript runtime from Node.js to Bun ( 2024年のゴールは、デフォルトのJavaScriptランタイムをNode.jsからBunにすることだ。 )

requireのような古き良きCommonJSを含むほとんどのNode.jsエコシステムとの互換性、そしてNext.js・Nuxt・Astroといった優れたフルスタックフレームワークの存在により、いずれはそれを実現してのけるかもしれません。

React

批判や論争がしばしば巻き起こるにも関わらず、Reactは2021年以降JavaScriptエコシステムのトップをひた走っています。 そして2023年もフロントエンドフレームワークのトップに立ちました。

Reactは10周年を記念したドキュメンタリーを公開しました。 Reactがいかにして評価を勝ち得てきたが語られています。

しかし、Reactに批判的でない人もいないわけではありません。 Reactは古臭い過去の遺物と見る向きもあり、Things you forgot (or never knew) because of Reactの記事ではその理由と代替ソリューションについて詳しく調査がなされています。 一方で支持者たちはReactの優れた適応力と再発明能力を高く評価しています。

争点のひとつは"signals"の欠如です。 これはSolidやPreactなどで採用されている状態管理メカニズムです。 いっぽうReactの愛好者たちは、Reactのデータフローの予測可能性を支持しています。

Percelの開発者であるDevon Govettは、signalsについて以下のようにツイートしています。

The simplicity of UI as a function of state is lost when updates flow unpredictably. (予期せぬ流れで更新が行われると、UIのシンプルさが失われます。)

signalsについてさらに知りたい場合は、signalsを歴史的にまとめたThe Evolution of Signalsを参照ください。

htmx

第二位となったhtmxは、HTMLにインタラクティブを導入するために異なるアプローチをとったライブラリです。 JavaScriptを記述するのではなく、HTMLに属性を記述することで、リアルタイムの対話性や動的な更新が可能になります。

ファイルサイズが小さいこと、また既存のサーバ側フレームワークとシームレスに結合できることが高く評価されています。 htmxはsend HTML over the wireと呼ばれるトレンドに従っており、クライアントはサーバから送られてきたJSONを処理するのではなく、HTMLをそのまま持ってくるという仕組みになっています。

同じような"属性ライブラリ"分野の有名どころとしては、Alpine.jsが13位に入っています。

Svelte

3位には、人気が高まり続けているSvelteが入りました。 ポストReactとしても名をよく上げられます。

「プロジェクト史上最も期待されているリリース」と自称しているSvelte 5では、リアクティビティに関する問題点を解消するrunesが導入されます。 Rich Harrisによるこの動画が、runesによって解決される事象について解説しています。

2023年に起きた焦点の幾つかはSvelteであり、たとえばHacker Newsなどが多くの議論を引き起こしました。 SvelteチームはTypeScriptを辞め、アノテーション付きJavaScriptを使うことを選択したのです。 タイプセーフの利点は保ちつつ、TypeScriptがもたらす複雑さや欠点を回避することを選びました。

その他注目プロジェクト

• Million v3は、ピュアJavaScript並の速度でReactコンポーネントを動かすことを可能にする軽量ライブラリです。

• Angular 17では、大幅なパフォーマンス向上、ドキュメントのリニューアル、ロゴの刷新などが行われました。

• Qwikはバージョン1に達しました。 最初はJavaScriptを含まないただのHTMLを高速に返しながらも、即座にインタラクティブな操作が可能になるフレームワークです

2023年、React Server Componentsの登場によってReactは第三世代に入りました。

ReactコアチームはVercelとコラボし、初めての安定版であるNext.js 13.4 App Routerをリリースしました。 Vercelは多くのリソースに貢献し、エキサイティングなイノベーションを主導しています。 しかし、Reactコアチームとの特権的な関係と、実験的機能への早期アクセスへの姿勢が時折批判を受けることもあります。 2023年には、Reactの新機能は一番最初にNext.jsのドキュメントに記載されることが普通になりました。

コミュニティはfetch()の独自拡張など一部の設計思想を評価しておらず、こちらは元に戻されました。 またApp Routerの安定性や開発サーバのパフォーマンスに関する批判意見なども頻繁に見受けられました。 いっぽうReact Server Componentsは、バンドルサイズの縮小や、コードを大幅にシンプルにできることなど、非常に多くの利点がアーリーアダプタによって高く評価されました。

Reactチームは、実験的機能の実装と展開戦略についての立場を表明しました。 カナリアバージョンは破壊的変更が入ることがありますが、その変更はドキュメント化されるため、フレームワークはカナリアバージョンを採用してもかまいません。 Reactはドキュメントも大きく整備されました。 useFormStateやuse serverといった最新のAPIも徹底してドキュメント化されています。

またServer Actionsが登場しました。 これはNext.js14で安定版となったReactの新たなコア機能で、フォームの変更と送信についてシームレスなRPCコールを可能にします。

Remixの哲学に倣い、Server Actionsはプログレッシブエンハンスメントを念頭に設計されています。

2024年にはエキサイティングなことに、多くのフレームワークがReact Server Componentsを取り入れる動きを示しています。

• RemixはReact Server Componentsをロードマップに追加しました。
• ExpoはクロスプラットフォームのReact Server Componentsをサポートする計画を発表しました。
• RedwoodはReact Server Componentsに全てを賭けています。
• WakuはReact Server Componentsをサポートするもっとも小規模なフレームワークです。
• Docusaurusはビルド時に静的なReact Server Componentsを出力する予定です。

みんなが、まもなく登場するであろうReact19を心待ちにしています。

Vue2がEOLになるとの発表を受け、2023年はVue3への大移動が行われました。

その過程において、移行を支援するための多くの努力が形になり、エコシステムが追い付き、発展は続きました。 要するに、素晴らしい結果が残ったということです。

Nuxt3のダウンロード数は既にNuxt2を追い越しました。 VuetifyやPrimeVueなどのUIフレームワークは、大規模な、もしくは大規模でないアプリケーションの構築を、これまで以上に楽にしてくれます。 VueUse、Pinia、そしてTresJSといった数多くのライブラリが、より良い開発者体験を提供するために成長と努力を続けています。

2022年に引き続き、開発者体験は最優先事項のひとつであり続けています。 Vue3.3では、<script setup>のTypeScriptサポートが強化されました。 Nuxtは8回のマイナーバージョンアップを行い、さらにNuxt DevToolsを公開しました。 アプリをより深く理解し、迅速な開発を助けるための分析力を提供します。

Evan Youが言ったとおり、2024年はVueにとってさらにエキサイティングな年になるでしょう。 まもなくVue 3.4がリリースされ、そして満を持してVapor modeが登場します。 さらなるパフォーマンス向上と、コミュニティの革新を目指して開発が続けられています。

今年もバックエンド/フルスタックカテゴリの勝者はNext.jsでした。

バージョン14ではサーバアクションの改善に主眼が置かれ、Partial Previewモードなどが導入されました。

さらにReact Server Componentsと一緒に使うことで、コードを大幅に簡素化する新しいパラダイムを手に入れることができます。 コンポーネントから直接データを非同期に取得し、データの更新もフォームをサーバアクションにバインドするだけです。

コンポーネントから直接SQLを発行するプレゼンテーションについては多くの言及がなされていますが、しかし多くの人が要点を見逃しているようにも見受けられます。 React Server Componentsはアプリケーション内のどこにでも置いておける自己完結型コンポーネントです。 この動画は、RSCが可能としたサーバコンポーネントとクライアントコンポーネントのシームレスな結合という新しいメンタルモデルの構築に非常に役立つものです。

2位のAstroは、評価をどんどん上げてきています。 本来はJavaScriptのない静的サイトを超高速に表示した後からインタラクティブ性を追加するというコンセプトでしたが、さらに動的ページ生成にも使用することができます。

.astroファイルのテンプレートのシンプルさ(JSXにとてもよく似ている)と、優れたDX(美麗なCLI)に感銘を受けることでしょう。

バージョン4では、開発に役立つツールバー、全自動i18nルーティング、UIをさらに改善するためのView Transition APIなどが実装されました。

ご存じBunはバンドラでもあるため、今回からビルドツールカテゴリに移動しました。

2位のViteは、今最も使われている多目的バンドラで、Astro・Nuxt・Remix・SolidStart・SvelteKitなどなど様々なメタフレームワークを支えています。 11月にリリースされたバージョン5はrollup4をベースとしており、さらにパフォーマンスが向上しています。

さらにEvan Youは、Rust製RollupであるRolldownに取り組んでいることを明らかにしました。 Viteはさらに進化することでしょう。

3位のBiomeは、2023年のトピックのひとつです。 これは、コンパイラでありLinterでありフォーマッターでありバンドラでありテスターでもあるという非常に野心的であったプロジェクトRomeの崩壊に起因しています。 Romeはプロジェクトを支えていた会社が倒産し、Rome自体も中断してしまいましたが、幸いなことにそのforkがBiomeとして生まれ変わりました。

そして11月には『Prettierのテストの95%以上に合格するRust製コードフォーマッタを作る』というコンテスト、Prettier Challengeで優勝しました。 Prettierはこの業界の標準であるため、2024年にはBiomeの採用が増えていくことが予想されます。

Rustといえば、ByteDanceチームからの新星OxcとRspackも現れました。 RspackはWebpackと互換しつつも比類なきパフォーマンスを発揮します。

それにしても、Rising Starsを始めて以来初めてWebpackがランキング外になりましたが、Webpackを採用しているプロジェクトの数を考えると実に不思議なことに感じられます。

2023年、モバイルはWebアプリとネイティブアプリの開発者経験の統合に向けて、大きな進歩を遂げました。 ランキング上位に入ったExpo (1位)、Tamagui (3位)、Nativewind (6位)などを見れば明らかで、これらはコードの再利用性を最大限に高め、Web開発者のアクセシビリティを高めるという同じ目的をもって開発されています。

Tamagui (3位)、Nativewind (6位)、そしてReact Native Paper (7位) など、より良いスタイリングを目指すトレンドが間違いなく存在します。 これは全体ランキングでshadcn-uiがトップに立ったのと同じ傾向です。 この傾向は2024年も止まらないでしょう。

2022年、Reactチームは推奨するボイラープレートをCreate React Appから、RemixやNext.jsのようなフレームワークに変更しました。 それから1年経って、React Nativeのエコシステムにも同様な変化が現れました。 Expo・Tamagui・Igniteのようなフレームワークがいずれも人気を伸ばしており、React Nativeの開発パラダイムが進化しつつあることを示しています。 私が思うに、2024年にもこの流れは続くことでしょう。

React Nativeの優位性は、トップ10プロジェクトのうち7つがReact Nativeに関連していることからも明らかです。 残りの3プロジェクトはWebViewに関連するものであり、Webサイトをそのままアプリとして展開したい需要も間違いなく存在することを示しています。 おそらく2024年は、この両者のアプローチがひとつに統合され始める年になるでしょう。

全体として、2023年はモバイル開発にとって素晴らしい年でした。 2024年のトレンドの予想ですが、React Nativeのスタイリングソリューション、React Server Componentsなどを用いたネイティブのレンダリングパターンへの関心が高まっていくことはこれまで同様で、さらにAIドリブンのプロジェクトのサポート、またvisionOS関連プロジェクトに興味深いものが幾つか出てきそうです。