はじめに

本記事を書いたきっかけ

今まで仕事で React、Vue.js、Angular など様々なフレームワークに触れてきました。
ただ、それぞれのフレームワークがどのような特徴を持っているかなどは結構曖昧な部分があったなと思ったので、改めて備忘録がてらまとめてみようと思ったのがきっかけです。
この記事では 0 章としてフロントエンドフレームワークについてを書いてみましたが、自分用のメモに近いです。

フロントエンドフレームワークとは

そもそもフロントエンドフレームワークとはなんぞや？と言うところですが、
フロントエンドフレームワークとは、Web アプリケーションを開発する際の枠組みになります。
おかげでコストが削減でき、より効率的に開発を行うことができるわけです。

主なフロントエンドフレームワーク

有名どころのフレームワークになりますが、ここでは本当にざっくりとした説明のみになります。
（いくつか気になるものは細かく別記事にまとめてみようと思います。）

React

React は、UI をコンポーネントベースで構築するための JavaScript ライブラリです。
The State of JS 2022 を見ると利用率は毎年 1 位のようです。

Vue.js

Vue.js は、シンプルで柔軟な設計が特徴でフレームワークライブラリの中で特に UI 構築を得意とする JavaScript フレームワークです。

Angular

Angular は、機能性が豊富でアプリ開発に必要な機能を網羅しています。
また MVC（Model-View-Controller）アーキテクチャを採用しているため、アプリケーション設計がしやすいメリットがあります。

Svelte

Svelte は、アプリケーションをビルドするための手法を提供しています。
かつバンドルサイズやランタイムが小さいため高いパフォーマンスが期待できます。
ちなみに Svelte は UI ライブラリではなくコンパイラです。

比較表

特徴	React	Vue.js	Angular	Svelte
開発元	Facebook	Evan You	Google	Rich Harris
リリース	2013 年	2014 年	2010 年	2016 年
言語	JavaScript, JSX	JavaScript, Vue	TypeScript	JavaScript
アーキテクチャ	コンポーネント指向	コンポーネント指向	MVC	コンポーネント指向
仮想 DOM※	あり	あり	あり	なし
リアクティブデータバインディング	あり	あり	あり	あり
学習レベル	初級から中級	初級から中級	中級から上級	初級
パフォーマンス	高い	高い	中程度	非常に高い
コミュニティサポート	大規模で活発	大規模で活発	大規模で活発	成長中

※仮想 DOM とは

こちらのサイトの以下がとてもわかりやすかったです。

あなたが建築家で、大きなビルを設計していると想像してみてください。そのビルを改装するたびに全体を壊して新しく作り直すのは、とんでもなく時間とコストがかかりますよね。そこであなたは、ビルの「模型」を作り、そこで改装の計画を試行錯誤することにしました。改装の計画が決まったら、それを元に実際のビルを改装します。
この例え話でいう「ビル」が実際の DOM、そして「模型」が「仮想 DOM」です。

仮想 DOM により、前回と比較してどのくらい差分があるのかを比較し、変更された部分だけを DOM に反映するためレンダリングコストが下がると言うことですね。
実際開発する際はそこまで意識するものでもなさそうですが、あくまで理解として…

まとめ

フロントエンドフレームワークは、Web 開発において必要不可欠なものになっていると思いますが、フレームワークによって特徴はそれぞれです。
もちろんメリットデメリットと言うものが存在するわけですから、技術選定を行うための知識はしっかりつけておきたいなと改めて思いました。

本記事では「フロントエンドフレームワークについて」をざっっっっくりまとめただけなので、別の記事で何個か詳細をまとめたり、実際使ってみたりしたいと思います。

参考