モダンなJavaScript講座①

＊こちらの動画を参考にさせていただきました

①JavaScriptの歴史

JavaScriptの誕生
・JavaScripthは1995年
・Netscapeの技術者ブレンダン・アイク作
・Netscape Navigator2.0に実装された

JavaScriptの豆知識
JavaScriptという名前だったが、サン・マイクロシステムのプログラミング言語Javaが当時大きな注目を浴びており、Netscapeが業務提携していたこともあったため、JavaScriptに変更された

ECMAScriptの誕生
NetscapeはJavaScriptを国際的な標準化団体EcmaInternationalに提出しました。その結果1997年6月にECMAScriptという標準の第1版が公開された。1998年に第2版、1999年に第3版が公開されている

ECMAScriptの豆知識
2015年に第6版が公開され、そのリリースからは年号が使われるようになった。そのため、ES6の表記は間違っており、正解はES2015である。また、2015年から仕様策定プロセスが変更され、毎年リリースする形になっている。

ECMAScriptって？
JavaScriptの中核となる言語仕様のこと

JavaScriptの環境
例えば、Node.jsが分かりやすいが、ブラウザ上のJavaScriptには存在したUIを操作するための機能がNode.jsにはない

ECMAScriptとJavaScript
ECMAScriptはどの環境でも共通な動作のみが定義されている。Node.jsやブラウザの違いなどを意識せずにECMAScriptで開発することができる（実際は実装速度に差があるためコンパイルor気をつける必要がある）

コンパイル･･･あるプログラミング言語を他のプログラミング言語に変えること

Server Side JavaScriptの動き
2009年1月、MoじぁのエンジニアKevin DanKevin DangoorがServerJSというプロジェクトを立ち上げた。しかし、サーバーサイドで使うにはいろんなAPIが不足していた。ServerJSの実現にはいろんなAPIを作る必要がある。

ServerJSからCommonJSへの改名
2009年からより広い範囲のAPIを対象とすることを示すために、現在のCommonJSへと改名された。

モジュールAPIについて
CommonJSでいろんなAPI仕様が作られていくが、特にフロントエンド開発にも大きく影響するモジュールに焦点を絞って解説する

モジュールとは

モジュールはただのファイルです。１つのスクリプトは１つのモジュールです。モジュールは相互に読み込んだり、exportとImportを使用してやり取りしたり、あるモジュールの関数を別のモジュールから呼び出したりすることができる。

JavaScriptの問題点をストーリーで理解する

ここに一つのindex.jsがあります。

//index.js
// ...数千行のJavaScriptコード

数千行は見にくい→エンジニアはファイルを分けることに

一つのindex.jsのファイルを三つにわけました。

//a.js
//...数百行のJavaScriptコード

//a.js
//...数百行のJavaScriptコード

//c.js
//...数百行のJavaScriptコード

HTMLも３つのJSファイルを読み込みます

<script src="./a.js"></script>
<script src="./b.js"></script>
<script src="./c.js"></script>

すぐにバグが、、、

例えば中でこのような処理を書いてしまいました

//a.js
var foo = 123;

//b.js
var foo = "foo";

//c.js
foo *10;//NaN

a→b→cの順に読み込まれるので変数fooは上書きされてしまいます

<script src="./a.js"></script>
<script src="./b.js"></script>
<script src="./c.js"></script>

JavaScriptは名前空間が１つしかない
命名が被る、、、JavaScriptつらい

今度はa.jsのコードを変更するとバグが発生してしまいました
aのコードを下にb,cは作られていたためバグが発生してしまった

<script src="./a.js"></script>
<script src="./b.js"></script>
<script src="./c.js"></script>

依存関係はとても怖いもの

jQueryでよく見る光景で下記コードも順番を変えたらバクります

<!--- jQuery UIは作られている　-->
<script src="./jquery"></script>
<script src="./jquery-ui.js"></script>

↑　JavaScriptで起きていた実際に問題

・どうすれば解決できたのか
名前空間、依存関係の２つの問題が出てきた
名前空間はモジュールが解決
依存関係はパッケージ管理（npm）で解決

モジュール

モジュールがあると例えばこう

//a.js
var foo = 123;
module.exports = foo;

//b.js
var foo = "foo"; //よそのfooは気にしない

//c.js
var foo = require("./a")
console.log(foo): //123

・スコープについて
モジュールにはスコープの概念がある。JavaScriptのモジュールは１ファイル単位で、ファイル内の変数や関数は外部に影響を及ぼさない。

あくまでCommonJSの話
今の話はあくまでCommonJSの話で、ブラウザのJavaScriptで使うことはできない。ブラウザのJavaScriptはずっと名前空間は一つでモジュールが使えないので問題は依然として残る。

次回はパッケージ管理（npm）について！