JavaScriptとは？Web を動かす言語を基礎から解説

JavaScriptとは? Webを動かす言語

JavaScriptは、Webブラウザの中で動くプログラミング言語です。ページ上でクリックに反応したり、フォームの入力をチェックしたり、メニューをアニメーションさせたり、リロードなしで新しいコンテンツを読み込んだり——こうした動きはすべてJavaScriptが担っています。あらゆるデバイスのあらゆるブラウザにはJavaScriptエンジンが標準で組み込まれており、Web上でネイティブに動く唯一の言語と言ってもいいでしょう。

今ではブラウザの外でも動きます。Node.jsやDeno、Bunを使えば、サーバー、コマンドラインツール、ビルドスクリプト、APIまでJavaScriptで書けてしまいます。フロントエンドもバックエンドも同じ言語で書ける——これがJavaScriptがここまで広く使われている大きな理由のひとつです。

ちょっとだけ、JavaScriptがどんな見た目なのか覗いてみましょう。

3行でアイデアが3つ。変数を宣言して、組み込み関数を呼び出して、テンプレート文字列を出力する。この3つは、実際のJavaScriptコードのどのページを開いても必ず目にする基本です。

JavaScriptはどこで動くのか

JavaScriptそのものは言語仕様(ECMAScriptと呼ばれるもの)にすぎません。実際にコードを動かすには、コードを読み取って実行してくれる エンジン が必要です。よく出会うのは次の2つ。

• ブラウザ。 ChromeとEdgeはV8、FirefoxはSpiderMonkey、SafariはJavaScriptCoreを使っています。適当なページを開いてF12を押し、ConsoleタブにJavaScriptを貼り付ければ、その場で実行されます。
• Node.js。 V8をブラウザの外に取り出して、ファイルシステム・ネットワーク・OSにアクセスできるようにしたものです。これのおかげで、サーバーサイドでJavaScriptを書けるようになりました。

// ブラウザのコンソールで実行:
document.title = "新しいタブのタイトル";

// Node.js で実行:
// $ node script.js

ブラウザ上のJavaScriptはページ（DOM）を操作できますが、ファイルシステムには触れません。一方、Node.jsのJavaScriptはファイルを読んだりソケットを開いたりできますが、操作するページがありません。同じ言語でも、使える「超能力」はまったく別物というわけです。

JavaScriptの使い方：何に使われているのか

ざっくり言えば、Webが絡む場面ではほぼ何にでも。もう少し詳しく、普段よく目にする順に並べてみます。

• インタラクティブなWebページ。フォームのバリデーション、ドロップダウン、モーダル、インクリメンタルサーチ、ドラッグ＆ドロップなど。
• シングルページアプリケーション（SPA）。Gmail、Figma、Notion、Linearなど、アプリ全体がJavaScriptで描画・更新されるもの。たいていReactやVue、Svelteといったフレームワークが使われています。
• バックエンドサーバー。Node.jsにExpress、Fastify、NestJSなどを組み合わせて、REST APIやGraphQLエンドポイント、リアルタイム通信サービスを構築できます。
• ビルド・開発ツール。バンドラー（Vite、esbuild、webpack）、リンター（ESLint）、テストランナー（Vitest、Jest）など。
• クロスプラットフォームアプリ。Electronで作るデスクトップアプリ（VS Code、Slack、Discord）や、React Nativeで作るモバイルアプリなど。

初日から全部を知っておく必要はありません。ただ「こういう世界がある」と頭に入れておけば、「ただのJavaScript」という言葉が物足りなく感じることもなくなるはずです。

JavaScriptはどうやって動くのか

ごく単純化したイメージで言うと、書いたソースコードをエンジンがパースして内部表現に変換し、それを実行していく、という流れです。最近のエンジンはJIT（ジャストインタイム）コンパイルを採用しており、まずはさっとインタプリタとして動き出し、実行中にホットパス（頻繁に通る処理）を機械語に最適化していきます。

JavaScriptは、配布前にバイナリへコンパイルしておく必要がありません。ソースコードをそのままブラウザ（またはNode）に渡せば、あとはエンジンがよしなに処理してくれます。

ブラウザのコンソールに貼り付けるもよし、greet.js として保存して node greet.js で実行するもよし。どちらでも結果は同じです。これくらいの簡単なコードなら、コンパイルもビルド設定もインストールも一切いりません。

JavaScriptとJavaの違い

名前は似ていますが、中身はまったくの別物です。1995年当時に大人気だったJavaにあやかろうというマーケティング上の理由で「JavaScript」と名付けられた経緯があり、おかげで初心者を混乱させ続けています。

	JavaScript	Java
型付け	動的型付け	静的型付け
実行環境	ブラウザ、Node.js	JVM
パラダイム	マルチパラダイム、プロトタイプベース	クラスベースのオブジェクト指向
コンパイル	JIT、ビルド不要	バイトコードへのコンパイルが必要

もし誰かに「Javaをやったことあるから、JavaScriptもできるよ」と言われたら、それは勘違いです。たまたま頭4文字が同じなだけの、まったく別の言語だと思ってください。

JavaScriptとTypeScriptの違い

TypeScriptは、JavaScriptに型システムを後付けしたものだと考えると分かりやすいです。型注釈を付けてコードを書き、TypeScriptコンパイラが型チェックを行い、最終的には普通のJavaScriptコードが出力されます。あとはJavaScriptが動く環境ならどこでも実行できます。

// JavaScript — 型は暗黙的:
function add(a, b) {
    return a + b;
}

// TypeScript — 型は明示的:
function add(a: number, b: number): number {
    return a + b;
}

有効な JavaScript ファイルはすべて、そのまま有効な TypeScript ファイルでもあります。つまり、TypeScript は JavaScript のライバルではなく、スーパーセット(上位互換) なんですね。いまどきの大規模なコードベースはほぼ TypeScript で書かれていますが、学ぶ順番としては JavaScript が先で正解です。そもそも「何に対して型を付けているのか」がわからないと、TypeScript の役割は理解できませんから。

ちょっとした歴史 — クセの理由がわかる話

JavaScript は1995年、Netscape の Brendan Eich がわずか10日間で書き上げた言語です。この誕生エピソードは地味に大事で、ゆるい等価比較(==)、セミコロンの自動挿入、typeof null === "object" といった言語のクセは、極端な時間的プレッシャーの中で下された判断が、ウェブの後方互換性を守るためにそのまま凍結された結果なんです。

言語としては ECMAScript という名前で標準化されていて、毎年新しいバージョンがリリースされます(中でも ES2015 は節目となる大型アップデートで、let、const、アロー関数、クラス、モジュールなどが入りました)。「ES6」や「モダン JavaScript」と呼ばれているのは、ざっくり言えばこの2015年以降の機能セットのことで、いまではどの環境でも問題なく使えます。

モダンな JavaScript は、書いていて素直に気持ちいい言語です。古い仕様も残ってはいますが、このコースを通じて身につける書き方を守っていれば、だいたい避けて通れます。

この章のポイント

• JavaScript はあらゆるブラウザで動き、Node.js を使えばサーバー側でも動く。
• UI、バックエンド、開発ツール、さらにはデスクトップアプリやモバイルアプリまで、ウェブが関わるほぼすべての領域で使われている。
• Java とはまったくの別物。TypeScript は JavaScript に静的型付けを加えたスーパーセット。
• 歴史的なクセはいくつか残っているが、実際に書くのは ES2015 以降のモダン JavaScript。

次の章:JavaScript を動かしてみる

前置きはこのくらいにして、そろそろ実際にコードを動かしてみましょう。次のドキュメントでは、初心者が JavaScript を実行する代表的な3つの場所 — ブラウザのコンソール、HTML ファイル、そしてコマンドラインからの Node.js — を順に見ていきます。