フロントエンドフレームワーク
昨今のWeb開発はJavaScriptが大きな比重を占めているといっていいと思います。そうなった大きな理由の1つは、サーバサイドでJSを動かすためのランタイム環境である Node.js の台頭にあります。
Node.jsはJavaScriptによるバックエンドの開発を可能にしただけではなく、付属のパッケージマネージャである NPM はJavaScriptのエコシステムを爆発的に拡大させ、モダンフロントエンドに多様な選択肢を与えています。
Node.jsによって、モダンフロントエンドは跳梁跋扈するJSフレームワーク（以降FWとします）から好みのものを選べる時代になりました。
コンポーネント指向という考え方
今日用いられるFWの多くには1つの共通項があります。コンポーネント指向 であることです。
元来、Webページはそれぞれ別のファイルに隔離したHTML/CSS/JavaScriptの組み合わせによって成り立っていました。この構成は実際のWebページとどのファイルが対応しているかが明確ではなく、パーツの再利用性に乏しいといえます。
コンポーネント指向のFWは、Webページを構成するHTML/CSS/JavaScriptの一部分を切り出してカプセル化し、高度な再利用性を実現します。
以下では、よく用いられるJS FWについて特徴をまとめておきます。
React
React は Meta社（旧Facebook）が開発したJSのライブラリ[1]で、複雑なユーザインタフェースを構築するための強力なAPIを提供します。旧来のJSに比べて多くの部分が根本から違います。
- Virtual DOM
- DOM（Webページのソースをツリー構造として表したもの）そのものを操作するのではなく、仮想的に生成したDOMで差分のみ検出して操作するためパフォーマンスに優れるとされます。
- リアクティビティ
- 依存関係が複雑に絡み合った変数や関数において、値の変化を追跡するのは至難の業です。Reactでは、宣言したステートの変化を追跡して、ビューに反映するための簡便なツールが提供されています。
- 独自のテンプレート
- JSXという独自のテンプレートを用いて記述することが多いです。少しクセがありますが、JSの変数に格納した値を気軽にDOMへバインドできたり、制御構文を用いてDOMの選択的なレンダリングを行うこともできます。
Reactは今やモダンフロントエンドのデファクトスタンダードです。少し古い統計ですが、State of JavaScript 2022 を見ても、高い人気を誇っていることがわかります（最近は選択肢が増えてきて少し落ち目みたいですが）。
多くのフロントエンド開発者がReactを採用する大きな理由は、そのエコシステムの強大さにあると思われます。
Vue
Reactと対をなす存在として挙げられるのが、Evan You氏らによって開発されたFWである Vue です。できることはReactとほとんど同じですが、VueはよりHTML/CSS/JSの分離が明快かつ、すべてを1つのファイルに記述できるテンプレート（Single File Component, SFC）を使用します。ステート管理もReactより扱いやすい（※個人的に）ので、Reactよりも難易度は低いとされます。
ReactとVueの相違点としてよく挙げられるのがデータバインディングの仕組みについてです。前者はロジックからViewへのデータバインディングのみで、逆方向でデータを同期する場合にはイベントハンドラを定義する必要があります（単方向）。例えば <input /> から受け取った入力をロジックに反映する場合などです。対して、Vueでそのような機能を実装する場合には v-model ディレクティブのようなAPIを用いることができます（双方向）。
データバインディングについては この記事 などを参照してください。
Svelte
Rich Harris氏によって開発された Svelte は、Vueに似たシングルファイル形式のテンプレートを使用します。VueよりもHTMLライクで直感的な書き味だそうです（ほとんど触ったことがありませんが）。
Jamstack
モダンフロントエンドの大きなトレンドの1つに、フロントエンドホスティングサービスを運営するNetlify社が主導する Jamstack というものがあります。これは JavaScriptの "J"、WebAPIの "A"、Markup (HTML) の"M" の頭文字を組み合わせた呼称で、Webサーバを自前で用意せずにWebサイト構築を行うアーキテクチャ を指すとされます。
元来のWebサイトは、PHPなどをサーバサイドで動かしユーザのリクエストに応じてHTMLを生成して返却するといったWebサーバ主体のアーキテクチャが主流でした。爆発的な人気を誇るCMSであるWordPressでできたサイトもこのような仕組みでページを表示します。
対して、Jamstackではコンテンツの取得をWebAPIで事前に行います（静的生成、SG）。すなわち、Webサーバはあらかじめ生成されたHTMLをリクエストに応じて返却するだけの役割となるのです。このような構成にすることで、Webサーバ運用のコストの削減に加え、非常に高速でWebページを配信することができるため、ユーザ体験に優れたサイトを構築することができるのです。
静的サイトジェネレータ
Jamstackの流行に伴って、静的なHTMLをJavaScriptから生成するためのFWが発展してきました。それらは 静的サイトジェネレータ と総称され、Jamstackの "J" と "M" を担当します。
代表的なものをいくつかまとめておきます。
Next.js
フロントエンドホスティングサービスを提供するVercel社によって開発されたReactベースのフレームワークで、現在のWebフロントエンドで最もよく使われています。静的生成をはじめとした多くのレンダリング方式（CSR/SSR/ISR/ISG etc）を提供しており、パフォーマンスとスケーラビリティにすぐれたWebサイト、Webアプリケーションを開発できます。
Nuxt.js
Vueベースの静的サイトジェネレータで、Next.jsに影響を受けて開発されました。Zero-Configを標榜しており、少ないセットアップの手間にVueの明快な書き味も相まって非常に使いやすいです。
SvelteKit
SvelteベースのFWです。Svelteを使ったアプリケーション開発でのスタンダードであり、よくセットで使われるみたいです。
Gatsby.js
Reactベースの静的サイトジェネレータです。Next.jsに比べると機能はコンパクトですが、パフォーマンスに優れるため静的サイトの構築にはよく向いています。データフェッチに関してGraphQLと非常に相性がいいです。
Astro
パフォーマンスに非常に優れており、好きなUIフレームワークを使うことができるなど他の静的サイトジェネレータとは一線を画した特徴を多く持ちます。コンテンツの多いサイトの構築によく向いています。
Headless CMS
Jamstackの "A" の部分、すなわちコンテンツ管理を行うためのバックエンドとしてよく用いられるのが Headless CMS です。CMSといえばWordPressが大家ですが、Headless CMSはWordPressのようなViewにあたるフロントエンドの部分を持たず、バックエンドの部分のみをWeb APIとして公開します。
これによって、WordPressのような従来のCMSに比べてリッチなUI/UXを実現できることに加え、Web API連携を生かして他の様々なSaaSを利用することも可能になります。バックエンド構築の手間を省きながら、自由度の高いWebページを構築できるのが大きな魅力といえます。
代表的なものをいくつかまとめます。
Strapi
Node.jsベースのセルフホスト型Headless CMSです。サーバとDBを自前で用意する必要がありますが、JS開発者と非常に相性がいいのが特徴といえそうです。
Contentful
ドイツ製のクラウド型Headless CMSで、豊富な種類のAPIと多くの言語に対応したSDKを持ち、多くのユースケースに対応します。
microCMS
国産ではトップクラスの人気を誇るクラウド型Headless CMSで、ドキュメントが充実しています。
Newt
国産のクラウド型Headless CMSで、すっきりしたUIで使いやすいです。こちらもドキュメントが充実しています。
個人的にはAstroを推す
AstroはHTMLライクなフロントエンドフレームワークで、コンテンツ配信型のWebサイトを非常に快適に構築することができます。
とにかく速い
静的生成（SG）を主体にしているため、アクセスしてからページが表示されるまでが非常に速いです。ここまでは他のFWでも同じなのですが、Astroはビルド時にクライアントサイドJS（ブラウザで実行されるJS）を極限まで排除するという仕組みのために、より一段とパフォーマンスに優れています。まさに静的サイトのためのFWといったところです。
とにかく書きやすい
Astroは独自テンプレート .astro を使用しますが、これの書き味が個人的には最高です。というのは、HTML/CSS/JSをまとめて管理できるVueのSFCを、JSXを使って書くことができるためです。VueでもJSXは使えますが、あえて使っている割合はかなり少ないように思います。
もう一つは、AstroはUIフレームワーク各種をコンポーネント単位で使い分けることができるという点にあります。
これをうまく利用すれば、「基本的にはVueを使うけど、特定の機能の実装にはエコシステムの豊富なReactを使う」みたいなこともできてしまいます。
脚注
フレームワークと呼称して分類してはいますが、厳密にはライブラリであるようです。 ↩︎
関連記事
記事がありません
