フロントエンドの開発においては「HTML」「CSS」「Javascript」が基本的に利用されています。この3つさえ理解すれば、ある程度のものは作れるようになりますが、もっと質の良いものを、もっと早く効率的に開発ができるようになるためにはフレームワークやライブラリの活用が必須です。しかし、JavaScriptのフレームワークやライブラリの数は、開発者の数よりも多いと言われるほど。どれを選んだらよいか悩みがちです。今回は、特に人気で利用者の多いものをピックアップして、それぞれの特徴や市場価値を分析してご紹介します。自分に合うものを選ぶ際の参考にしてみてください。
そもそも「フロントエンド」って何？
一般的に、システム開発においては「フロントエンド」と「バックエンド」に分けて開発が進められます。フロントエンドとは、操作画面など、ユーザーの目に触れたり、直接操作したりする領域を指します。ちなみに、バックエンドは、ユーザーの目に触れない領域のことです。データの処理や保存、セキュリティなど、システムの裏側の管理を担っています。
例えば、Webサイトの画像の配置や文字の装飾、ボタンの色や大きさ、スクロールに伴う動きなどは全てフロントエンド側で作っているのです。ここで主に使われているのは、HTML、CSS、JavaScriptです。今回は、その中でもJavaScriptのフレームワークとライブラリの選択について、ピックアップしてご紹介します。
「フレームワーク」「ライブラリ」とは？
「フレームワーク」と「ライブラリ」は、開発において欠かせない重要な存在です。役割は全く異なるものなのですが、混同されがちで、何がどう違うのかあいまいな人もいるので、ここでしっかり押さえておきましょう。
フレームワークは、開発をするために必要な機能がデフォルトで揃っているものです。すでに土台となる部分ができているので、別途プログラムを書かなくても動作します。そこに足りないものを開発して補っていく形で活用され、ゼロから開発をする必要がなくなるので効率的に開発を行うことができます。
ライブラリは、作業を簡略化するために使用できる予め書き込まれたプログラムの集まりです。繰り返し使用ができるパーツのようなもので、単体で動くことはありません。部品がたくさん入っている工具箱から、使いたいものを借りてくるようなイメージです。
各言語・技術の市場価値は？
今回は、jQuery React.js Vue.js Angularをピックアップし、それぞれの特徴や求人数、年収範囲、具体的な導入事例を紹介します。また、求人数や年収範囲は「Green」「Wantedly」「type」で検索した結果にもとづいています（2024年12月13日現在）。
jQuery
Web系の技術発展に大きく貢献した世界標準のJavaScriptライブラリです。以前は使いにくかったJavaScriptの標準APIを補完するライブラリとして爆発的に流行しました。異なるブラウザでも動作し、プラグインで簡単に拡張することができます。エンジニアスタイルマガジン「jQueryとVue.jsの違いとは？特徴・使用率・年収を紹介」によれば、国内では67.9%、海外では44.2%のサイトで使用されているといいます。
特徴
・非同期通信Ajaxが手軽に使え、再読み込みをしなくても表示内容を変更できる
・jQueryの読み込みや無駄な処理が発生し、処理が遅くなることがある
・他のライブラリと共存できない
求人数
Green：830件 ※うち106件(12%)が業界未経験歓迎
Wantedly：8,918件
type：66件
年収範囲
216~1,150万円以上
学習難易度
JavaScriptをすでに習得している人は比較的簡単に習得できます。
導入事例
ポケットモンスターオフィシャルサイト
https://www.pokemon.co.jp/
[参考]
jQueryでできることとは？基本的な書き方や勉強法も紹介
https://hnavi.co.jp/knowledge/blog/jquery/
jQueryとVue.jsの違いとは？特徴・使用率・年収を紹介
https://engineer-style.jp/articles/10056
React.js
Facebook社によって開発されたJavaScriptのライブラリです。Webサイト上のUIパーツを簡単に構築することができます。コーディングのコストが少なく、開発規模が大きくても管理しやすいため、今や世界中のWebサービスで数多く採用され、日本でも人気が高まってきています。
特徴
・仮想DOMという仕組みにより、読み込みや実行が速い
・ロジックとUIを持つ構成要素（コンポーネント）を組み合わせて作るため、カスタマイズがしやすい
・柔軟性が高く、管理しやすいため大規模なアプリケーション開発に向いている
求人数
Green：1,182件 ※うち491件(41%)が業界未経験歓迎
Wantedly：22,716件
type：280件
年収範囲
240~1,500万円以上
学習難易度
JavaScriptをすでに習得している人は比較的簡単に習得できます。
導入事例
[参考]
Reactとは？フレームワークとの違い・フロントエンド開発に活用するメリットや特徴を解説！
https://www.webstaff.jp/guide/trend/webit/react/
React.jsとは─人気のJavaScriptライブラリに迫る
https://kinsta.com/jp/knowledgebase/what-is-react-js/
Vue.js
UIを構築するためのJavaScriptフレームワークです。シンプルで自由度が高く、ほかの開発ツールと組み合わせやすいため、現在人気が高まっています。幅広い機能を提供していることに加えて、Vue.jsをベースにした各分野向けのフレームワークが数多く存在するため、Web開発だけでなく、さまざまな開発分野に活用できます。
単一のWebページ上で動作するアプリケーション（SPA）向きであることや、データ管理が煩雑になったり、コンポーネントが多いページだと動作が重くなったりする可能性があるため、大規模な開発には向かないのがデメリットです。
特徴
・JavaScriptライブラリと併用でき、柔軟性が高い
・シンプルな設計で拡張性が高い
・学習コストが低く、jQueryから移行しやすい
求人数
Green：1,371件 ※うち614件(44%)が業界未経験歓迎
Wantedly：14,951件
type：208件
年収範囲
216~2,000万円
学習難易度
Vue.jsはフレームワークとしては規模が小さく設計がシンプルであるため、覚えるべき知識が少なく、学習コストをおさえられます。また、Vue.jsはHTMLに近い記述ができることから、ReactやAngulerよりも理解しやすいと感じる方も多いでしょう。
導入企業例
ルイ・ヴィトン
ARIGATO! 10 | メルカリ10周年特設サイト
[参考]
Vue.jsとは？特徴やできること、メリット、注意点などを解説
https://career.levtech.jp/guide/knowhow/article/721/
Vue.jsとは、どんなことができるフレームワーク？特徴と勉強方法をカンタン解説【入門編】
https://www.webstaff.jp/guide/trend/webit/vuejs/
Vue.jsとは？できることや利用するメリット・デメリットも解説
https://www.sejuku.net/blog/10766
Vue.js
https://cwt.jp/category/47
Angular
Google社が開発したJavaScript フレームワークです。単一のWebページ上で動作するアプリケーション（SPA）を開発するのに最適で、また他のフレームワークに比べて機能が豊富なため、大規模なアプリケーション開発にも適しています。
「AngularJS」という似た名前のものがあります。AngularJSの後継として生まれたのがAngularで、機能を引き継いでいる部分があるものの、互換性のない全く別のフレームワークです。また、AngularJSはJavaScriptを、AngularはTypeScriptをベースにして作られています。
特徴
・「Angularが用意した機能を全て使いこなせれば他の技術は不要」とも言われるほどフルスタック
・全てのプラットフォームに対応しているため、動作端末を考慮する必要があまりない
・フルスタックである分、不要な機能をなくすことが難しく、他のフレームワークへの切り替えが難しい
求人数
Green：702件 ※うち95件(13%)が業界未経験歓迎
Wantedly：3,506件
type：105件
年収範囲
260~1,500万円以上
学習難易度
機能が豊富で、他フレームワークにない独自の設計や用語もあるため、学習コストが高いと言えます。
導入企業例
[参考]
【初心者向け】Angular とは？メリット・基本をわかりやすく解説
https://www.kagoya.jp/howto/it-glossary/develop/angular/
トレンド調査
ダウンロード数のトレンドが見られる「npm trends」で、それぞれのダウンロード数の推移と直近1年の傾向を確認してみます。
まず、jQueryとReact.jsです。React.jsの方が2倍程度ダウンロードされている状態が続いていますが、どちらもゆるやかに右肩上がりになっています。
続いて、AngularとVue.jsです。こちらは時間が進むにつれて少しづつ差が開いており、現在は倍程度ダウンロード数に差が出ています。また、Vue.jsの方が若干右肩上がりになっています。
ライブラリとフレームワークでは用途が違いますが、ダウンロード数では桁が違うことにも注目です。さらに、GitHubのStar数ランキングも見てみましょう。
https://gitstar-ranking.com/repositories
1位の「freeCodeCamp/freeCodeCamp」は、React.jsが活用されています。この結果からも、ダウンロード数を見ても、世界中で人気が高いことがうかがえます。
まとめ
今回は、数あるフレームワーク・ライブラリのうちjQuery、React.js、Vue.js、Angularをピックアップしてご紹介しました。それぞれ似ている部分はあるものの、向き不向きがあり、求人数も異なります。
・そもそも、フレームワークとライブラリのどちらを使うのか
・どのくらいの規模の開発をしたいか
・学習にどれくらい時間（コスト）をかけられるか
といった観点から、使うものを選んでみるのが良いでしょう。ただ、どれもJavascriptというベースが同じなので、いろいろと使ってみて見ても良いかもしれませんね。今回ご紹介したJavascriptのもの以外にも、様々なフレームワークとライブラリがあるので、是非調べてみてください。使えるようになっていけば、効率的な開発を助けてくれ、キャリアも後押ししてくれる存在になるでしょう。
[参考]
【解説】フレームワークとライブラリの違い
https://zenn.dev/nameless_sn/articles/framework_and_library
JavaScriptフレームワークまとめ（React・Angular・Vue比較）
https://www.offshore-kaihatsu.com/contents/general/javascript-hikaku/
