More than 1 year has passed since last update.

JavaScript周りの知識をまとめる

Posted at 2023-05-22

はじめに

JS周りで色々と知らないことがあったので、ここらでまとめておきます

キーワード

javascript, ECMAScript, babel, polyfill, core-js

JS周りの前提

JavaScriptの略で、プログラミング言語の略です。JavaScriptを使用することでwebサイトに動きを加えることが出来ます。

JavaScriptという言葉は、「ECMAScript」と「DOM」という二つの概念によって説明できるようです。

しかしながら、ウェブブラウザーの文脈で解釈されるこの「JavaScript」という包括的用語は、まったく異なる複数の要素を含んでいます。その要素とは、中核となるプログラミング言語（ECMAScript）、もう一つは DOM（Document Object Model）を含んだ Web API 群です。

https://developer.mozilla.org/ja/docs/Web/JavaScript/JavaScript_technologies_overview

ECMAScript

JavaScriptの中核をなすスクリプト言語、という説明がされています。

ECMAScript(ES)では、型や言語文法やエラー処理のメカニズムなどが定義されているようです

恐らくポイントは、ブラウザーとは直接関係のないAPIのみが定義されている、という点だと思います。

とりわけ、ECMAScript は以下のものを定義しています。

言語文法（構文解析のルール、キーワード、制御フロー、オブジェクトリテラルの初期化、…）

エラー処理のメカニズム（throw、try/catch、ユーザー定義エラー型の作成機能）

型（真偽値、数値、文字列、関数、オブジェクト、…）

グローバルオブジェクト。ブラウザー環境では、このグローバルオブジェクトは window オブジェクトですが、ECMAScript ではブラウザーとは直接関係のない API のみが定義されています。例えば parseInt、parseFloat、decodeURI、encodeURI……

プロトタイプベースの継承メカニズム。その対象は次のもの:

ビルトインオブジェクトと関数（JSON、Math、Array.prototype メソッド、オブジェクト内部確認メソッド……）

Strict モード (ここを見てください)

ブラウザーとESの互換

こちらのサイトにまとまっています。

http://kangax.github.io/compat-table/es6/

ESのバージョンの歴史は以下の表のようです

バージョン	リリース時期
1	1997年6月
2	1998年6月
3	1999年12月
4	破棄
5	2009年12月
5.1	2011年6月
2015	2015年6月
2016	2016年6月
2017	2017年6月
以降毎年リリース

参考: https://jsprimer.net/basic/ecmascript/

2016年から常に最新版を公開する運用方法に変更したため、毎年リリースが出来るようになったみたいです。

DOM

WebIDLというDOM技術とECMAScriptを繋ぐ技術がある様です。あまり聞いたことが無かったですので、用語だけ知っとくことにします。

さて、DOMとは、Document Object Modelの略でHTMLやXMLなどのドキュメント内の要素をオブジェクトとして扱う、という意味です。

要素をオブジェクトとして扱うことで、プログラム的記述がかけるようになります(曖昧)

以下の内容が、DOMの基本仕様として策定されているものです

DOM core で定義されている、文書構造、ツリーモデルや DOM イベントアーキテクチャ。Node、Element、DocumentFragment、Document、DOMImplementation、Event、EventTarget など。

DOM イベントアーキテクチャの大まかな定義に加え、DOM events で定義されるより具体的なイベント。

その他、DOM Traversal や DOM Range など。

HTMLでは、HTML側でDOMの規定をしており、HTML DOMと呼ばれているようです。

classNameプロパティ等のAPIを定義しているようです。

DOMオブジェクトに関する詳細は以下のページに書かれています

https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model

他にも重要なAPIがある様です

HTML標準のsetTimeout,setInterval関数
XMLHttpRequest
- 非同期のHTTPリクエストを送ることを可能にするAPI
- (jQueryで使った覚えが)
CSSオブジェクトモデル
WebWorkers
- 並列処理を可能にするAPI
WebSockets
- 双方向通信を可能にするAPI
  - (オンラインゲーム等の基盤となる技術かな)
Canvas 2D
- 描画API

jQuery, Vue, React等のライブラリー、フレームワークを使用することで、異なるブラウザーで上記のAPIを一つの記述で動作させることが出来たりします。そのため、現在のフロントエンド技術はライブラリーを使った開発が一般的なものになっているかと思います。

Babel

Babelは、オープンソースのトランスコンパイラです

トランスコンパイラとは、ソースコードを入力として、別のソースコードを出力する、コードの翻訳器のようなものです。

著名で僕も使用したことのある、TypeScriptもトランスコンパイラの一種と言えて、TypeScriptは型の定義を前提としてJavaScriptを書きたい時に使用する言語だととらえています。

TypeScriptについては、以下の本で、非常に詳しく解説されています。

https://typescriptbook.jp/

さて、Babelですが、wikiによると以下のようになっています。

Babelは、フリーかつオープンソースのJavaScript トランスコンパイラであり、主にECMAScript 2015+（ES6+）コードを古いJavaScriptエンジンで実行できる下位互換バージョンのJavaScriptに変換するために使用される。Babelは、JavaScriptプログラミング言語の最新機能を使用するための一般的なツールである[3]。

具体的には、ES6(ES2015)以降でサポートされるアロー関数を以前のESバージョンの関数宣言に書き換えたりすることで、発展途上のブラウザーへの互換性を保ったりします。

https://ja.wikipedia.org/wiki/Babel_(トランスコンパイラ)

https://babeljs.io/docs/

Polyfill

MDNによると、Polyfillは以下のように説明されています。

ポリフィルとは、最近の機能をサポートしていない古いブラウザーで、その機能を使えるようにするためのコードです。大抵はウェブ上の JavaScript です。

正しい用語の使い方としては、「トランスコンパイラであるBabelを使用して、Polyfillを作成する」でしょうか

core-js

core-jsもBabelと同様、オープンソースのトランスコンパイラです。

現在は開発者ひとりでメンテナンスしているようで、大企業も使用するようなライブラリを一人で開発するなんてすごい話だな、と思います。

小話ですが、core-jsの開発者が生活に困ってるため商用プロジェクトに取り込む、なんて話が2か月前にあったようです。(現在どうなっているのかは調べきれませんでした)

https://jipsti.jst.go.jp/sti_updates/2023/03/14075.html#:~:text=core-jsはオープンソース,依存関係があるという。

さいごに

誤っている情報が有ったら是非教えて頂きたいです。

何卒宜しくお願いします。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up