// シス担のミカタ
Webフロントエンド - 基礎

JavaScript じゃばすくりぷと

スクリプト言語ブラウザDOM操作ECMAScriptNode.jsフロントエンド
JavaScriptについて教えて

簡単に言うとこんな感じ！

Webページに「動き」をつける言語だよ！ボタンを押したらメニューが開いたり、フォームの入力チェックがリアルタイムで走ったり、あの「インタラクティブな感じ」はほぼJavaScriptのおかげなんだ。HTMLが「骨格」、CSSが「見た目」なら、JavaScriptは「筋肉・神経」ってこと！

JavaScriptとは

JavaScript（JS） は、Webブラウザ上で動作するプログラミング言語で、Webページに動的な振る舞いを加えるために使われます。HTMLとCSSがページの「構造」と「見た目」を担うのに対し、JavaScriptはユーザーの操作に反応したり、データを取得・更新したりといった「ふるまい」を担います。

JavaScript最大の特徴は、ブラウザに標準で組み込まれていることです。Chrome・Edge・Safari・Firefoxなど、現代のすべての主要ブラウザがJavaScriptエンジンを内蔵しており、プラグインや追加インストールなしに動作します。これがWebの世界でここまで普及した最大の理由です。

さらに近年は Node.js というサーバーサイド実行環境の登場により、Webサーバーの構築やコマンドラインツールの開発にもJavaScriptが使われるようになりました。フロントエンド（ブラウザ側）とバックエンド（サーバー側）を同一の言語で書けるという強みから、現代のWeb開発においてほぼ避けて通れない存在となっています。

JavaScriptの基本的な役割・仕組み

役割具体例
DOM操作ボタンを押すと要素が表示・非表示になる
イベント処理クリック・スクロール・キー入力に反応する
非同期通信（Ajax）ページを再読み込みせずにデータを取得・更新する
フォームバリデーション送信前に入力内容をリアルタイムでチェックする
アニメーション要素をなめらかに動かす・フェードさせる
API連携地図・SNS・決済などの外部サービスと連携する

覚え方：「Java」とは別物！

よく混同されますが、JavaとJavaScriptは全くの別言語です。名前が似ているのは歴史的な商業的理由によるもので、技術的な関係はほぼありません。「インドとインドネシアくらい違う」と覚えておくとよいでしょう。

ブラウザ上でのJavaScriptの動き方

HTML読み込み
    ↓
ブラウザがJavaScriptを解釈・実行
    ↓
DOMツリー（ページ構造）を書き換え
    ↓
ユーザーに変化が見える

歴史と背景

  • 1995年：Netscape社のブレンダン・アイクがわずか10日間で設計・実装。当初の名前は「Mocha」→「LiveScript」→「JavaScript」と変遷
  • 1996年：MicrosoftがInternet Explorer向けに「JScript」として独自実装。ブラウザ間の互換性問題が始まる
  • 1997年：標準化のため ECMA International に仕様を提出し、ECMAScript（ES） として標準化される
  • 2005年：AjaxというJSの非同期通信手法がGoogleマップ等で注目を浴び、「動的なWeb（Web 2.0）」ブームへ
  • 2009年：Node.js が登場。サーバーサイドでもJSが使えるようになる
  • 2015年：ES2015（ES6） で大幅な言語機能強化（アロー関数・クラス・モジュールなど）。以降毎年更新
  • 2020年代：React・Vue・Angularなどのフレームワークが普及し、大規模Webアプリ開発の主役に

フロントエンド開発における位置づけ

HTMLとCSS、JavaScriptの三者関係と、主要なフレームワーク・実行環境の関係を整理します。

Web開発におけるJavaScriptの位置づけ HTML 構造・骨格 CSS 見た目・スタイル JavaScript 動き・ふるまい JavaScriptを拡張 フレームワーク・ライブラリ React / Vue / Angular / Svelte … 実行環境 ブラウザ（フロントエンド） Chrome / Firefox / Safari … Node.js（サーバーサイド） APIサーバー / CLIツール … 標準仕様 ECMAScript（毎年改訂） ← ECMA International が策定

主要フレームワーク比較

フレームワーク開発元特徴向いている用途
ReactMeta（Facebook）コンポーネント指向、エコシステム最大大規模SPA・採用企業多い
VueEvan You（個人→コミュニティ）学習コストが低め・日本語情報豊富中小規模・既存HTMLへの組み込み
AngularGoogle大規模向け・型安全・フルスタックエンタープライズシステム
SvelteRich Harrisビルド時にJS生成・軽量パフォーマンス重視の小〜中規模

関連する規格・RFC

規格・RFC番号内容
ECMA-262JavaScriptの言語仕様「ECMAScript」の本家標準。毎年6月に改訂版が公開される
RFC 9239JavaScriptファイルのMIMEタイプを text/javascript と定めるIETF RFC

関連用語

  • HTML — Webページの構造・骨格を記述するマークアップ言語
  • CSS — Webページの見た目・デザインを定義するスタイルシート言語
  • DOM — JavaScriptからHTMLを操作するためのドキュメント構造モデル
  • Ajax — ページ再読み込みなしにサーバーとデータをやり取りする技術
  • Node.js — JavaScriptをブラウザ外（サーバー等）で実行するための環境
  • TypeScript — JavaScriptに型定義を加えた、Microsoftが開発した言語
  • ECMAScript — JavaScriptの標準仕様。ECMA Internationalが策定
  • フロントエンド — ブラウザ上で動作するWeb開発の領域全般