JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2023年に最もホットであったJavaScriptライブラリのランキングを発表しました。
選考基準は累計スター数ではなく、『2023年の一年間で増えたスターの数』です。
過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。
ちなみに総合ランキング1位は2016年～2019年にVue.jsが4連覇、2020年はDeno、2021年はzx、2022年はBunでした。
以下は2023年のランキング、2023 JavaScript Rising Starsの日本語訳です
JavaScript ライジングスター 2023
8回目のJavaScript ライジングスターにようこそ！
ここでは、2023年のJavaScriptエコシステムのトレンドを俯瞰することができます。
コピペで世界を獲ったUIコンポーネントを見守っていきましょう。
以下のグラフは、2023年の12か月で増加したGitHubのスターの数によるランキングです。
Webプラットフォームベストプロジェクトを集めたリストであるBest of JSからの分析となります。
プロジェクトをクリックすると、より詳細な情報を見ることができます。
総合ランキング
1位： shadcn/ui
2位： Bun
3位： Excalidraw
4位： tldraw
5位： Next.js
6位： Supabase
7位： React
8位： Tauri
9位： Drizzle ORM
10位： htmx
shadcn/ui 🏆
2023年、最もホットだったプロジェクトはshadcn/uiです。
これはTailwindを通してスタイルをカスタマイズすることができる、Reactで書かれたUIコンポーネントのコレクションです。
shadcn/uiは、アクセシビリティやキーボード操作などに対する一連のUIを提供するヘッドレスコンポーネントであるRadix UI Primitives上に構築されています。
かわりにターミナルコマンドを実行することで、必要なコンポーネントだけを直接プロジェクトに組み込みます。
そしてコンポーネントをカスタマイズしたい場合は、自分のコードベースにあるコンポーネントのソースコードを直接編集します。
このプロジェクトが大成功した背景には、総合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といった優れたフルスタックフレームワークの存在により、いずれはそれを実現してのけるかもしれません。
フロントエンドフレームワーク
1位： React
2位： htmx
3位： Svelte
4位： Million
5位： Vue.js
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は、以下のようにツイートしています。
The simplicity of UI as a function of state is lost when updates flow unpredictably.
予期せぬ流れで更新が行われると、UIのシンプルさが失われます。
signalsについてさらに知りたい場合は、signalsを歴史的にまとめたThe Evolution of Signals in JavaScriptを参照ください。
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を高速に返しながらも、即座にインタラクティブな操作が可能になるフレームワークです
Reactエコシステム
1位： shadcn/ui
2位： Excalidraw
3位： Next.js
4位： Zustand
5位： Refine
ゲストライター：Sébastien Lorber
SébastienはReactのアーリーアダプタであり、FacebookのオープンソースであるDocusaurusのメンテナです。
またReactとReact Nativeについてのニュースレター、This Week in Reactを毎週発行しています。
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を心待ちにしています。
Vueエコシステム
1位： Nuxt
2位： Slidev
3位： Vue Element Admin
4位： VueUser
5位： Element Plus
ゲストライター：Lucie Haberer
Nuxtのコアチームメンバーで、講演者で、OSSの渡り鳥で、そしてPrismicのデベロッパーエクスペリエンスエンジニア。
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が登場します。
さらなるパフォーマンス向上と、コミュニティの革新を目指して開発が続けられています。
バックエンド/フルスタック
1位： Next.js
2位： Astro
3位： tRPC
4位： create-t3-app
5位： Nest
今年もバックエンド/フルスタックカテゴリの勝者は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などが実装されました。
ビルドツール
1位： Bun
2位： Vite
3位： Biome
4位： Oxc
5位： Rspack
ご存じ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を採用しているプロジェクトの数を考えると実に不思議なことに感じられます。
モバイル
1位： Expo
2位： React Native
3位： Tamagui
4位： Quasar
5位： Capacitor
ゲストライター：Evan Bacon
Expoのリードエンジニア。
iOSとAndroidアプリ開発者であり、Config PluginsとExpo CLIのオーサー。
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関連プロジェクトに興味深いものが幾つか出てきそうです。
スタイリング / CSS in JS
1位： Tailwind CSS
2位： stylex
3位： UnoCSS
4位： Tamagui
5位： Panda
CSSライブラリ
1位： DaisyUI
2位： Bootstrap
3位： Pico.css
4位： Bulma
5位： Primer
テストツール
1位： Playwright
2位： Storybook
3位： Puppeteer
4位： Vitest
5位： Cypress
デスクトップ
1位： Tauri
2位： Wails
3位： Electron
4位： Nativefier
5位： Gluon
静的サイト
1位： Next.js
2位： Astro
3位： Docusaurus
4位： Nuxt
5位： Nextra
状態管理
1位： Zustand
2位： Jotai
3位： XState
4位： Pinia
5位： Nano stores
図形描画ライブラリ
1位： Mermaid
2位： Echarts
3位： chart.js
4位： D3
5位： Mafs
AI
1位： LangChain.js
2位： TypeChat
3位： Vercel AI SDK
4位： Transformer.js
5位： Tesseract.js
まとめ
2023年のドラマをいくつか振り返ってみよう。
・Svelteは型安全を維持しつつTypeScriptを投げ捨てた
・React論争(古すぎる、難しすぎる、PHPじゃん)
・Romeの崩壊とBiomeの台頭
・Angularが若返った
・Bunがバージョン1になった
・Astroが4.0になった
・Stylexがついにオープンソースになった
プロンプトや画像からUIを生成できるAIツールが現れ始めており、もしかしたら数年内にはAIフロントエンドエンジニアが現れるのではないかと期待しています。
しかし、このまとめを8回も書いていると、次のような疑問を抱かざるを得ません。
来年、AIはこのタスクを引き継いでくれるのだろうか？
今回のランキングは楽しめたでしょうか。
みんなにも共有してあげてください。
もしかしたら1年後には、2024年のライジングスターが帰ってくるかもしれませんよ！
感想
ということで2023年のランキングトップはshadcn/uiでした。
UIライブラリといえばMUIとかChakraUIとかがあるわけですが、shadcn/uiはそれらと思想が異なっており、導入はコードをコピペ、カスタマイズはコードを直接書き替えるという使い方なのが特徴です。
使ってみた人はみんな褒め称えているので、今後のUIの主流になるかもしれません。
ならないかもしれません。
Houkago Atelier Toiro ha iizo
