ライジングスターにようこそ!毎年恒例、2022年の12か月におけるJavaScriptエコシステムのトレンドプロジェクトを紹介していこうと思います。一年を笑顔で始められるのは、とてもよいことですね!以下は、2022年の1年間で増加したGitHubのスター数によるランキングです。JSからの一年間の分析です。各プロジェクトをクリックすると、より詳細な情報を閲覧することができます。今年の総合優勝は、Bunです!パフォーマンスとDXにこだわった新しいJavaScriptランタイムであるBunは、2022年夏のベータ版リリース直後から人気沸騰しました。JSがプロジェクトのトラッキングを始めて以来、これほどの爆発は見たことがありません。Bunは、2年前の総合優勝であるDenoと同じくTypeScriptをナチュラルにサポートしています。Bunはただのランタイムではなく、以下のような機能も持っています。パッケージマネージャ(Yarn、npm、pnpmのような)ビルドツール(Webpack、ESBuild、Parcelのような)テストランナーその他諸々Bunはpackage.jsonから依存関係をインストールすることができます。Bunはスクリプトを実行することができます。他のランタイムよりも高速に、それらを行うことができます。Bunは、JavaScriptエコシステムにおいて、パフォーマンスに焦点を合わせた新たな試みです。APIの多くをサポートしており、またほとんどのnpmパッケージとも互換しています。プロダクションレベルにまでは達していないかもしれません(特にWindowsのサポートがない)が、非常に将来有望なツールです。Denoに比べると歴史は浅いですが、早々とフレームワークElysiaが登場しており、最速のHTTPフレームワークであると主張しています。Sumnerが、全ての機能をZigという低水準言語でゼロから実装したというところです。Ecosystemを読むとよいでしょう。Tauri2021年は5位だったTauriは、2022年には新たに3万人の星をみるひとを獲得し、人気を広げつつあります。これはRust製のデスクトップアプリケーション作成ツールであり、Web技術を使って製作できることが特徴です。2022年6月にはついにバージョン1.0に到達しました。セキュリティとパフォーマンスに重点を置いて作られています。競合のElectronと比べると、使用するAPIや機能などを開発者が指定する必要があるかわりに、フットプリントが小さくて済みます。Next.js3位のReactと4位のNext.jsは同じくらいの数値であり、共に2万人を獲得しました。Componentsがフル活用されています。Componentsの将来についてこちらで大胆に語っています。ComponentsはReactの未来であり、我々の目標はこのアーキテクチャをReact全体に広げることである。Vite5位のViteは、最もトレンドなアプリケーションビルドツールであり、素晴らしい開発者体験を提供します。2022年は6月のv3、12月のv4と2回のメジャーアップデートが行われました。SvelteKitやQwikといったフレームワーク、はたまたテストツールVitestなど多くのプロジェクトと力を合わせています。MORE2022年はReactが頂点に立ちました。Vue.jsはv2とv3のリポジトリに分かれているため、合算すれば近いくらいの力関係となります。目新しいところとしては、Qwikが2位に上昇しました。QwikはReactに比較的似ており、テンプレートをJSXで書きますが、主な違いは、ブラウザに送られるJavaScriptの量を最小限にすることにフォーカスしているところです。これは"ゼロベースJavaScript"と呼ばれるトレンドのひとつです。最近のWebサイトやWebアプリケーションは、ブラウザのパフォーマンスに影響を与えるほどJavaScriptの重さが肥大化することがよくあります。サーバサイドレンダリングを使ったとしても、JavaScriptをロードし、解析し、実行するまでユーザは待たされます。SSRでレンダリングされたページにインタラクティブ性を与える方法として、Qwikはhydrationではなく、Resumabilityという技術を用いています。状態をHTML内にシリアライズすることで、極めて高速な初動を実現します。Heveryによって進められています。AngularJSのスローガンが『HTMLをWebアプリのために強化する』であるのに対して、Qwikは『HTMLファーストのフレームワーク』であり、即ち古き良きHTMLの上にアプリを構築するという意図を持っています。Experience部門ヴァイスプレジデント。開発者・ライター・クリエイター。2022年は、Reactのこだわりがより強くなった年でした。Reactは今でもどんなWebページにでも適用できるライブラリです。Reactはさらに、インタラクティブで応用性がありパフォーマンスの高いフロントエンドを実現するためのアーキテクチャに進化しています。3月にリリースされたReact18では、フレームワークのアーキテクチャを刷新する機能とAPIが同時に提供されました。Componentsも、新しいアーキテクチャパターンと連動するように設計されています。clientなど幾つかの規約がフレームワーク間で標準化されつつあり、またasync/awaitなどその他についてもベータ版などを通じてブラッシュアップが図られています。2023年は、React個々の新機能によるイノベーションだけではなく、より広くReactエコシステムそのものにも大きなイノベーションが起こることでしょう。UIコンポーネントだけではなく、型安全性を向上させるライブラリも成長し続けます。Fuvuejs・Vite・Nuxtのコア開発者。VueUseとSlidevの作者。2022年はVueのメジャーアップデートが多数ありました。setup>構文がVue2にバックポートされました。これによって、Vue3への移行がよりスムーズになります。TransformがExperimentalとして利用可能です。mode"に取り込んでいます。これによってVueはさらに高いパフォーマンスを発揮できるようになるはずです。3のStableがリリースされたことからもわかるでしょう。Viteはこの一年で倍に成長し、そしてcreate-vue、Nuxt、Quasar、Astroといった数々の新しいフレームワークが多くのユーザに採用されつつあります。Viteのおかげで、VueユーザはVitestやHistoireといった良い開発体験を得ることができました。vue-termuiのような、独創的すぎるVueの使い方も現れています。今年はDXにとって、なんとも素晴らしい年です。これらのツールでワークフローをこれまで以上に向上できることを願っています。次に何が来るかを楽しみにしています。MOREフロントエンドがこれまでより多くのことをサーバ上で行うようになってきているため、フロントエンドとバックエンドのフレームワークの境界は徐々に曖昧になってきています。そこでこのセクションでは、フルスタックフレームワーク、メタフレームワーク、バックエンドフレームワークについて紹介します。Next.js前回と同じく、Next.jsがこのセクションの覇者になりました。Componentsや、appディレクトリという新しい機能が追加されました。開発者は各機能を使うことにより、ネストされたルートを強力に処理することができるようになります。create-t3-appこのセクション最大の変化は、tRPCが2位に上がってきたことです。GraphQLのことはいったん忘れてください。2.0プロトコルも存在します。サーバで定義された型をクライアントでインポートすることで、E2Eの型安全性を実現する機能が非常に秀逸です。CSSと組み合わせたスタックは人気のあるボイラープレートになっています。Astro3位のAstroは2021年に現れた静的サイトジェネレータであり、パーシャルハイドレーションという概念を世に知らしめました。1.0のリリースにおいてもそのことが強調されています。新しいSSRのサポートと、ReactやSCSSといった多くのフロントエンドツールを巻き込んだ統合により、Webアプリ開発が極めて容易に感じられることでしょう。Remix5位のRemixは急成長を続けています。2021年にオープンソース化されたのち、わずか1年でShopifyに買収されました。Transitionにおいて、Remixが画期的である理由が明快に示されています。静的生成だけに頼るのではなく、分散コンピューティングやネイティブブラウザの機能も活用することで、優れたパフォーマンスと素晴らしい開発者体験の両方を提供します。LorberReactのアーリーアダプタ。FacebookのOSS、Docusaurusに従事。Reactを発行している。2022年もViteが勢いを保ち続け、最もポピュラーなフロントエンドツールのひとつになりました。その前身であったSnowpackは既にメンテナンスされておらず、公式にもViteの使用が推奨されています。Viteの採用はVueエコシステムに留まるわけではありません。SvelteKitやStorybook、Vitestをはじめ、Create-React-Appの代替にすら使われます。モノレポのためのビルドツールとして、NxやTurborepoが台頭しつつあります。6をリリースしました。Babelは依然として人気を保っていますが、swcやesbuildといったツールが多くの新しいプロジェクトやメタフレームワークに採用されつつあります。これら新しいツールは、ビルドとトランスパイルの性能を大きく向上させることができます。swcはプラグインシステムを提供しているため、よりモジュール化を進められます。Vercelは、新しいバンドルツール、Turbopackを発表しました。Koppersが取り組んでいる、Rust製の非常に高速なバンドルツールです。Romeは初めての安定版をリリースしました。興味深いリンターとフォーマッターを持っており、今のところ採用は控えめですが今後増えていくことが期待されます。2023年は、Rust製のフロントエンドツールがたくさんニュースになることでしょう。高速なCSSツールチェイン。checker:tscのより高速な代替。mdxjs-rs:MDXのより高速な実装。BaconExpoの開発者ツールのテックリード。iOSとAndroid開発者。2022年は、ネイティブアプリをJavaScriptで構築する世界が大きな進展を見せました。Nativeにするといった成功に代表されます。Nativeは7年連続でモバイルカテゴリの1位に輝き続けています。Nativeの成功に加え、人気のあるWebパターンをモバイルに持ち込む傾向もみられました。CSSをモバイルアプリに広げるNativeWind、レンダリングのSkiaなどです。Expoがファイルシステムベースのルーティングという、古典的なWeb機能を採用したことからも、ネイティブアプリの開発がウェブ開発のますます身近になりつつあることを示しています。モバイルアプリの将来を予測することは困難ですが、この1年のことを考えると、2023年はウェブアプリとモバイルアプリの垣根がますます低くなっていくことでしょう。おわりに2022年は、非常に人気のあったライブラリが作者自らによって壊されるという波瀾から始まりました。Faker.jsとcolors.jsのことです。巨大なエコシステムの脆弱性は、モノレポツールであるLernaがもうメンテナンスしないと宣言したときに再び顕現しました。このときはNxのバックにいるNrwlがLernaを引き継ぐことでなんとかなりましたが。JavaScriptは世界を埋め尽くす。2009年になされた、こんな予言を覚えている人もいるかもしれません。JavaScriptで書くことのできるアプリケーションは、いずれJavaScriptで書かれるようになる。13年の時を経て、この予言には少しばかり追記が必要になるかもしれません。『もしくはTypeScriptで。DenoでもBunでも、Nex.jsでもViteでも、TypeScriptがJavaScriptを書くためのデファクトスタンダードになりつつあるからです。コードベースやツールにおいてJavaScriptは、開発者とエンドユーザの両方に対して障害になっています。大規模なコードベースでは、ビルド時間が青天井になる。JavaScriptのサイズは肥大化し続けており、パフォーマンスの低下を招いている。2022年には、これらの問題を解決するために様々なレイヤで幾つものイノベーションが生まれました。今年のチャンピオンであるBunは、インストールやビルドにかかる時間を減らすため思い切ったアプローチをとりました。ひとつのツールで全てを完結させるためにRomeは生まれました。ビルドツールVite。ブラウザでのパフォーマンスについては、様々なアプローチが見られます。ブラウザでJSをほとんど動かさない、ゼロベースJavaScript。Hydrationする。Components。Appsアーキテクチャ。Remix静的な"ページ"から、完全に動的な"アプリ"まで、Webが担っている範囲はとても広いため、たったひとつで全てを解決する特効薬は存在しません。JavaScriptは、一方では動きの異なる複数のブラウザ、もう片方では独自のモジュールシステムとAPIを持つNodeと、完全に分断されていました。Request/Responseなど)をどこでも使いたいという強いトレンドが生まれつつあります。Future.という記事において、これらのトレンドについて素晴らしいまとめをしてくれています。我々も、その気持ちを共有しています。Web開発者であるということは、なんと素敵なことでしょう。