明けましておめでとうございます。
エンジニアの松浦です。
今回はJavaScript Rising Stars2024をタネに2024年に流行したJavaScriptライブラリについて紹介したいと思います。
ちなみに去年も書いており2023年版はこちらです。
JavaScript Rising Starsとは
前回の記事でも書いているのですが、もちろんこの記事を読む人が必ずしもJavaScript Rising Starsのことを知っているわけではないと思うので簡単に解説します。
JavaScript Rising Starsとは、JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、毎年最もホットであったJavaScriptライブラリのランキングを発表しています。（2024年で第9回目）
選考基準としては１年間で増えたライブラリのスターの数です。
スターとは以下画像のように各ライブラリのGithubページにある星マークのことです。
累計数ではなく、１年間で増えた数のためJavaScript Rising Starsをチェックすると１年間のトレンドがわかるのが特徴です。
2023年の振り返り
2024年の結果を知る前に2023年の結果を振り返っていきましょう。
2023年のTOP5は以下でした。
みなさんどうでしょう？使ったことはありますか？
私は去年記事を書いてからshadcn/ui, Bun, Next.jsを触りましたので解説していきたいと思います。
shadcn/ui
shadcn/uiはReactのUIライブラリなのですが私はこれまでMUIを使用していたのですがこれから徐々にshadcn/uiを使おうかなと思うくらいいいライブラリでした。
このライブラリを使うメリットはshadcn/uiは従来のUIライブラリと違いインストールした時にnode_modulesに取り込まれるのではなく、ソースコードのcomponent/uiディレクトリ上に直接取り込まれます。
tailwindCSSを用いて容易にスタイルをカスタマイズができることや、shadcn/uiのソースコードを直接変更することができるので自由にカスタマイズできることから拡張性が他のライブラリと比べて高いなと感じました。
デメリットというか気になったところを上げるとすると、取り込まれたcomponent/uiの中身のコードを見るとわかるのですが一部のコンポーネントはradix-uiなど別のUIライブラリに依存しており、UIライブラリ（shadcn/ui）を使用しようと取り込んだら別のUIライブラリ(redix-ui)がそのコードの中で使われているという入れ子構造にはなっていてこれはshadcn/uiの設計思想的にはOKなのかな？とは思いました。
具体的にどんなコードが取り込まれるのか確認したい方は例えばButtonコンポーネントを取り込んだ場合にはこちらのページのInstallation/manualの欄の2番目に実際のコードが載っているので参照してみてください。
Bun
BunはNodeやDenoと同じようなJavaSctriptランタイムです。
以前の私の記事でBun Shellという機能を利用してJavaScriptの構文のままシェルスクリプトを書けることについて紹介したので気になる方は是非読んでいってください。
Next.js
Next.jsはもう言わずと知れたReactのフレームワークですね。
Reactはv18系からReact Server Components（以下RSC）という機能をリリースしましてこれまでのReactの設計思想とは大きく異なる転換期を迎えました。
RSCはサーバーサイド上でコンポーネントを生成しレンダーする仕組みですがv17系以前のReactはクライアントサイドで全て処理してしまおうという設計思想でした。
このRSCの考え方をいち早く取り入れ、実用的なレベルまで実装したのがNext.js 13のApp Routerです。従来のPages Routerと比較すると、以下のような大きな変更点があります：
- サーバーファーストのアプローチ
デフォルトで全てのコンポーネントがサーバーコンポーネントとして扱われるようになりました。これにより、データベースへの直接アクセスやAPIキーの安全な管理が容易になり、初期ロード時のパフォーマンスが大幅に向上しています。
- ストリーミングとサスペンス
ページ全体のローディングを待つ必要がなくなり、準備できたコンポーネントから順次表示できるようになりました。これにより、ユーザー体験が大きく改善されています。
- より直感的なデータフェッチング
fetch APIを直接コンポーネント内で使用でき、キャッシュやrevalidationの制御も簡単になりました。
Next.jsでの書き方：
|
1 2 3 4 5 6 |
// App Router (Next.js 13以降) でのデータフェッチング async function DataComponen() { const data = await fetch('https://api.example.com/data') .then(response => response.json()); return <div>{data.text}</div>; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// React v17以前での一般的なデータフェッチング function DataComponent() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { setData(data); setLoading(false); }) .catch(error => { setError(error); setLoading(false); }); }, []); if (loading) return <div>Loading...</div>; if (error) return <div>Error: {error.message}</div>; return <div>{data.text}</div>; } |
このように従来であればuseEffectでしかAPIを叩けなかったのがRSCではJavaScriptにある程度馴染みがある方がすんなり受け入れやすいコードになっています。他にもエラーハンドリングやローディングの表示も明示的に書かないといけなかったのですがNext.js AppRouterではエラー用、ローディング用のコンポーネントを作ったらReactのSuspenceの機能などをフル活用して決められた位置にコンポーネントファイルを置くことでそれも容易に実装ができます。
詳しくはこちらをご覧ください。
このようにReactはReact単体ではなくNext.jsを使用することを前提とした機能アップデートがどんどんと追加されており、Reactの公式もNext.jsを使用することを強く推奨しております。
Next.jsを使わないのはReactの真価を発揮できていないと言っても過言ではありません。
Next.jsは今後もReactのエコシステムをリードする存在として、さらなる進化を遂げていくことでしょう。特に、RSCを活用した新しいデザインパターンやベストプラクティスが確立されていくことが期待されます。
個人的にはNext.jsのチュートリアルはNext.jsを使ったかなり実践的な手法が学べる良いチュートリアルだなと感じました。
Reactのチュートリアルは簡単な三目並べをゲームを作るものであまりお勧めできないものだなと感じていたのですがNext.jsはかなりおすすめ度が高いです。
2024年総合部門
さて、去年の話はここまでに早速2024年の結果を見ていきたいと思います。
公式サイトはこちらhttps://risingstars.js.org/2024/en
※本記事ではRising Starsのコメントを和訳した内容が含まれています。
shadcn/ui
2024年最もスターを獲得したのはやはりshadcn/uiでした。
またもや2位と10k程差をつけておりかなり勢いがいいですね。
前の項目で紹介したので私からのコメントは以上にしてRising Stars公式からのコメントを以下に和訳します。
2023 年と同様に、shadcn-ui は今年最も注目されているプロジェクトです。堅牢な基盤 ( Radix Primitivesなどのヘッドレス コンポーネント ライブラリによって提供される) とカスタマイズの可能性の間で完璧なバランスが実現されています。
開発者がコンポーネントを提供するのではなく、コンポーネントのコードを所有できるようにするというアイデアは
import、本当にゲームチェンジャーでした。2024 年には多くの機能が追加されました:
- ライブラリRechartsを利用したチャート
- コードベースでカスタマイズできる CSS 変数のセットを生成するテーマ
- ブロック: 一般的なウェブアプリのニーズに対応するレイアウトのコレクション
- レスポンシブで拡張可能なサイドバーなどの新しいコンポーネント
新しい CLI はさらに強力で柔軟性があります。
shadcn addコンポーネント、テーマ、フック、ユーティリティ、依存関係などをインストールできるようになりました。- Next.js、Remix、Vite、Laravel など、複数のフレームワークをサポートしています。
- Tailwindの設定を上書きするのではなく更新することができます
- モノレポのサポート
成功のもう一つの理由は、shadcn/ui 上に構築されたコンポーネントを生成できるサービスv0との緊密な統合です。
また、コンポーネントはソース フォルダー内にあるため、簡単に拡張できる構成可能なコンポーネントを作成する方法を示す優れた学習リソースでもあります。
Excalidraw
去年もランクインしていたExcalidrawが2位でした。
Excalidrawは、独特の手描きスタイルでデジタルドローイングやビジュアライゼーションを作成するために設計されたオープンソースのオンラインツールです： テキストからダイアグラムへ、マーメイドからExcalidrawへ、ワイヤーフレームからコードへ。
AFFiNE
総合3位はAFFiNEでした。
Notionのような機能や、Miroのような機能もついた最強のオープンソースツールのようです。
公式サイトを訪れるとNotionやらMiroやらGoogle Workspaceが空から降ってきて様々なツールを切る変えるのにうんざりしませんか？と問うてきます。
かなり私はグッと心を惹かれました。
Bruno
今年の総合4位はBlunoでした
こちらは2023年に公開されたオープンソースのAPIクライアントのようです。
私は聞いたことがなかったのですがアンテナの高いみなさんはご存知だったでしょうか？
REST APIにもGraphQLにも対応しており、オフラインのみで使用するもののようです。
以下公式参照
当社はセキュリティとプライバシーを重視しています。Bruno はオフライン ツールであり、データはクラウドに同期されません。
Git 経由で共同作業する
または任意のバージョン管理システム
Bruno は、Postman、Insomnia、および類似のツールに代表される現状に革命を起こすことを目指した、高速で Git フレンドリーなオープンソース API クライアントです。
どうやらPostmanの対抗馬としてよりリーズナブルでセキュアな点を主張しているようです。
n8n
今年の総合5位はn8nでした。
こちらは技術者向けのワークフロー自動化プラットフォームのようです。
このn8nは必要な場面になったらJavaScriptやPythonなどのコードを書いたり必要のない時はGUI操作で簡単にワークフローを作れるよと言ったものになっていてかなりいい感じに見えます。
似たようなサービスで弊社も販売パートナーとなっているMakeが対抗馬でしょうか。
エンジニアチームがあるかどうかでどちらを使うか別れそうですね。
2024年フロントエンド部門
続いて部門別に見ていきます。
htmx
2024年フロントエンド部門の1位はhtmxでした。
htmxは去年もフロントエンド部門で2位をとっていましたが、今年は1位になりました。
htmxはJavaScriptを一行も記述せずにHTML属性の組み合わせのみを使用することでデータ取得などの機能を実装できます。
以下はhtmxの公式HPで記述されているhtmxのコードです。
|
1 2 3 4 5 |
<script src="https://unpkg.com/htmx.org@2.0.4"></script> <!-- have a button POST a click via AJAX --> <button hx-post="/clicked" hx-swap="outerHTML"> Click Me </button> |
ここで実装されているボタンを押下すると、/clicked に AJAX リクエストを発行し、ボタン全体を HTML レスポンスに置き換えます。
私は専らフレームワーカーなので全ての記述をHTML属性で記述することに現状はあまりモチベーションがないのですが人間は思想がコロコロ変わるものなので1年後2年後には考えが変わっているかもしれないなと思うくらいには設計思想に納得できます。
React
フロントエンド部門の2位はReactになりました。
Reactは遂にv19がリリースされ今後も進化が期待できそうです。
React v19で追加された要素の中でカスタム HTML 要素が注目されています。
Reactの公式声明としてReactの将来のバージョンにはカスタム要素に対するより包括的なサポートが含まれる予定ということが示唆されています。
React の将来のバージョンには、カスタム要素に対するより包括的なサポートが含まれる予定です。
React パッケージを最新の実験バージョンにアップグレードして試すことができます。
react@experimentalreact-dom@experimentalReact の実験バージョンにはバグが含まれている可能性があります。本番環境では使用しないでください。
Rising Starsのコメントではこのような動きがあったことを記載していました。
Solidの作成者であるRyan CarnatoはWeb コンポーネントが未来ではない理由 について書き、物議を醸しています。この投稿では、Lea Vera が興味深い回答を寄せており、「最も生産的だと思うツール」を使用すべきだと結論付けています。
Ryan Carnatoの投稿およびコメント欄の議論は読んでおくと今のフロントエンド技術の最先端ではどんなことが議論されているのか確認できるのでいいかもしれません。
Svelte
今年のフロントエンド部門3位はsvelteでした。
Svelteもバージョン 5でメジャー リリースされました。目立った変更点は、リアクティブ状態を宣言するための明示的なメカニズムである「ルーン」の導入です。Svelte がState of JS の結果で最も高い肯定的な評価を得ていることは特筆に値します。
State of JS 2024を見るとこのようになっています。
Positivityの項目で一番高い数値を出していますね。
ただ、Usageの項目はやはりReactが突出しているのが見て読み取れるかと思います。
2024年バックエンド/フルスタック部門
Next.js
Next.jsは4年連続で1位になりました。
上記で私からのコメントは記載してしまったのでRising Stars公式のコメントを記載しておきます。
Next.js は4 年連続で最も人気のあるフルスタック フレームワークの地位を維持しています。バージョン 15リリースでは React 19 がサポートされ、新しい Cache API を活用してパフォーマンスが向上し、ビルド ツールとして Turbopack が全面的に採用されたことで開発者エクスペリエンス (DX) が強化されています。
Hono
今年の2位はHonoでした。
Honoは炎から命名が来ているみたいですね。
2年前くらいから盛り上がっているのを感じてきていますがいつか触りたいなと思いつつ触れていないフレームワークです。
以下にRising Stars公式のコメントを記載しておきます。
このカテゴリーの新参者はウェブサーバーHonoで、2位を獲得しました。Express (15年の歴史があるにもかかわらず15位にランクイン) の現代的な代替品と見なすことができ、 Node.jsはもちろん、Deno、Bun、LambdaやCloudflare Workersなどのサーバーレス環境など、複数のJavaScriptランタイムで実行できます。フットプリントが驚くほど小さいのが目立ちます。作成者によるストーリーをお読みください。
Expressからの世代交代が言及されていますね。
Astro
今年の3位はAstroでした。
Astro はコンテンツの多いアプリケーションを構築するための多目的ソリューションになりました。バージョン 5リリースでは、新しいコンテンツ レイヤーが導入され、ファイル システムや外部 API など、あらゆるソースから型安全なデータ取得が可能になりました。
私はこのサイトを構築するために Astro を使用しましたが、DX (宇宙飛行士と呼ぶ CLI がとてもかわいい!) とそれが提供する優れた Web パフォーマンスに感銘を受けました。
最後に
ここまでご覧いただきありがとうございました。
私はJavaScript Rising Starsを題材にアウトプットをするということを3年やっていて大分JavaScriptのフレームワークに関する知識がついてきたなと感じてきています。
初回はギークフィードに入社したての時に自己紹介も兼ねたLTをやるということでいい題材がないかなと題材選びしていたのが最初で、去年今年はブログの題材にしています。
ここで紹介しているフレームワークの大半は自分で使ったことがあるというわけではありませんがそれぞれの設計思想やどういうことが得意なのかがわかるようになってきてアウトプットをすることの大切さを実感しています。
言うなれば本は読んだことがないけどそれぞれの本の関係性や主張を抑えている司書さんというところでしょうか。
他にも技術ブログをあげているのでそちらもよろしければ見ていってださい。
また、株式会社ギークフィードでは開発エンジニアなどの職種で一緒に働く仲間を募集しています。
弊社に興味を持っていただいたり、会社のことをカジュアルに聞いてみたいという場合でも、ご気軽にフォームからお問い合わせください。その場合はコメント欄に、カジュアルにお話したいです、と記載ください！
- 去年1年間で最も勢いのあったJavaScriptライブラリを見ていく【JavaScript Rising Stars 2024】 - 2025-01-09
- Next.jsでAmazon Connectの標準CCPを埋め込み動的データを取得する方法 - 2025-01-06
- Twilio Flex v2.x.x系でLINE連携を実装する方法 - 2024-12-23
- AWS Bedrockを活用したAI生成テキスト評価と再生成の実装技法 - 2024-06-17
- AWSから公開されたJavaScriptランタイム「LLRT」を使ったLambdaをAWS CDKで構築する方法 - 2024-02-19
【採用情報】一緒に働く仲間を募集しています
