React と Vue.js

これからの Web 制作のキーになると言われている UI フレームワーク React と Vue.js についてまとめてみた。

React と Vue.js の特徴

React の特徴

React は Facebook（現 Meta）が開発したフレームワークで，同社は UI 構築のライブラリと呼んでいる。情報が変化した部分を気にせず画面に反映できる「仮想 DOM」をいち早く搭載したことで知られる。

細かく分けられたパーツを組み合わせて複雑な UI を構築できる「コンポーネント指向」も React 発の開発手法で，汎用性の高さからも開発者も多く，SPA (Single Page Application) から大規模な Web システムまで広く用いられている。また，React から派生したクロスプラットフォーム開発ライブラリの「React Native」はモバイルアプリ開発などで採用されている。

Vue.js の特徴

Vue.js は React と並び人気の高い UI フレームワークで，HTML + CSS + JavaScript の知識が活かせるのが特徴である。仮想 DOM やコンポーネント指向など他の UI フレームワークと設計思想での共通点があるほか，機能ごとに一つの vue ファイルにまとめられるなど，開発効率の高さも利点である。

Vue の設計思想は「プログレッシブフレームワーク」である。この思想は，簡単に始めることができ，段階的により複雑な機能が提供されることを表している。プロジェクトに開発初期においては，必要最小限の学習コストですぐに試すこともできる。

国内では SPA や小規模な Web サービスで用いられているケースが多く，他のライブラリなどを併用することで多くのケースに対応できる。日本語の情報も比較的充実しているため，JavaScript や TypeScript の初心者でも取り組みやすいこともメリットである。

React と Vue.js に向いているサイト

Web サイトに高度な機能を実装する React と Vue.js は，全てのサイトに向いているわけではない。React と Vue.js に向いているサイトとして，以下の例が挙げられている。

中長期に運用されて，多くの動的な情報が蓄積・表示されるサイト
UI/UX にこだわりたいサイト
SaaS や管理画面のようなビジネス活用サイト
画面を多く遷移する EC や SNS のほか高機能な Web サービスのサイト

API を操る React と Vue.js

ヘッドレス CMS のような，新しいタイプのバックエンドにおいて，フロントエンドとバックエンドの分離が実現した。フロントエンドとバックエンドをつなぐ API，これをフロントエンドから呼び出して扱ったり，カスタムして利用する際に使われるのが，React や Vue.js のような JavaScript フレームワークである。