JavaScript ライジングスター 2021

トップ3

2021年、最もトレンディだったプロジェクトは、Googleによる全く新しいツールです。 JavaScriptやTypeScriptでシンプルなコマンドラインスクリプトを書くことができるzxです。

基本的な使い方としては、コードにbashコマンド(ls・cat・gitなど…なんでも！)を埋め込むことができ、さらにそれをテンプレートリテラルでawaitすることもできます。

また、有名なパッケージも幾つか含まれています。

• node-fetch ブラウザのfetch APIと同じことができる。
• fs-extra ファイルシステムの操作ができる。
• globby ユーザフレンドリーなパターンマッチングができるglob。

2位はViteです。 これはesbuildコンパイラを使用し、優れたパフォーマンスを示すビルドツールです。 当初はVue.js専用として誕生しましたが、現在ではReact・Svelte・Litなど主なフレームワークと連携が可能です。

3位のNext.jsは、Reactをリードするメタフレームワークとしての地位を盤石なものにしています。

Tauri

5位に入ったTauriは、Web技術を用いてデスクトップアプリケーションを構築するソリューションです。

Electronと比べると、Rustで書かれており、実行環境にNode.jsが必要ないのが特徴です。 5月にバージョン1.0のベータ版がリリースされました。

ピックアップ

トップ10には入っていませんが、Astroは今年よく注目されたプロジェクトのひとつです。 より少ないJavaScriptで、より高速なローディングを実現するツールです。

コンセプトはSSGに近いですが、Astroでは"islands"と呼ばれる動的な部分をページに含めることができるところが特徴です。 また、クライアントサイドで動的コンポーネントをレンダリングする際に、複数の戦略を取ることができます。

• ページが読み込まれたとき
• アイドル状態のときに、優先順位の低いコンポーネントを読み込む
• Intersection Observer APIを使用した監視

そしてAstro最大の特徴は、React・Vue.js・Svelteなど、あらゆるフレームワークとの組み合わせが可能ということです。

JavaScript Rising Stars が始まって以来初めて、ReactがVueを退け、フレームワークの頂点に立ちました。 とはいえ、Vueはバージョン2(Vue.js)とバージョン3(vue-next)の2リポジトリに分かれているため、実質的にはVueが1位といってもいいでしょう。

大きな変化としては、SvelteがAngularを下して台頭してきたことです。 Viteなどを始め、ターゲットフレームワークにSvelteを含めるツールやコンポーネントも増加しています。

大きな話題のひとつとして、Svelteの開発者であるRich Harris氏が、Next.jsを提供しているVercelに入社したことが挙げられるでしょう。 Svelteも、Next.jsのようなアプリ構築のためのメタフレームワーク、SvelteKitを持っています。

5位に入ったSolidは、Reactに替わる選択肢として興味深いものです。 コンポーネントはReactのようにJSXで記載しますが、しかしVirtual DOMには依存しません。

Solidはmitosisにも影響を与えました。 Mitosisは、コンポーネントをあらゆるフレームワーク向けにコンパイル可能にしようという野心的なプロジェクトです。

主なUIフレームワークは、モダンでスケーラブルなアプリケーションをビルドするための独自メタフレームワークを持っています。 これらはルーティング、サーバサイドレンダリング、SSG、最適化ビルドなどの機能を提供しています。

• Reactにはこの分野のパイオニアと言えるNext.jsがあり、そしてカテゴリの勝者である。
• VueにはNuxtがあるが、バージョン2用とバージョン3用で別物となっている。
• Svelteには SvelteKitがある。

2021年に登場した新参であるRemixは、Reactアプリを構築するフルスタックフレームワークであり、そして一番の話題作です。

このプロジェクトはReact Routerの作者による新作で、10月までは有料サポーターのみが利用可能でした。 公開後も多くの支持を得続けており、ファンドで300万ドルもの資金を獲得しました。 プロジェクトのモットーは、"Webの基礎、モダンなUX"と明確であり、APIはできるかぎりWeb標準に準拠しています。

私が気に入った2つの例を紹介したいと思います。

フォームを送信するには……フォームを送信すればいい。 当たり前のことにしか見えませんが、しかし開発者はフォーム送信を避けるためにevent.preventDefault()を書くことに慣れきってしまっています。 それに、JavaScriptが無効な環境でもフォームを送信できたほうがいいに決まっています。 Remixは、我々が当たり前だと思っていたことに挑戦し、ユーザと開発者双方の体験を重視した新しいアプローチで、古い原則を"remix"しています。

もうひとつ、Remixはネストしたルーティングを非常にうまく処理することができます。 無限のHTTPリクエストを生成して画面をローディング中で埋め尽くすことなく、必要なコンポーネントの必要とするデータだけを効率的に読み込むことができます。

2位のNestは、特定のフレームワークに縛られないオーソドックスな、サーバサイドNode.jsフレームワークの王者です。

3位のStrapiはヘッドレスCMSのトップです。 ヘッドレスCMSは、データを管理するための高機能なダッシュボードと、データを提供するAPIのみを提供するアプリケーションです。 Strapiの最新バージョンでは、Reactコンポーネントで構築されたデザインシステムを提供しています。

2021年は、既存のトレンドが強化された年でした。

ネイティブES modulesの採用が続き、Viteは広く受け入れられました。 一方Node.jsエコシステムにおいてもVitestのようなES modulesフレームワークが作られつつありますが、こちらは一筋縄ではいきません。 TypeScriptに至ってはES modules対応を延期したほどです。

JavaScript以外の言語で作られたフロントエンドツールが増えつつありますが、これは主にパフォーマンスの理由からです。

Lee RobinsonがRustはJavaScriptインフラの未来だという記事を書いています。 Rustの興味深い点は、その素晴らしいパフォーマンスと、JavaScriptとの親和性の良さです。 NAPI-RSはシリアライズ無しにJavaScriptとRust間の通信を行うことを可能とし、Next.jsはSWCにその将来を賭けました。

Parcel2はRustコンパイラをひっさげて登場しました。 Romeも全面的にRustに移行するということでしたが、創業者のひとりであるJamie Kyleは何の情報もないまま会社を離れました。

Rustは非JS言語の代表格ですが、決して唯一ではありません。 素晴らしいパフォーマンスを発揮する言語は他にもあり、BunはZigで書かれており、TurborepoやesbuildはGo製です。 そういえばEvan WallaceがFigmaを去ったのは、esbuildの開発に時間を割けるようになったからかもしれません。

monorepo分野ではLernaが最も使われていますが、既にあまり保守されていません。 次を狙って、ビルド時間を大幅に短縮できるモノレポツール Nxが急成長しています。 さらにライバルであるTurborepoが、Vercelに買収された直後から攻勢を仕掛けています。

Vue3が正式リリースされてから1年が経ち、多くの革新的な技術が出揃い、エコシステムが急激に成長していることがわかります。

Vue3の新しい<script setup>のような構文は、コンポーネントの開発体験を新しいレベルへと引き上げてくれます。 VS CodeエクステンションVolarは、VueにファーストクラスTypeScriptサポートをもたらし、Composition APIで一から構築されたステート管理ツールPiniaはVuexの後継者となります。

VueのデフォルトツールがViteになったことにより、Nuxt 3、Quasar、VitePressといった多くのフレームワークもデフォルトでViteを使うようになりました。 これによって開発者のエクスペリエンスが大幅に改善され、イノベーションの扉が開け放たれました。

またコミュニティは、Vue2のDXをVue3へと揃え、よりスムーズに移行プロセスが成功するように多大な努力を払いました。 2021年はVue開発者にとって、アプリのDXとパフォーマンスの両方において多くの改善を得ることのできた素晴らしい年でした。 2022年にはどんなことがおこるのか、今から楽しみですね。

まもなくReact18がリリースされます。 既にRC版を触ることは可能で、Automatic Batchingによるレンダリング削減や、SSRのSuspenseサポートなど、すぐに利用できる改善がいくつもあります。

React18は待望のConcurrent Renderingが実装され、大きな破壊的変更なしにSuspenseが刷新されました。 startTransitionなど一部の機能は18.0リリース当初から使用可能になる予定です。 しかし、昨年のRising Starで紹介したServer Components等については、もう少し待つ必要がありそうです。

Reactはブラウザでもサーバでも進化を続けており、React Nativeのプラットフォーム構想も進行中で、ますますユビキタスな存在になろうとしています。