フロントエンドの技術の種類 - WEBブラウザで動く技術紹介

技術名を3つの層に分ける

フロントエンドは技術名が多く、ReactやTypeScriptを調べ始めると、それがブラウザで直接動くものなのか、変換して使うものなのか分かりにくくなります。ここでは、ブラウザに届くまでの層で整理します。

個々の技術の詳細や最新動向は変わるため、採用時は各公式ドキュメントも確認してください。

先に結論

• 一般的なWeb画面の土台は、HTML・CSS・JavaScriptです。
• それ以外の技術は、最終的にこの3つへ「変換」されてからブラウザに届きます。
• 技術の名前を覚えるより、「どの層の技術か」を判別できることが重要です。

ブラウザに届くまでの3つの層

フロントエンドの世界は技術の名前が多く、初学者が最初に圧倒されやすい領域です。
ただ、次の3層に分けて見ると、ほとんどの技術は地図のどこかに置けます。

層	役割	代表的な技術
1. 標準技術	ブラウザが標準で扱う画面の土台	HTML、CSS、JavaScript
2. 変換して使う技術	書きやすい形で書いて、標準技術に変換する	TypeScript、Sass など
3. フレームワーク/ライブラリ	画面を効率よく組み立てるための道具一式	React、Vue.js、Angular、jQuery など

ポイントは、2層目も3層目も、最終的には1層目の形になってブラウザに届くということです。

1層目：標準技術（HTML・CSS・JavaScript）

前回の記事で整理した3つの言語です。ブラウザが直接解釈できるのは、この3つだけです。

どんなに新しい技術が流行しても、この3つの理解が土台になります。
フレームワークの学習で行き詰まったとき、原因が実は標準技術側の理解不足だった、というのは非常によくあるパターンです。

2層目：変換して使う技術

「標準技術のままだと書きにくい・間違えやすい」という課題を解決するために、より書きやすい言語で書いて、標準技術に変換してから使うという発想の技術群があります。

• TypeScript: JavaScriptに型の仕組みを足した言語です。変換するとJavaScriptになります。大規模開発で間違いを早く見つけやすくなります。
• Sass（SCSS）: CSSを書きやすくした言語です。変換するとCSSになります。変数や入れ子構造が使えます。

この「変換」の作業はビルドと呼ばれ、専用のツールが自動で行います。
「開発中に書いているファイル」と「ブラウザに届くファイル」が別物になる、というのがこの層の特徴です。

3層目：フレームワーク／ライブラリ

JavaScriptで画面を組み立てる作業を、効率よく・整理された形で行うための道具一式です。

• React: 現在広く使われているライブラリです。画面を「部品（コンポーネント）」の組み合わせで作ります。
• Vue.js: 学習しやすさに定評のあるフレームワークです。こちらも部品ベースで画面を作ります。
• Angular: 大規模開発向けの機能がひと通り揃ったフレームワークです。
• jQuery: かつて主流だったライブラリです。新規開発で採用されることは減りましたが、既存システムでは今も現役で動いています。

これらは「JavaScriptとは別の言語」ではありません。JavaScript（やTypeScript）で書かれ、JavaScriptとして動く道具です。

代表的な技術の利用度（ざっくり）

「どれがよく使われているのか」は、学ぶ順番を考えるときの参考になります。おおまかな傾向は次のとおりです。

技術	種類	利用の広がり（めやす）
React	ライブラリ	最も広く使われている
Vue.js	フレームワーク	広く使われている
Angular	フレームワーク	大規模開発を中心に根強い
Svelte	フレームワーク（新興）	満足度が高く、少しずつ拡大
jQuery	ライブラリ（旧世代）	新規採用は減少、既存システムで現役

数値は調査や年によって変わるため、順位そのものより「今の主流はReact系で、Vue・Angularが続く」という大まかな地図として捉えてください。

この傾向は、Stack Overflow Developer Survey 2025やState of JS 2024などの開発者調査をもとにした概観です。調査や年によって数値は変動します。

補足：無料の技術と有料の技術

ここで紹介したReact・Vue.js・Angularは、いずれも無料で使えるオープンソース（OSS） です。フロントエンドの主要な技術は、基本的に無料で始められます。

一方で、業務では有料のUIライブラリ／コンポーネント集が使われることもあります。高機能なデータ表・グラフ・帳票などをまとめて提供するもので、AG Grid（Enterprise版）、Kendo UI、Sencha Ext JS などが代表例です。

• フレームワーク本体は無料でも、周辺の高機能な部品にライセンス費用がかかるケースがある、という点は知っておくと安心です。
• 「有料だから高性能」「無料だから低品質」という単純な話ではなく、サポート体制や業務要件に合わせて選ばれます。

技術がブラウザに届くまで（図）

ここまでの3層を、ブラウザ画面を作る材料と開発を助ける道具の関係として見ます。

勘違いしやすい解釈

• 「ReactやVueは新しいプログラミング言語」ではありません。
  JavaScriptで作られた道具です。動く場所も、動く形も、JavaScriptです。

• 「フレームワークを覚えれば標準技術は不要」ではありません。
  フレームワークは標準技術の上に載っています。エラーの原因を追うと、最後はHTML・CSS・JavaScriptの世界に降りていくことになります。

• 「jQueryは古いから学ぶ価値がない」とも言い切れません。
  既存システムの保守では今もよく登場します。業務で触る可能性がある技術は、立ち位置だけでも知っておくと安心です。

技術選定や不具合調査で意識すること

• 新しい技術の名前を聞いたら、まず「3層のどこに位置する技術か」を確認する癖をつけると、混乱しにくくなります。
• 配属先のプロジェクトで使われている技術を、この3層に当てはめて書き出してみると、学ぶ順番の見当がつけやすくなります。
• エラー調査では、「フレームワークの層の問題か」「変換（ビルド）の問題か」「標準技術の層の問題か」で切り分けると、調べる場所を絞れます。

まとめ

• 一般的なWeb画面の土台は、HTML・CSS・JavaScriptです。 WebAssemblyのようにブラウザで実行できる別形式もありますが、DOMを使った画面構築ではこの3つが中心です。
• その他の技術は「変換して使う技術」か「フレームワーク/ライブラリ」で、最終的に標準技術の形になってブラウザに届きます。
• 次回は、ブラウザの内部でこれらがどう動くのか、アーキテクチャ的な仕組みを見ていきます。

備考

• ブラウザで動く技術として、近年はWebAssembly（WASM）という仕組みもあります。C++やRustなどで書いたプログラムを変換してブラウザ上で高速に動かすもので、「第4の標準技術」と呼ばれることもあります。画像処理やゲームなど計算量の多い処理で使われますが、通常のWEBアプリ開発ではまず3層の地図で十分です。

関連リンク

導線	記事
前の記事	フロントエンドとは何者か？
全体目次	シリーズ全10回の一覧
次の記事	レンダリングとSPA／MPA

補足として、言語そのものの違いはプログラミング言語の基本的な違いで整理しています。

技術仕様の補足は、MDN Web Docs: WebAssemblyも参照してください。