はじめに

現在、JavaScript フレームワークは大戦国時代を迎えている（らしい）。今回はフロントエンド初心者が人気のフレームワークである React と Angular、Vue.js について特徴を簡単にまとめてみました。今回は初心者が初心者に向けて書く記事ですのであえてそれぞれのフレームワークについて 3 つのキーワードに絞って説明していきたいと思います。詳しい説明はググればたくさん出てくると思いますので他の記事に任せます。

フレームワークとは

フレームワークとは読んで字の如く JavaScript についての枠組みを提供してくれるものです。提供されているテンプレートやライブラリを用いることでコーディングを簡略化することができます。しかし、JavaScript の勉強に加え、フレームワークの勉強も必要であるというデメリットもあります。

React

仮想 DOM

React では仮想 DOM という技術が使われていています。簡単に言うと DOM を更新する際に現在の DOM との差分を計算し、効率よく表示を行ってくれるというものです。

JSX

JSX は JavaScript の拡張版です。HTML のようなタグを埋め込むことができたり、CSS のようなスタイルも記述することができます。これは HTML と JS と CSS を一つのコンポーネントという単位で管理すべきであるという設計思想に則っています。

Learn Once, Write Anywhere

React は一度学んでしまえば Web アプリケーション以外の様々なところでも使うことができます。モバイルアプリ開発では React Native というフレームワークを使えば android、iOS に対応したネイティブアプリを作ることができます。VR 開発では React VR というものもあります。

Angular

フルスタック

React や Vue はフレームワーク自体にはそれほど機能が揃っておらず、必要になったらライブラリを追加して使用するという方法をとっていますが、Angular は最初から必要な昨日は殆ど揃っているのでライブラリを調べたり選定する手間が省けます。

TypeScript

JavaScript を拡張した TypeScript を採用しています。ソースコードが簡素になることや型定義をすることでコード補完ができるようになるなどのメリットがあります。

RxJS

Reactive Extensions for JavaScript の略で非同期処理を簡潔に書くことができるライブラリです。Angular では標準で使えます。Angular は RxJS に限らず、最新の JS 技術を積極的に採用しています。

Vue.js

双方向バインディング

簡単に言うと HTML と JS のどちらからでも値を変更することができる仕組みのことです。双方向でない場合、画面で入力した値を表示するためには ① 変更イベント受け取り →② 画面から値を取得 →③ 表示する値を変更という一連の処理が必要です。しかし双方向バインディングを使用するとこれらの値の紐付けを簡単に行うことができます。

Single File Component

これは .vue という拡張子のファイルに HTML・CSS・JS をまとめて書けるしくみです。これだけを聞くと React の JSX と同じように感じるかもしれませんが、同一ファイル内でそれぞれの記述は完全に独立しているという点で JSX とは異なります。

公式ドキュメントが日本語対応

Vue の公式ドキュメントは日本語に完全対応しています。他のフレームワークは英語のみか、不自然な翻訳が多い中、非常に読みやすくて助かります。

おわりに

いかがだったでしょうか。簡単ではありますが人気の JS フレームワークをキーワード 3 つで説明してみました。それぞれに異なる特徴があるので、プロジェクトの状況に応じて好みのフレームワークを選んでみてください。