JavaScript における開発

このページでは JavaScript、ECMAScript とは何なのか、また JavaScript で開発するときどういったツールを使うのかをまとめる。

JavaScript, ECMAScript

ECMAScript はスクリプト言語としての仕様であり、JavaScript はその実装である。

もともと JavaScript は、ネットスケープコミュニケーションズという一企業が独自に作ったスクリプト言語で、1990 年代に存在した Web ブラウザである Netscape Navigator に搭載されたものだった。

この言語は流行ったので仕様が標準化された。その仕様が ECMAScript である。

現代においては以下のものが大抵の場合 JavaScript と呼ばれる。

ECMAScript という仕様をプログラミング言語に落とし込んだもの。
俗に、上記のプログラミング言語に則って記述したコード。(正確には JavaScript のコードというべきか)

大抵の場合というのは JScript など独自の機能をつけて独自の名称を語る言語も非常に僅かであるが存在するからである。しかし現代では Web の技術は標準規格に従うのがトレンドであり、Web ブラウザで動くスクリプト言語は JavaScript と捉えてまず問題ない。

ECMAScript という言語は存在しない。

JavaScript で開発するときに使うツール

ランタイム環境

ランタイム環境は JavaScript の実行環境である。JavaScript はかつて Web ブラウザでしか動かなかったが、ランタイム環境が生まれたことによって Web ブラウザ以外でも動くようになった。

ランタイム環境を導入することで JavaScript をサーバーアプリケーションとして動かしたり、マシンを JavaScript の開発環境にしたりできる。

主なランタイム環境は Node.js, Deno, Bun など。

Web ブラウザ向けの JavaScript コードを書くときは理屈ではランタイム環境は不要だが、ランタイム環境を導入することでさらに以下のツールを導入できるメリットがある。

パッケージマネージャー

ランタイム環境が生まれたことでパッケージをインストールしたり管理する必要が出てきたので登場したのがパッケージマネージャーである。

主なパッケージマネージャーは npm, yarn など。

モジュールバンドラー

パッケージマネージャーやランタイム環境の仕組みによって JavaScript は複数ファイルをまたいでコードを書けるようになり、メンテナンスしやすくなった。

しかし複数ファイルであることはコードを書くときは便利だが、Web ブラウザが JavaScript を実行するときにはあちこちからファイルをダウンロードしないといけなくなり、効率が悪い。

パッケージやファイルの依存を解析して、Web ブラウザがダウンロードすべきファイルを 1 つにまとめることをバンドルと呼ぶ。そしてこのバンドルを行ってくれるツールをモジュールバンドラーという。

主なモジュールバンドラーは Webpack, esbuild など。

なおランタイム環境を使ったサーバーサイド環境では複数ファイルを読み込むのはアプリケーション起動時だけなので、モジュールバンドラーを用いるメリットは少ない。

バンドラーって何ですか？ · Issue #530 · yytypescript/book · GitHub

トランスコンパイラ

一般的にトランスコンパイラとはあるプログラミング言語で書かれたコードを別のプログラミング言語のコードに変換するツールを指す。

JavaScript においてトランスコンパイラは以下の 2 種類がある。

JavaScript のコードを特定の ECMAScript バージョンに従うように変換するもの。
スーパーセットの言語を JavaScript に変換するもの。

1 は最新すぎる仕様に従って書いたコードを、古いものも含むより多くの環境で実行させたい場合に使う。例は Babel, SWC など。

2 の例は TypeScript, Dart である。

JavaScript は静的型付けがないなどイケてないところがある。しかし別の言語を使いたくても Web ブラウザで動くのは JavaScript だけである。そこでこのイケてない点について、拡張言語(スーパーセットの言語)を用意して、プログラマーはその言語でコードを書いたあと JavaScript に変換することで、いい感じの開発体験を得ようというアプローチを考えた人たちがいた。その人達の作ったツールが 2 のトランスコンパイラである。

TypeScript はプログラミング言語であり、トランスコンパイラである。TypeScript 言語を使ってコードを書くことで、JavaScript に変換する前に TypeScript のトランスコンパイラが例えば型安全かをチェックしてくれて、実行時エラーを防いでくれるメリットが得られる。

ビルドツール

JavaScript はモジュールバンドラーやトランスコンパイラなど細々したものが出てきて、組み合わせが面倒くさい。

その辺を取りまとめてくれるのがビルドツールである。

主なビルドツールは Vite。

コードフォーマッター

コードを整形してくれるツール。

主なコードフォーマッターは Prettier。

Prettier でコード整形を自動化しよう | TypeScript 入門『サバイバル TypeScript』

リンター

コーディング規約を守らせるツール。

主なリンターは ESLint。

ESLint で TypeScript のコーディング規約チェックを自動化しよう | TypeScript 入門『サバイバル TypeScript』