自分の知っているJavaScriptの知識が古いので新しいJavaScriptについてのまとめ

自分の知っているJavaScriptの知識が古いので新しいJavaScriptについてのまとめ

これまでは、「Laravel」等でウェブアプリケーションをぼちぼち作ってきたが動的なWebページにはJavaScriptが不可欠だと思う。

JavaScriptを用いることができれば動的なバリデーションやリアルタイムに情報を更新したり、「Laravel Echo」を用いた通知機能などの実装をスムーズに行うことができる。

もともとは「JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで (改訂新版ではない方)」を読んでいて最近の「Software Design」でこの本で紹介されている内容は古いことを知ったのでどのような手順でJavaScriptを学べば良いのかを調べてみる。

(著者はもともとJavaScriptの知識が浅いです)

JavaScriptとは何か

JavaScript(ジャバスクリプト)とは、プログラミング言語のひとつである。Javaと名前が似ているが、全く異なるプログラミング言語である。 JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。 ウェブブラウザ上で動作し動的なウェブサイト構築やリッチインターネットアプリケーションの開発に用いられる。また、2010年以降はnode.jsなどのサーバサイドJavaScript実行環境や各種ライブラリの充実により、MEANに代表されるように、Web開発の全ての領域で活用されるようになってきている。

Wikipediaより

ここに書かれている「プロトタイプベースのオブジェクト指向」というのが「myObj.prototype.getValue = function () { … }」みたいなコードを示すのだと思う。

プロトタイプベースのクラス作成は次のサイトが参考になる。

Google流 JavaScriptにおけるクラス定義の実現方法

また、「クラスなどのクラスベースに見られる機能も取り込んでいる」というのは多分「ECMAScript2015 (ES2015)」から取り込まれたものだとおもわれる 。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes

JavaScriptとECMAScriptの違い

1996年にNetscape社が当時流行していたWebブラウザ、「Netscape Navigator」に搭載したのが始まり。調べによるとMicrosoftがJavaScriptとの互換性をもった「JScript」というものを開発し、「Internet Exploler」に搭載した。これを俗に、ブラウザ戦争ともいう。

JavaScriptは、ブラウザで動作する言語であり当時「Netscape Navigator」で使われるJavaScriptと「Internet Exploler」で使われる「JScript」は、それぞれ違う仕様であったためブラウザ毎に仕様の異なるJavaScriptが乱立している状態であった。

JavaScriptの標準化

ECMA International

この問題を解決するため、Netscape社は、JavaScriptの標準化規格を作るよう、外部機関に依頼した。これが「ECMA International」という機関。

その結果、JavaScriptのメイン機能を標準化仕様として定義した言語、「ECPAScript (ES)」が誕生する。

CommonJSの登場

JavaScriptの問題点である、モジュール機能がなかったため「CommonsJS」という仕様が生まれる。

Node.jsの誕生

今は流行ってるか知らないど有名なサーバーサイドのJavaScript、「Node.js」が生まれる。また「Node.jsを利用したツール」がたくさん開発されるようになり必然的にそれを管理するバージョン管理ツールが必要になってくる。

Node.js

「npm」などのパッケージ管理ツールが誕生し、Node.js製のツールはこれで管理される。

このツールをりゆ押して「browserfiy」や「Webpack」などのビルドツール、「Gulip」や「Grunt」などのタスクツールなどをインストールする。

「Babel」などもこれでインストールする。

結局なんなの

僕の解釈では、JavaScriptはECMAの規定に基づいて作られており大体のブラウザは、「ECMAScript Edition 5.1」に対応おり(Wikipediaより)、「ECMAScript 2015」で書かれたコードをブラウザ上で動かすには、「Babel」等を利用してトランスパイルする必要があるということ。これは「ECMAScript」の進歩が早いためブラウザの対応が追いつかないために起こるということ。

ということは、「ECMAScript 2015」で追加されたクラスの書き方は、「Babel」でトランスパイルされるとプロトタイプベースで書かれたコードが出力されるということだと思う。要するに「シュガーシンタックス」ということ。

参考

以下のサイトがとても参考になる。

Otherカテゴリの最新記事