JavaScriptのいろいろまとめ（歴史・ツールなど）

2019-12-31

#JavaScript

フロントエンドの勉強として、TypeScript と React を学び始めました。

どちらも JavaScript（JS）に関係する言語だったりライブラリなのですが、とにかく JS 周辺はでてくるものが多く、全体像がつかみにくいです。

最初は書籍等を読んで勉強していましたが、わからずに設定することが多すぎて今回の記事を書くことにしました。

そこで、今回は JS まわりのツールなどをまとめていきます。

正直なところ複数人で行うような大規模な JS 実装経験がないので、過去の JS の苦労はわからないので内容については自信がないです。

間違いのご指摘等大歓迎です。

JavaScript の歴史

JS まわりのツールがたくさんあるのは、フロントエンドの発展に伴って必要とされるものがどんどん変わっていき、新しいものが次々とでるからです。

それらがどんなものかを理解するには、JS がどういった歴史を辿って今に至るのかを知ることがおすすめです。

ここでは、ネットの情報をもとに JS まわりの歴史をまとめます。
（※ 誤りがあるかもしれないのでご注意ください）

1995 年：JavaScript 誕生
- Netscape Communications 社によって JS が生まれる。JS は Netscape Navigator という Netscape 社のブラウザで使用するための言語として開発され、もともとは LiveScript と呼ばれるものだったが、当時流行り始めていた Java の影響を受けて JavaScript という名前になった。
1997 年：ECMAScript による JS のの標準化
- JS の登場以降、ブラウザによって JS の仕様が異なり開発が困難になるという問題があった。そこで、JS のを作った Netscape 社が国際標準化団体の ECMA に依頼して作られてのが、JavaScript の標準規格であるECMAScript
2005 年：Ajax（Asynchronous JavaScript + XML）の登場
- JS を使って、サーバーサイドと非同期通信を行う Ajax が登場する。この Ajax が Google Map に採用されるなどして注目を集め、同時に JS も注目されるようになる。
2006 年：jQueryの登場
- JS のライブラリとなる jQuery が登場。jQuery はこれまでよりも簡単な記述で DOM の操作を行うことができ、現在に至るまで様々なサイトで使用されている。
2009 年：Node.jsの登場
- これまでクライアント中心だった JS のサーバーサイド用の実行環境
- CommonJSという仕様やnpmとよばれる Node.js のモジュールを管理するツールも登場する
2012 年：① TypeScriptの登場、② webpackの登場
- ① JavaScript のスーパーセットとなるプログラミング言語。コンパイルすることで JS のコードになる。このような JS に似た言語で書いて JS に変換する（トランスパイル）言語は AltJS と呼ばれている。TypeScript 以外にも CoffeeScript などがある。
- ② モジュールバンドラーの webpack が登場
2013 年：Reactのオープンソース化
- FaceBook によって開発されていた JS のライブラリ
2014 年：Babelの登場（※ 年代が違うかも）
- JS のトランスパイラである babel がリリースされる
2015 年：ES6のリリース
- ECMAScript の第 6 版、ES2015 がリリース。新機能がいろいろ追加され、これ以前と以降の仕様で書かれているかで大きく異なる。ES modules もここで登場する

本当にいろいろある、、、

過去の JavaScript の問題点

ここにかなりまとまって書かれています。そのなかでも JS の問題点としてよくあがるのはモジュール機能の欠如、グローバル変数汚染、コールバック地獄などです。

モジュール機能というのはプログラムを分割した単位のことです。モジュール機能がなかったころは script タグを２つ書いたりすることで分割していました。一応、モジュール間を結合する方法はありましたが、モジュールの依存関係を考慮しなければいけなかったり、分割したとしても名前空間の衝突が起こったりと問題がありました。

こういった JS を便利に使いたいという過去があり、AltJS などが生まれています。

個人的には、過去の JS にモジュール機能がなかったことが JS 周りを複雑化させた要因の一つのように思います。

CommonJS と Node.js

CommonJS はサーバサイド JS の仕様のこと（団体・プロジェクト名として使われたりもしてる）です。そしてこの CommonJS によって実装されたのが Node.js（現在は Node.js は CommonJS の仕様に則ってないらしい）です。

Node.js の登場に伴ってでてきたのがパッケージマネージャーである npm になります。

この npm のエコシステムがなかなか流行ったと思っていて、その影響でここで生まれた資産をうまく使いたいからいろいろなツールが利用されているのかな（たぶん）。

ただし、CommonJS に従って作られたパッケージ（モジュールの集まり）はブラウザ上では使えないです。これをフロントエンドでも使えるしようぜということで出てきたのが RequireJS や browserify、webpack と呼ばれるビルドツールたちです。

ビルドについて

そもそもビルドとはなにか。

ビルドとは、組み立てる、建てる、築く、作り上げる、などの意味を持つ英単語。ソフトウェアの分野では、プログラミング言語で書かれたソースコードなどを元に実行可能ファイルや配布パッケージを作成する処理や操作のこと。また、組み立てられた実行ファイルなどの特定の版を指す場合もある。
引用：ビルド【 build 】

JS の開発でビルドツールがこんなにたくさんあるのには以下のようなことが考えられます。

ブラウザの実装状況に合わせるために過去の JS へのトランスパイル（Babel）
- 開発は最新の JS でやりたいけど、ユーザの実行環境で動くものを作らないといけないという理由がある
AltJS のトランスパイル
- TypeScript のような静的型付け言語で開発したいなどの理由がある
コードの圧縮（minify）、統合でパフォーマンスを上げる

いろんな JS、いろんなブラウザが混在していてそれらの互換性を保ちながら開発・提供するにはこういったビルドツールが必要になるのでしょう。

CommonJS と ECMAScript は違うの？

この２つは違うもの。ECMAScript は JS の標準規格（言語仕様）のことで CommonJS はサーバサイド JS の仕様の名前のことを指します。

ただし、ECMAScript でも CommonJS に該当するものとして ES Modules と呼ばれるモジュール機能が追加されました。

２つの仕様があってまたややこしいですね。

用語まとめ

タスクランナー
- フロントエンドのタスク（トランスパイル、minify、etc.）を自動化するもの
- gulp、Grunt、Webpack などがある
トランスパイラ
- 特定の JS に変換するもの
- Babel や AltJS などが該当
ビルドツール
- ビルドに必要なツール群
- タスクランナーも含まれる
モジュールバンドラ
- モジュールをひとまとめにし、依存関係の解決を行う
- Webpack
Polifill
- すべてのブラウザが最新の JS に対応しているわけではないので、未対応のブラウザに対しては同じ機能を JS で自ら供給するためのもの

感想

とにかくややこしい！！

調べてみてわかりましたが想像以上のややこしさです。フロントエンドの複雑化や開発速度が早いと言われていた理由がよくわかりました。

JS の歴史は各種ツールのバックグラウンドがわかりなかなか面白かったです。また、歴史という切り口で調べていくと自然と JS やツール群の全体像が見えてきて調べやすくなりました。

参考

← 前ページへ5月の振り返りと投資テクニカルなところをお勉強 → 次ページへJupyterでインタラクティブなGUI操作

JavaScriptのいろいろまとめ（歴史・ツールなど）

目次