フロントエンド

マークアップ言語

• html
• css(マークアップ言語)

※　その他　xhtml,xmlなどなど

※　CSSへの変換使用を前提として管理しやすいSASS、SCSS

ブラウザで動作するスクリプト言語

• Javascript

※補足としてnode.jsはサーバーサードJSとしてサーバー側で動作する。

javascriptに変換されるAltJS言語

jsはクライアントサイドで実行される物と

• Typescript
• Dart
• CoffeeScript ・・・

この分野は非常に数が多いが最近はTypescript一択でも問題ないかもしれない。

他の言語への対応も・・・

• DartはFlutterで利用されている。アプリを開発する意味では有用

• Haxe

かなり色々な言語に変換ができる為、面白い存在ではある。

HAXE

UIフレームワーク・ライブラリ

素のJavaScriptやjQueryに代わり、現代の主流となっているコンポーネント指向のライブラリ群。

• React
  • 現在のデファクトスタンダード。Facebook（Meta）製。エコシステムが最大。
• Vue.js
  • 初学者に優しく、日本でも人気が高い。HTML/CSS/JSを分けて書きやすい。
• Svelte
  • 仮想DOMを使わず、ビルド時にコードを最適化するため動作が高速。
• Angular
  • Google製。フルスタックな機能を持つが、学習コストは高め。

メタフレームワーク（SSR/SSG）

上記のUIライブラリをベースに、SEO対策や表示速度向上（SSR/SSG）を容易にするフレームワーク。

• Next.js (Reactベース)
• Nuxt (Vue.jsベース)
• Astro (コンテンツ重視・高速)

バンドラ・ビルドツール

TypeScriptやSASSなどをブラウザが理解できる形式に変換・バンドルするためのツール。

• Vite
  • 現在の主流。非常に高速な開発体験を提供。
• Webpack
  • 長らく標準だったツール。設定が複雑だが、細かな制御が可能。

WebAssembly (Wasm)

JavaScript以外の言語をブラウザ上で高速に動作させる技術。

• Rust / C++ / Go
  • 画像処理、計算処理、ゲームエンジンなど、JSでは重い処理をこれらの言語で記述し、Wasmとしてブラウザで動かす。

まとめ

現在のフロントエンド開発の主流なスタック構成例：

HTML/CSS + TypeScript + React (Next.js) + Vite