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

前置き

※ この記事は、AI全盛期において、敢えて基本に立ち返った技術要素を知ることを目的にしています。

• この記事は、ソフトウェア初学者向けに全体像をつかむことを目的にした解説です。
• 理解しやすさを優先するため、細かな例外や厳密な定義は一部省略しています。
• 個々の技術の詳細や最新動向は、各公式ドキュメントで補完してください。

この記事でわかること（概要）

• フロントエンドの技術を「3つの層」で分類した地図
• ReactやTypeScriptなどの有名な技術が、地図のどこに位置するか
• 「結局ブラウザで動くのはHTML・CSS・JavaScriptだけ」という原則

この記事の要点

• ブラウザが直接理解できるのは、今もHTML・CSS・JavaScriptの3つだけです。
• それ以外の技術は、最終的にこの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 などが代表例です。

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

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

勘違いしやすい解釈

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

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

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

実際の業務で押さえておきたいポイント

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

まとめ

• ブラウザが直接理解できるのは、HTML・CSS・JavaScriptの3つだけです。
• その他の技術は「変換して使う技術」か「フレームワーク/ライブラリ」で、最終的に標準技術の形になってブラウザに届きます。
• 次回は、ブラウザの内部でこれらがどう動くのか、アーキテクチャ的な仕組みを見ていきます。

備考

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

関連リンク

• 前回: フロントエンドとは何者か？（ブラウザの中で動くプログラム）
• 次回: フロントエンドのちょっと詳しいアーキ的な仕組み（レンダリングとSPA/MPA）（公開後にURL追記）
• 関連: プログラミング言語の基本的な違い - 実行方式でざっくり理解する