1月8日、BestOfJSが「2024 JavaScript Rising Stars」と題した記事を公開した。この記事では、2024年に注目を集めたJavaScriptエコシステムの主要プロジェクトやフレームワーク、それぞれの新機能や動向について詳しく紹介されている。

この記事に含まれる様々なライブラリ・フレームワークのランキングは、 2024年の1年間で各プロジェクトが獲得したGitHubスター数を元に評価し算出された もの。
元記事では、獲得したGitHubスターをグラフ形式で見ることができたり、年度を切り替えて参照できるなど、インタラクティブなサイトに仕上がっているので、ぜひ参照してみていただきたい。

総合的に最も人気のあるプロジェクト

サマリー
UIコンポーネントからワークフロー自動化まで、多彩な分野のプロジェクトが急成長を遂げており、しばしばAIとの連携が進んでいるのが特徴。2024年は、軽量かつカスタマイズ性の高いUIライブラリや、ノーコード/ローコードでのワークフロー構築が特に注目を集めている。

一位のshadcn-ui は今年最も注目されているプロジェクト。
開発者がコンポーネントを提供するのではなく、自身のコンポーネントライブラリを開発できるようにするというアイデアが、開発者の間から熱く支持されている。

1. shadcn/ui

   • アクセスしやすく、カスタマイズ可能なオープンソースのUIコンポーネント集
   • shadcn addコマンドによる多彩なコンポーネントの導入
   • 公式サイトにてチャートやテーマ、ブロックなどの追加情報を提供

2. Excalidraw

   • 手描き風の図表を作成できる仮想ホワイトボード
   • AI機能との連携によりワイヤーフレームからのコード生成などが可能
   • GitHubリポジトリ

3. AFFiNE

   • NotionやMiroの要素を取り入れた次世代ナレッジベース
   • オフラインファースト設計で、個人の知識管理にも向く
   • 公式サイト

4. Bruno

   • API探索・テスト用のオープンソースIDE
   • PostmanやInsomniaの軽量代替として人気
   • 公式ドキュメントも公開中

5. n8n

   • ビジュアルワークフローの自動化を実現するプラットフォーム
   • ネイティブAI機能を搭載し、コード不要で高度な連携が可能
   • GitHubリポジトリ

React エコシステム

サマリー
React本体は依然としてコミュニティが大きく、エコシステム全体で新しいツールやライブラリが次々と登場。特にサーバーサイドレンダリングやパフォーマンス向上をめざすフレームワークが盛り上がっている。

• React

  • 公式サイト、GitHubリポジトリ

• Next.js (The React Framework)

  • React 19への対応やTurbopackなど、開発体験を大きく改善
  • GitHubリポジトリ

• Refine

  • 管理画面や内部ツール向けのReactフレームワーク
  • GitHubリポジトリ

• react-scan

  • Reactパフォーマンスのボトルネックを自動検出
  • UIの遅延箇所を可視化し、最適化を支援

Vue エコシステム

サマリー
Vue 3の普及に伴い、NuxtやSlidevといったメタフレームワーク・周辺ツールが進化を続けている。shadcn-vueのようにReact向けプロジェクトを移植して活用する動きも活発化している。

• Nuxt

  • Vueのメタフレームワークとして定番
  • GitHubリポジトリ

• Slidev

  • 開発者向けのプレゼンテーションツール
  • GitHubリポジトリ

• shadcn-vue

  • shadcn/uiをVue向けに移植したコンポーネント集
  • 公式サイトにてセットアップ方法などを公開

バックエンド / フルスタックフレームワーク

サマリー
Next.jsが4年連続でトップを維持しつつ、軽量で高性能なWebフレームワークにも注目が集まる。サーバレスや複数ランタイム対応のフレームワークが特に人気。

• Next.js

  • Reactとの親和性が高く、フルスタック開発に利用される
  • GitHubリポジトリ

• Hono

  • Node.js・Deno・Bunなど多環境で動作するモダンなWebフレームワーク
  • GitHubリポジトリ

• Astro

  • コンテンツ重視のサイト構築を得意とするビルドツール
  • GitHubリポジトリ

ツール

サマリー
パフォーマンスと開発者体験（DX）の向上を目指すツールが続々と登場。ESLintやWebpackなどの既存エコシステムを置き換えるような高速・高機能ツールが増えている。

• Biome

  • PrettierやESLintに代わる高速な統合ツールチェーン
  • GitHubリポジトリ

• Bun

  • JavaScriptランタイム・バンドラ・テストランナー・パッケージマネージャを統合
  • GitHubリポジトリ

• Rspack

  • webpack互換の高速バンドラ
  • GitHubリポジトリ

モバイル開発

サマリー
React NativeやExpoがモバイル開発の定番として根強い人気を誇る一方、Webとネイティブを両立するユニバーサルな手法が注目を浴びている。AI活用やノーコードとの連携も広がりを見せている。

• Expo

  • マルチプラットフォーム対応のReact Nativeフレームワーク
  • GitHubリポジトリ

• React Native

  • Reactでネイティブアプリを構築
  • GitHubリポジトリ

状態管理ライブラリ

サマリー
シンプルかつ柔軟な設計のZustandやJotaiが人気を集める一方、XStateのように状態機械に基づく厳密な制御を好む開発者も増えている。アプリの規模や要件に応じて選択肢が広がっている。

• Zustand

  • Bear necessities（必須最小限）を掲げるシンプルな状態管理

• Jotai

  • アトムをベースにした柔軟な状態管理ライブラリ

• XState

  • 状態機械を用いた複雑なアプリケーションロジックの管理に強み
  • GitHubリポジトリ

AI

サマリー
AIやLLM（Large Language Model）関連プロジェクトが大きく飛躍。ノーコード/ローコードツールとの連携や、ブラウザ上でモデルを動かす動きなど、多彩なアプローチが模索されている。

• n8n

  • AIとの統合が進み、ノーコードで高度なワークフロー自動化
  • GitHubリポジトリ

• Flowise

  • LangChainベースのビジュアルエディタでLLMワークフローを構築
  • GitHubリポジトリ

• bolt.new

  • プロンプトでフルスタックアプリを構築し、Supabaseに自動デプロイ
  • GitHubリポジトリ

• Transformers.js

  • ブラウザ上でNLPモデルを実行可能
  • GitHubリポジトリ

• Vercel AI SDK

  • AIエージェントの統合を簡潔にし、ストリーミング対応
  • GitHubリポジトリ

スタイリング / CSS in JS

サマリー
Tailwind CSSを中心に、ユーティリティファーストのアプローチが主流化。一方でDaisyUIのようにコンポーネントクラスを付与するライブラリや、React Native + Webを一括管理するTamaguiなど、選択肢が多彩になっている。

• Tailwind CSS

  • ユーティリティファーストのCSSフレームワーク
  • GitHubリポジトリ

• DaisyUI

  • Tailwindにコンポーネントクラスを追加
  • GitHubリポジトリ

• Tamagui

  • React Native + WebのユニバーサルUIキット
  • GitHubリポジトリ

コンポーネントライブラリ

サマリー
フレームワーク専用の最適化や、コピーペーストで導入可能な設計など、コンポーネントライブラリは多様化の一途をたどる。shadcn/uiはReactで大きな成功を収め、Vue移植版などへの波及も確認されている。

• shadcn/ui

  • コピーペーストで導入可能なUIコンポーネント群
  • GitHubリポジトリ

• PrimeVue

  • Vue向けの次世代UIコンポーネントライブラリ
  • GitHubリポジトリ

• NextUI

  • モダンで美しいReact向けUIライブラリ
  • GitHubリポジトリ

• Mantine

  • 豊富なReactコンポーネントを揃えたライブラリ
  • GitHubリポジトリ

• Material UI

  • GoogleのマテリアルデザインをベースにしたReact向けUIフレームワーク
  • GitHubリポジトリ

詳細は2024 JavaScript Rising Starsを参照していただきたい。