JavaScript ベスト・オブ・ザ・イヤー 2020

2020年は様々な理由で特別な年になりました。 最も目を引くことは、これまで5年間首位を独走してきたVue.jsを抜き去り、Denoが一位になったことです。

DenoはNode.jsの生みの親Ryan Dahlによる新たなJavaScriptランタイムです。 Node.jsのこれまでの10年間の経験と反省を生かし、多くを改善しているため、Node.jsの後継と思われがちです。

主な機能としては、

• デフォルトでTypeScript対応。ただしJavaScriptでコードを書くこともできる。
• 一極集中したパッケージマネージャがなく、任意の依存関係を任意のURLから読み込むことができる。
• Deno標準ライブラリは、Node.jsでは個別にパッケージをインストールしなければならなかったような一般的な用途のライブラリを最初から提供する。
• Denoは可能なかぎりWeb標準に従っている。(例：Fetch API)
• インポートはES Modulesを使用。
• テストランナーやデバッガーを標準装備。

Denoのエコシステムはまだまだ発展途上ですが、Denoの話題性を考えると、今後大きく変化することが期待されます。

Denoの成長は、2つの大きなトレンドを裏付けています。

• フロントエンドとクライアントサイドでのTypeScriptの台頭
• Snowpackなどのソリューションによってオンザフライで提供されるES Modulesの成長。

いつものようにVue.jsとReactが頂上決戦を繰り広げています。

その後ろでは、2019年に3番手をSvelteに奪われたAngularが、ふたたびその位置を奪還しました。

ベスト5の新顔はAlpine.jsで、これはLaravel LiveWireの作者によって作られたミニマルなリアクティブフレームワークです。

Vue.jsとAngularの両方から、カスタムHTMLディレクティブや双方向バインディングといったアイデアを拝借しています。

HTMLに古き良き<script>タグを追加するだけで簡単に使うことができ、ビルドプロセスも不要で、HTMLマークアップだけで全てを動かすことができます。 本格的なフレームワークを導入することが困難な既存のWebページをさくっと強化する目的については、最も適切なソリューションであるかもしれません。

Webページにインタラクティブ性をもたらすだけの非常に軽量なソリューションであるため、Elixir Phoenixのようなフレームワークともうまく連携して同居できます。 Alpine.jsとTailwind CSSを最初からまとめておいたPETALのようなプロジェクトも存在します。 こちらについては後ほど語りましょう。

Node.jsフレームワークには大きく2つの種類が存在します。

ひとつはNext.jsやNuxtのようなフルスタックフレームワークで、ReactやVue.jsなどをサーバサイドに持ってくるアプリケーション構築方法については賛否両論があります。

もうひとつは昨年のチャンピオンNestやFastifyなどが属する、サーバ側のみで動作する古典的なフレームワークです。

この分野では2018年にトップだったNext.jsが再びチャンピオンに返り咲きました。 当初はReactをSSRするだけのソリューションとして名を上げましたが、今ではReactでフルスタックWebアプリケーションを構築するソリューションの筆頭になっています。

最新バージョンでは動的ページと静的ページの垣根を取り払うIncremental Static Regenerationにも対応し、多くのユースケースで最適な選択肢になりつつあります。

フルスタックといえば、BlitzやRedwoodは、それひとつだけで完全なWebアプリケーションを構築できるという最高の開発者体験を提供することを目的としたプロジェクトです。

それにしても浮沈の激しいJavaScriptの世界で、11年前に誕生したExpressがいまだに一定の地位を保っているのは興味深いですね。

2020年のReactエコシステムのテーマは安定性でした。 React17では破壊的変更を行わず、将来に向けての布石を仕込みました。 それがReact Server Componentsです。

React Server Componentsはクライアントのバンドルサイズを縮小し、起動にかかる時間を改善します。 さらにデータの取得、データベースやファイルシステムなどデータソースへのアクセスも簡単になります。

Next.jsは、Reactアプリケーションを構築するための最も有名なソリューションに成長しました。 React Server Componentsの最初のアプリになることでしょう。

React Query、Recoil、React Hook Formといったサポートライブラリは、hooksを主軸に進化、円熟してきました。 それぞれがReact開発の一部を簡素化してくれます。

これらのコンポーネントライブラリを組み合わせることで、React開発者はこれまで以上に多くのツールを手に入れることができるでしょう。

2020年のVueコミュニティ最大のニュースは、Vue3のリリースです。

Vue2に存在した幾つかの問題を解決するために、Composition APIという仕組みが導入されました。

• コンポーネント内の論理的な繋がりによってコードを整理することが難しかった。
• コンポーネントをまたいだコードの再利用が容易になる。 (Vue2のmixin、mixing factory、scoped slots等では不十分だった)
• TypeScriptサポートが改善された。

バージョン3で導入された変更については、マイグレーションガイドをチェックしてみてください。

2020年には新たなWeb構築ツール、Viteが誕生しました。 ES modulesに対応し、コマンドラインからVueアプリケーションを構築する最速の方法です。

Angularのランキングは昨年とあまり変わりませんが、3位に新たなプロジェクトが登場しました。

ScullyはAngularにJamstackをもたらす静的サイトジェネレータです。 このプロジェクトは2019年12月に登場し、そしてわかりやすいドキュメントが存在します。

Angularは2020年に3つのメジャーバージョンがリリースされました。

2月にはバージョン9がリリースされました。 主な変更点はIvyコンパイラの導入で、これによってバンドルサイズが減少し、またビルドプロセスに大きな改善がもたらされました。 さらに年の後半にはバージョン10とバージョン11がリリースされました。

Angularチームの2020年後半の主な仕事は、コミュニティの声に耳を傾けることでした。 コミュニティのニーズを理解するために、issueやPRに対応することに大きな努力を行いました。 また、チームが取り組んでいることの共有や、今後のロードマップの公開も行いました。

2020年はビルドツールの当たり年で、多くの新しいトレンドが産まれました。

SnowpackとViteはES modulesの将来に賭けたアプローチです。 開発中のコードはバンドルせず、プロダクションコードのビルド時のみバンドルする方針で、非常に高速なフィードバックループを持っています。

swcとesbuildは、それぞれRustとGoで書かれており、TypeScriptをサポートしていて、そして信じられないほどの高速で動作します。

Webpackは設定が複雑すぎると言われることが多く、よりシンプルに書けるParcelやRollupが成熟してきました。 とはいえビルドツールの中心はいまだWebpackであることは変わらず、そしてWebpackの新たなキャッシングレイヤはビルドのパフォーマンスを大幅に改善します。

Monorepoがメインストリームになりつつあります。 YarnとLernaが広く使われ、そしてnpm 7も参加してきました。

個人的に2021年の去就を注目しているのはRome、Toast、Turborepoです。