【2022年版】フロントエンドフレームワーク9選

最近のWebアプリケーション開発において、フロントエンドフレームワークを使わないという選択肢はほぼなくなっているのではないでしょうか。特にサーバーサイドとはAPIで通信を行う場合、フロントエンドではUIの再レンダリングを最小限にするためにもフレームワークの活用が欠かせません。

この記事では2022年における主立ったフロントエンドフレームワークを紹介します。フロントエンドフレームワーク界隈は日々トレンドが移り変わっており、2023年にはここにはないフレームワークが登場しているかも知れません！

1. Vue.js

世界でもそうですが、特に日本で人気の高いフレームワークです。Web Components風に1つのファイル中にほぼ素のHTMLが記述でき、さらにJavaScriptとCSSを独立して書けるのが魅力です。また、ルーティングやストアなどの仕組みがVue.js公式で提供されており、他の選択肢がないことでアーキテクチャ選定に悩まないのも魅力です。

Vue3が最新版としてリリースされており、Vue2との差異が大きく生じています。これからプロジェクトを作るのであればVue3を選ぶのがお勧めですが、各種ライブラリがまだ対応していないものもあるので注意してください。

Vue.js

2. React

Reactは、仮想DOMを活用したフレームワークとして最も最初に誕生しました。仮想DOMによって、開発者はUIの状態管理から解放されました。JSXという特殊なタグを書き、JavaScriptとUIが密接になっているため、デザイナーとの協業が若干しづらい雰囲気があります。

ReactはLearn once, write anywhereを標榜しており、Reactの書き方を覚えればモバイルアプリでもフロントエンドでも自由に開発できるようになります。Reactはミドルウェアの進化が激しく、周辺ライブラリのトレンド変化が激しいフレームワークでもあります。

React – ユーザインターフェース構築のための JavaScript ライブラリ

3. Angular

AngularはGoogle社によって開発されたフレームワークになります。Angular.js（1系）とAngular（2系以降）に大きな違いがあり、ユーザーが若干離れてしまった感があります。とはいえ、今なお世界中に数多くのユーザーがいます。

HTMLとJavaScript、CSSがファイルとして分離しているため、デザイナーと作業の分担がしやすいのが特徴と言えそうです。

Angular 日本語ドキュメンテーション

4. Svelte

SvelteはNo Virtual DOMを掲げており、仮想DOMを使いません。とはいえ、開発者がDOMの状態管理をしないのは他のフレームワークと同じです。コンパイルして最終的な成果物を作る際に、素のJavaScriptファイルを生成します。そのため、他のフレームワークと比べて軽量で高速である点が特徴です。

軽量ではありますが、ルーティングやストアの機能は用意されています。大規模なWebアプリケーション開発には機能不足という声も聞かれますが、小さめのWebアプリケーションを素早く作るという目的にはぴったりだと言えるでしょう。

Svelte • サイバネティクスで強化されたWebアプリ

5. Ember.js

Ember.jsは他のフレームワークと比べると日本語情報の量では見劣りしますが、世界中にユーザーの多いフレームワークになります。テンプレートエンジンとしてHandlebarsを採用し、割と分かりやすく動的に変化するHTMLを記述できます。

初期リリースが2011年なので、歴史のあるフレームワークになります。ルーティングやストアなどの機能は備えていますので、十分開発に利用できます。

Ember.js – A framework for ambitious web developers

6. Elm

ElmはWebアプリケーション開発用の専用プログラミング言語です。関数型言語でHaskellに強く影響を受けています。Elmで記述してコンパイルするとHTML/JS/CSSが生成される仕組みになります。

静的な型付け言語でもあり、かなり強力なために事実上実行時の例外が発生しないと言われています。HTML自体は仮想DOMによって更新されます。

はじめに · An Introduction to Elm

7. Preact

Reactを使っている開発者からは、Reactは重たいという話をよく聞きます。そこで開発されたのがReactライクに使えるPreactです。わずか3KB程度のフレームワークで、軽量さが売りとなっています。

外部ライブラリですがルーティングやストアもサポートされています。ただし、Reactと似ていて非なるものなので、ちょっとした動作の違いなどを感じることはあるでしょう。より小規模で軽く作りたい場合に使ってみるのがお勧めです。

Preact | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.

8. Inferno

ReactとAPI互換の高いフレームワークです。また、モバイルであっても60FPSを保証するなど、UIパフォーマンスの高さが売りとなっています。Reactとの違いとして、イベントハンドリングが限定的であることや、あくまでもDOM向けである点などが挙げられています。

使い方としてはReactに似ていますので、より高いUIパフォーマンスを求める場合に検討しても良さそうです。Reactからの移行ガイドも用意されています。

Inferno

9. Flutter

FlutterはGoogleにより開発されているフレームワークになります。利用する言語はDartです。元々モバイルアプリ開発用のフレームワークですが、Webやデスクトップアプリ開発もサポートされています。

Web向けにはCanvas上に描画することで、パフォーマンスを高めています（HTML DOM出力への変更も可能です）。HTMLは全く使わないので、Web向けにも出力できるDart用フレームワークとして捉えるのが良いでしょう。

Flutter – Build apps for any screen

まとめ

2022年現在ではReactとVue.jsの人気が相変わらず高いです。そんな中、FlutterがWebアプリケーション開発向けでも採用されるケースが増えてきています。そしてReactのパフォーマンスの悪さに辟易して、代替軽量ライブラリも出てきています。

フロントエンドフレームワークの進化は激しいので、シェア争いはもっと盛んになっていくでしょう。ぜひトレンドをウォッチし、バージョンアップなどの情報も注視しておきましょう。

なにをやっているのか私たち株式会社Hexabaseは、法人向けバックエンドサービスの開発会社です。最新クラウド技術を結集した『Hexabase』を開発。クライアントごとにモダンUI／フロントエンド開発を行い、SaaS形式で提供しています。 ■日本発＆高品質の『Hexabase』■ Hexabaseは企業システムの開発に利用できるエンタープライズBaaS（Backend as a Service）です。Webアプリケーション開発に活用できる高品質なバックエンド機能をクラウドサービスとして提供します。 ▍スケーラブルなマルチテナントバックエンドサービス IaaS／PaaS機能だけでなく、システムサービスそのもののバックエンドに欠かせない基礎機能（ログイン・ユーザー管理・アクセス制御・データベース管理・APIゲートウェイ・拡張コードの実装など）も提供します。 ▍より速く構築し、フロントエンド開発に集中するノーコードの『Hexabase』を利用することで、開発期間と開発コストを抑えながら、使い勝手の要となるフロントエンド開発に注力できるようになります。 ■実績■ Hexabaseはエンタープライズ向けの開発を得意としており、規模・レンジ・ジャンルを問わずさまざまな企業様に導入いただいています。新規事業の立ち上げを目指す企業様が扱うケースがほとんどで、地方の中小企業様にも導入した実績もあります。 ■ローンチからグロースへ■ これまでは特定の数社様に絞った草の根活動を続けてまいりました。今後はプロダクトを伸ばしていくフェーズに入ります。サービスをより多くの方に、利便性高く使っていただくために、フロントエンドエンジニアを中心にスモールプロダクトを数多くつくっていく考えです。Webサービスのインフラとして、Hexabaseが広く認知される世の中を目指していきます。

Like Izumi Nakagi's Story

Let Izumi Nakagi's company know you're interested in their content