コンテンツにスキップ

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種類がある。

  1. JavaScriptのコードを特定のECMAScriptバージョンに従うように変換するもの。
  2. スーパーセットの言語を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』