JavaScriptの実行環境と仕様

#はじめに
JavaScriptは現在人気となっている言語の一つですが、**その生い立ちや作成された背景などを知っている人は意外に少ないのではないでしょうか？**

そこでこのような作成背景や生い立ちなどを知ると、JavaScriptをより多面的に深く理解できるのではないか？と思い、本記事を作成しました。

シリーズものとなっており、2回目・3回目というようにしばらく続けていくつもりです。

JavaScriptを一度学んだことがある人でも意外と知らなかったことがあると思いますので、ぜひ最後までご覧になってください。

#対象読者
- JavaScriptを学び始めた人
- プログラミング始めたての人
- JavaScriptとECMAScriptの違いがわからない人

#本記事の内容
[1. JavaScriptの生い立ち](#1-JavaScriptの生い立ち)
[2. JavaScriptとECMAScript](#2-JavaScriptとECMAScript)
[3. 実行環境による違い](#3-実行環境による違い)
[4. まとめ](#4-まとめ)
[5. 最後に](#5-最後に)
[6. 参照サイト](#6-参照サイト)


#1. JavaScriptの生い立ち
## JavaScriptとは？
JavaScriptは、1990年代のインターネット黎明期に**Netscape Communications社によって開発された、ブラウザ向けのスクリプト言語[^1]です。**

[^1]: スクリプト言語とは簡単にいうと、誰でも簡単にキャッチアップできるように作成されたプログラミング言語のことです。

開発当初は<code>LiveScript</code>と呼ばれていましたが、当時非常に注目を浴びていた<code>Java言語</code>にあやかって、その後<code>JavaScriptと名前を改めることになります。

このため、誤解を招きやすいのですが、**JavaとJavaScriptとは全くの別言語であり、互換性もありません。**

## JavaScriptの歴史①：実装開始〜不遇期
続いてJavaScriptの歴史について軽く紹介します。

JavaScriptは、1995年に当時最大規模のシェアを誇っていた<code>Netscape Navigator2.0</code>と呼ばれるブラウザで実装されたのを皮切りに、1996年には<code>Internet Explorer3.0</code>でも実装され、そしてその後**ブラウザ標準のスクリプト言語として定着していきました。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751055/9c849822-36a2-d38e-59bb-12b6909eb1a1.png)

しかし、JavaScriptが実装されたことにより様々なエフェクトを実現できるようになったため、**多くの人が過剰な装飾をJavaScriptに勝手に盛り込んでいきました。**

**その結果、装飾過剰で、使い勝手の悪いWebページが量産されるようになりました。**

そのためJavaScriptは<code>「ダサいページを作成するための言語」「使い勝手が非常に悪く、プログラミングの素人が使う低俗な言語」</code>というイメージだけが定着してき、不遇の時代へと入っていくことになります。

## JavaScriptの歴史②：復権
そのような状況に光明が見えたのが、2005年、**<code>Ajax(Asynchronous JavaScript + XML)</code>**という技術が登場した時です。

Ajaxというのは、一言でいうなら**ブラウザを再読み込みすることなく情報を更新する通信方法（非同期通信）をJavaScriptを用いて行う処理のプログラム手法**のことを言います。

Google Mapのように、<code>読み込むことがなく情報を取得できるアプリケーションを想像してもらえればわかりやすいかもしれません。

[![Image from Gyazo](https://i.gyazo.com/41d4d48f4c6cce787ff754b6c01fdd08.gif)](https://gyazo.com/41d4d48f4c6cce787ff754b6c01fdd08)

Ajaxにより、**HTML、CSS、JavaScriptといったブラウザ標準の技術だけでよりリッチなコンテンツを作ることができるようになり、Ajax技術は瞬く間に普及を遂げました。**

そしてそのAjax技術の中核を担っていたJavaScriptは、**その価値が再度見直されるようになっていきました。**

<br>
またさらに2000年代後半には**<code>HTML５</code>**が登場したことにより、さらに追い風が吹きます。

HTML5により、**アプリ開発のためのJavaScript API[^2]が強化され、より機能が充実しました。**

[^2]: APIとはApplication Programming Interface」の頭文字で、何らかの機能をその外部のプログラムから利用するための決まり事のことを指します。簡単にいうと、プログラムとソフトウェアとの接点と思ってもらったら結構です。

| 機能             | 概要                                                | 
| ---------------- | --------------------------------------------------- | 
| Geolocation API  | ユーザーの地理的な位置を取得                        | 
| Canvas           | JavaScriptから動的に画像を描画                      | 
| File API         | ローカルのファイルシステムを読み書き                | 
| Web Storage      | ローカルデータを保存するためのストレージ            | 
| Indexed Database | キー/値のセットでJavaScriptのオブジェクトを管理     | 
| Web Workers      | JavaScriptをバックグラウンドで並列実行              | 
| Web Sockets      | クライアントーサーバー間の双方向通信を行うためのAPI | 

<br>
またこれ以降、**SPA（Single Page Application）[^3]の流行**などにより、JavaScript人気にさらに拍車がかかっていき、現在に至ります。

[^3]: SPAとは単一のページで構成されるWebアプリケーションのことです。初回のアクセスではまずページ全体を取得しますが、以降のページ更新は基本的にjavaScriptだけでまかなっていきます。デスクトップアプリによく似た操縦性や敏速な動作を実現するためのアプローチとして近年注目を浴びているワードです。

#2. JavaScriptとECMAScript
## ECMAScriptの誕生
1995年、1996年と立て続けに当時最大規模のシェアを誇っていた<code>Netscape NavigatorとInternet Explore</code>でJavaScriptは実装されました。

しかし、この二つで実装されたJavaScriptというのは**言語仕様が異なっており、二つの言語の間に互換性がありませんでした。**

そのため、**開発者サイドはブラウザ間で仕様の異なる言語を用いることになり、苦労することになりました。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751055/08d9faca-2ff6-755e-bcbb-55828f57b3eb.png)


そこで、出てきたのが**<code>ECMAScript</code>**と呼ばれるものです。

どういうことかというと、**JavaScript言語のコアな部分をECMAScriptとして仕様策定し、切り出すことにしたのです。**

こうすることにより、**ブラウザ間での言語仕様を統一することができ、JavaScriptは開発者にとって使い勝手の良いものへとなりました。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751055/cd751f28-d493-0947-b174-75cd3e40ce1a.png)


## JavaScriptとECMAScript
先ほども述べた通り、**ECMAScriptというのはプログラミング言語の仕様**であり、**その仕様に基づいて実装されたプログラミング言語がJavaScript**ということになります。

また、JavaScript以外にECMAScriptに基づいて実装されたプログラミング言語はほとんど存在していません。

これらにより、**実質的にJavaScriptの一部の仕様がECMAScriptということになってしまっているのです。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751055/5e657db4-2b97-5ea0-efdf-4517ece6a9ec.png)

      
#3. 実行環境による違い

JavaScriptの言語仕様の一部がECMAScriptということは、**JavaScriptはその実行環境によって機能が変わってくるということを意味します。**

元々はブラウザ上で動作することを想定して作られた言語ですが、現在はブラウザ上での用途に止まりません。

ここでは最も基本的な<code>ブラウザ環境下</code>とPC上でJavaScriptを動作させるソフトウェアの<code>Node.js環境下</code>でのJavaScriptの機能について見ていきましょう。

（これ以外にも様々な実行環境が存在する。）

## ブラウザ環境
ブラウザ環境の場合、ECMAScriptの他に**<code>Web APIsと呼ばれるものがあります。**

これはJavaScripからブラウザの機能を操作する際に用いられるもので、例えば画面の更新をする際には<code>DOM APIと呼ばれるものを使用します。

つまり、**ブラウザ環境下でJavaScriptを使用する場合はECMAScriptとWeb APIsの機能を用いることができる**ということになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751055/76ae1c9f-2164-419c-0374-75fa559a012f.png)

## Node.js環境下
Node.js環境下の場合は、ECMAScriptに加えて、<code>CommonJSと呼ばれるモジュールを管理するための仕様を定めたものが存在します。

これにより**Node.js環境下でJavaScriptを使用する場合はECMAScriptとCommonJsの機能を用いることができる**ということが言えますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751055/b7142a7d-9122-d0d3-5f4d-3a9b44de3978.png)


<br>

まとめると、ここで言いたいことは**JavaScriptというのは実行環境によって使用できる機能が異なってくるということです。**

#4. まとめ

- JavaScriptとは<code>**1990年代に開発されたブラウザ向けのスクリプト言語**</code>のこと
- ECMAScriptとは<code>**JavaScriptのコアな部分の仕様**</code>のこと
- JavaScriptとは<code>**ECMAScriptの仕様に基づいて実装されているプログラミング言語**</code>のこと
- JavaScriptは<code>**実行環境によって使用できる機能が変わってくる**</code>

#5. 最後に
本記事の内容がみなさんの参考になれば嬉しいです。

最後までご覧いただきありがとうございました。

#6. 参考文献
[Udemy講座: 【JS】初級者から中級者になるためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)
[書籍：改訂新版JavaScript本格入門](https://www.amazon.co.jp/%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88JavaScript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80-%E3%83%A2%E3%83%80%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AB%E3%82%88%E3%82%8B%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E7%8F%BE%E5%A0%B4%E3%81%A7%E3%81%AE%E5%BF%9C%E7%94%A8%E3%81%BE%E3%81%A7-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B/dp/477418411X)