JavaScriptのフレームワークの違いについて

この記事では、テクニケーションのエンジニアである私が、JavaScriptのフレームワークの違いについて詳しく解説していきます。フロントエンドのプログラマとして駆け出しのエンジニアの方々に読んでいただきたいです。

自己紹介

まずは私の簡単な自己紹介をしていきたいと思います。金融系のWebアプリケーション開発を中心に約8年間SEとして従事し、フロントエンド（JavaScriptやJSP、Thymeleaf）からバックエンド（Java）まで一通りの経験をしてきております！

そもそもJavaScriptとは？

非同期通信で画面操作に動きを持たせるための言語でページ遷移がないため、サーバとのやりとりを発生させずに画面に動きを与えられます。

一般的に使用されているJavaScriptのフレームワーク

・jQuery
・Vue.js
・React
・Angular

上記には聞きなじみのあるフレームワークもあるかもしれません。この他にも様々なフレームワークがあり（Riot.jsやBackbone.jsなど）、混乱する可能性があるので、ここでは有名どころのフレームワークのみ違いを記載していきます。

jQuery

jQueryは、JavaScriptフレームワークの中でも古いですが、今でもその扱いやすさから最も使われているフレームワークの1つです。短いコード量でUIを形成することが可能で、複雑なコード生成が不要です。私の肌感ですが、金融系のWebアプリケーション開発にjQueryが今でも多く使われているイメージです。

Vue.js

Vue.jsは文法がHTMLに似ており、HTMLを書くプログラマであればとっつきやすいフレームワークです。そのため、他のフレームワークと比べるとシンプルでscriptタグを1行追加するだけで良いので手軽に記載することがメリットとなります。

また、拡張性が高いことも特徴の一つで、他のライブラリと組み合わせて使用することが出来ます。例えば他のライブラリを使用していて「不足分を補いたい」と思ったときに、このVue.jsを組み合わせて使用することが出来ます。

React

Reactは、宣言的に記載することが出来ます。宣言的とは行いたい処理を直接書くことです。そのため、可読性が向上し、もし、バグ改修などを第三者が行うことになったとしても原因を突き止めやすくなります。

また、コンポーネントベースで記載することができ、各コンポーネント（ボタン・テキストボックス・チェックボックスなど）をUIの一つのパーツとして見立てることが出来ます。メリットとしては各コンポーネントが独立しているため、「このボタンだけ改修したい！」と思った時、他のコンポーネントに影響を与えないので、特定のコンポーネントを改修するだけで実現できます。そのため、テスト工数も削減できます。

日本ではまだ導入している企業が少ないのですが、世界的に見るとReactが圧倒的な人気を誇っています。

Angular

Angularだけは、少し先述のフレームワークと毛色が違いますが、頻出フレームワークなので記載します。AngularはJavaScriptの上位互換であるTypeScriptで使用されるフレームワークです。ただ、JavaScriptとTypeScriptは互換性があるため、JavaScriptを利用するWebアプリケーションはTypeScriptで開発可能です。Angularには、Webアプリケーションの開発に必要な全ての機能が揃っています。

また、アプリケーションを「Model（モデル）」、「View（画面）」、「Controller（コントローラー）」に分けて開発する「MVC」という考え方を採用しているため、それぞれが分割した形で開発することができます。よくAngularJSと間違えられますが別物です。AngularJSは「JavaScriptのフレームワークに対して」で、Angularは先述の通り「TypeScriptに対してのフレームワーク」です。

まとめ

いかがだったでしょうか。現場が採用している開発環境によって違うので、一概には言えませんが、そのプロジェクトにあったフレームワークを採用し、エンジニアの負担が少しでも軽減される開発環境にするべきだと思っています。