2.

JavaScript(.js/.mjs/.cjs)完全ガイド — Brendan Eich・Node.js・ESM vs CJS・npm/yarn/pnpm・ECMAScript

編集
この記事の要点
  • JavaScript は Brendan Eich が 1995 年に Netscape Navigator 用としてわずか 10 日間で開発した動的型付け言語
  • 当初はブラウザ専用だったが Node.js(2009、V8 エンジン)の登場でサーバサイドにも進出
  • .mjs は ES Modules(import/export)、.cjs は CommonJS(require)を強制する拡張子
  • 標準仕様は ECMAScript(ECMA-262)として年次リリース、ES2015(ES6)で大幅刷新
  • パッケージ管理は npm(標準)、yarn(Meta)、pnpm(高速・省ディスク)
  • 'use strict' でセマンティクスを厳格化(暗黙のグローバル禁止、this の自動 undefined 化 等)
  • TypeScript・Bun・Deno など派生エコシステムも巨大化

概要

JavaScript(ジャバスクリプト、JS) は、1995 年に Netscape Communications の Brendan Eich(ブレンダン・アイク)が当時の Netscape Navigator 2.0 向けに開発した動的型付けスクリプト言語です。「10 日間で作られた」逸話で有名で、最初の名称は Mocha → LiveScript → JavaScript と変遷しました。「Java」を冠したのは Sun Microsystems との提携によるマーケティング上の理由で、言語としての Java とは 名前以外ほぼ無関係 です。

言語仕様は ECMAScript(ECMA-262) として ECMA International により標準化されています。1997 年に ES1 が公開され、2015 年の ES2015(通称 ES6) でクラス構文・アロー関数・let/const・テンプレートリテラル・Promise・モジュールなどが導入され、現代的な姿になりました。以降は 毎年 6 月にリリース される年次仕様(ES2016〜ES2025)が続いています。

もともとはブラウザ DOM 操作のための言語でしたが、2009 年に Ryan Dahl が Node.js(Google の V8 JavaScript エンジンを利用したサーバサイド実行環境)を公開してから、サーバサイド・ビルドツール・CLI・デスクトップアプリ(Electron)・モバイル(React Native)まで領域を拡大しました。型システムは 動的・弱型付け で、"5" == 5true になるなど暗黙の型変換が多く、これが TypeScript や ESLint などの補助ツールの発達を促した側面もあります。

ファイル種類とビルド成果物

拡張子役割備考
.js標準 JavaScriptNode.js では package.json"type" フィールドで CommonJS / ESM が決まる
.mjsES Modules を強制import / export 必須。require は不可
.cjsCommonJS を強制require / module.exports。レガシー対応
.jsxReact の JSX 構文素の Node.js では実行不可。Babel / esbuild / SWC 等で変換
.jsonJSON データJS のオブジェクトリテラルから派生したデータ交換形式
.mapSource Mapミニファイ後のコードと元コードの対応情報
.nodeNode.js ネイティブモジュールC++ で書かれたバイナリアドオン

「Hello, World」

// hello.mjs — ES Modules 形式
'use strict';

export function greet(name) {
    return `Hello, ${name}!`;
}

console.log(greet('World'));

Node.js 14 以降であれば node hello.mjs で実行できます。.js 拡張子のままで ESM を使いたい場合は package.json"type": "module" を追加します。ブラウザでは <script type="module" src="hello.mjs"></script> として読み込みます。

パッケージ管理・ビルドツール

  • npm:Node.js 同梱の標準パッケージマネージャ。npmjs.com レジストリは世界最大規模(200 万パッケージ超)
  • yarn:2016 年に Meta(旧 Facebook)が公開。並列インストールで高速化。Plug'n'Play・Berry 系統あり
  • pnpm:ハードリンクでディスク容量を大幅節約。モノレポに強い。CI でも採用が増加
  • Bun:Zig 製の超高速 JS ランタイム+パッケージマネージャ。bun install は npm の 10〜30 倍
  • Deno:Ryan Dahl が Node.js への反省から作った新ランタイム。TypeScript ネイティブ・URL インポート・セキュア
  • ビルドツール:webpack / Rollup / esbuild / Vite / Parcel / Turbopack
  • テスト:Jest / Vitest / Mocha / Playwright

関連言語との比較

項目JavaScriptTypeScriptPythonRuby
型システム動的・弱静的(JS 上の型レイヤ)動的・強動的・強
主な実行環境ブラウザ・Node.js・Bun・Denotsc でコンパイル→JSCPythonMRI
標準モジュールESM / CJSESM 推奨importrequire
非同期Promise / async-await / イベントループ同上asyncioFiber / Async
ブラウザ実行ネイティブ可不可(要コンパイル)不可(WASM 経由)不可

注意点・落とし穴

  • ======= は型変換あり(0 == ""true)、=== は厳密比較。常に === を使う のが現代のベストプラクティス
  • 巻き上げ(hoisting)var 宣言は関数スコープの先頭に持ち上げられる。let/const はブロックスコープで TDZ あり
  • this の挙動:呼び出し方で this が変わる。アロー関数は this をバインドしない
  • ESM と CJS の混在.mjs から require はできない。import は ESM 専用
  • 浮動小数の罠0.1 + 0.2 === 0.3false(IEEE 754)。金額計算は整数化または decimal.js
  • npm 依存地獄node_modules が肥大化しがち。npm audit / Dependabot で脆弱性監視

関連リンク

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. Python(.py / .pyc)
  2. JavaScript(.js / .mjs / .cjs)
  3. TypeScript(.ts / .tsx)
  4. Go(.go)
  5. Rust(.rs)
  6. Java(.java / .class / .jar)
  7. C / C++(.c / .h / .cpp / .hpp)
  8. Ruby(.rb)
  9. Swift(.swift)
  10. Kotlin(.kt / .kts)

最近更新/作成されたページ