モダンJavaScriptの概要
厳密にはいつ以降がモダンなのかという明確なルールは決められていないが、
一般的には以下のような特徴が挙げられます。
- 主にES2015（ES6）以降の記法を使用
- SPAで作成
- React、Vue等の仮想DOMを用いるライブラリ/フレームワークを使用
- パッケージマネージャー、モジュールバンドラー、トランスパイラを使用
それぞれの特徴を簡単に解説していきます。
主にES2015（ES6）以降の記法を使用
まず、ES2015（ES6）とは何かという点から解説していきます。
ES2015（ES6）は、ECMAScript2015の略になります。
ECMAScriptとは、ECMA：European Computer Manufacturers Association（欧州電子計算機工業会）の略でコンピュータ関連技術の標準化団体のことです。
JavaScriptは世界的に使用されていて、勝手に変更や機能の追加などをされると困るので、ECMAScriptと呼ばれるJavaScriptの標準仕様が定められました。
ECMAScriptは「ECMAScript 1st edition」から始まり、改訂されるたびに2nd、3rdとバージョンが上がり、通称ES2、ES3のように呼ばれるようになりました。
しかし、2015年の改訂で「標準仕様は1年に1回更新する」と決められたため、ES2015という西暦をつけた呼び方がされるようになりました。
ちなみに、ES6がES2015、ES7がES2016となり、若干ズレているので別名との関係を覚えておくと良いでしょう。
では、なぜES2015がモダンJavaScriptの特徴として挙げられるのかを解説していきます。
ES2015に近代JavaScriptの転換機とも呼ばれるほどの大きな改訂があり、この年に大きな機能追加が実装されました。
追加された仕様としては、以下のようなものがあります。
- let、constを用いた変数宣言
- アロー関数
- Class構文
- 分割代入
- テンプレート文字列
- スプレッド構文
- Promise
上記のように、React等のモダンJavaScript開発でも必須とも言える文法や機能が加わったのが、ES2015（ES6）というのを覚えておくと良いでしょう。
SPAで作成
ReactをはじめとするモダンJavaScriptのwebシステムはSPAで作成されています。
SPA（Single Page Application）とは、webアプリケーションの設計アーキテクチャの一形態で、1つのHTMLページを初回に読み込み、JavaScriptで画面を書き換えることで、ページ全体の再読み込みなしに動的にコンテンツを更新する仕組みです。
従来のwebページでは、操作のたびにページ全体を読み込みますが、SPAではJavaScriptでHTMLの一部分を差し替えて、必要な部分だけを読み込みます。
そのため、サーバとの通信を抑えて、アプリケーションのパフォーマンス向上につながります。
React、Vue等の仮想DOMを用いるライブラリ/フレームワークを使用
ReactやVue等のモダンJavaScriptのフレームワークやライブラリでは仮想DOMというものが用いられています。
仮想DOMの説明をする前に、まずはDOMというものから簡単に解説していきます。
DOM（Document Object Model ）とは、HTMLやXML文書をプログラムから操作するための仕組みです。JavaScriptなどのスクリプト言語を使用して、HTML文書の内容や構造を動的に変更することができます。
従来のDOMというのは、手続的で分かりやすい反面、レンダリングコスト（画面の表示速度）に問題が生じやすかったり、プログラムのコードが肥大化していき何をしているのかわからなくなってしまうということがありました。このようなDOMの問題点を解決するために作られたのが、仮想DOMという技術になります。
仮想DOMとは、JavaScriptのオブジェクトで作られた仮想的なDOMのことです。仮想的なDOMと実際のDOMの差分を比較し、変更箇所のみを実際のDOMに反映することで、DOMへの操作を最小限に抑えることが可能となります。仮想DOMによってページ遷移をJavaScriptによる画面の書き換えで表現し、レンダリングコストを最小限に抑えて快適なwebシステムを提供することが可能となりました。
パッケージマネージャー、モジュールバンドラー、トランスパイラを使用
最後にパッケージマネージャー、モジュールバンドラー、トランスパイラについて解説していきます。
モダンJavaScriptの特徴として、この3つはだいたい出てくると思います。
パッケージマネージャーとは？
まず、パッケージマネージャー（npm/yarn）から簡単に解説していきます。
そもそもパッケージマネージャーとはどんなものなのでしょうか？
パッケージマネージャーとは、ソフトウェアの開発などで使用されるライブラリやツールなどの「パッケージ」を管理するためのソフトウェアやシステムです。パッケージマネージャを用いることで、開発者が手動でライブラリをダウンロード・配置する手間を省き、依存関係の解決やバージョン管理を効率的に行うことができます。JavaScriptでは、npmやyarnといったパッケージマネージャーが使用されています。また、様々なプログラミング言語や開発環境には、それぞれの言語やフレームワークに対応したパッケージマネージャーが存在します。以下は、一部の主要なプログラミング言語とそれに対応するパッケージマネージャーの例です。
- Python：pip（Pip Installs Packages）
- Java：Maven、Gradle
- Ruby：RubyGems、Bundler
- PHP：Composer
- JavaScript：npm（Node Package Manager）、yarn
これらは言語ごとにコミニュティやエコシステムに適したパッケージマネージャーであり、それぞれが異なる機能や利点を提供している。開発者はプロジェクトの要件に応じて、適切なパッケージマネージャーを選択しますが、どれを選ぶかはプロジェクトの特性や開発者の好みに依存します。
JavaScriptのパッケージマネージャー（npm/yarn）
JavaScriptのパッケージマネージャーにはいくつか特徴があります。
JavaScriptのパッケージマネージャーは、パッケージのインストールや更新、依存関係の解決を非常に簡単行える点が特徴です。また、パッケージのバージョン管理が柔軟で、”package.json”という設定ファイルを使用してプロジェクトの依存関係を一元管理できます。
次に、npmについて説明していきます。
npm（Node Package Manager）は、Node.jsの公式パッケージマネージャーであり、JavaScriptのエコシステムで最も広く使用されています。npmはパッケージのインストール、管理、バージョン管理、依存関係の解決などを提供します。また、パッケージをオンラインのNPMレジストリから取得します。一般的には大文字の場合はレジストリ、小文字の場合はパッケージマネージャーとしてのnpmを差すことが多いです。
yarnもJavaScriptのパッケージマネージャーであり、npmと同様の目的で使用されます。yarnはnpmよりも高速で安定しており、セキュリティやパフォーマンスの向上などの機能を提供しています。一部の開発者はyarnをnpmの代替として好んで使用している。
モジュールバンドラー
モダンJavaScriptの開発においては、モジュールバンドラーやトランスパイラと呼ばれる仕組みが必須となってきます。
それぞれの特徴を簡単に解説していきます。
モジュールバンドラーとは、HTMLやCSS、Jsファイル、画像といったモジュールをひとまとめにし、最適化された単一のバンドルを生成するツールです。と言われてもあまりイメージが湧かないと思いますので、例を使って解説していきます。分かりにくいと思いますが、イメージがつかめればokです。
例えば、JavaScriptを使用してwebアプリケーションを開発しているとします。たくさんの機能を実装したソースコードが1つのjsファイルに書かれている場合、行が長くなり、可読性もなくメンテナンスもしづらくなります。そのため、細かくファイルを分けて開発した方が効率的で、生産性も上がるためファイルを細かく分けることにしました。しかし、ここで問題が生じます。本番環境でwebアプリケーションを実行しようとしたときに、ファイルが細かく分かれているので、読み込み回数が増えてパフォーマンスが悪くなってしまいました。そこで「開発の際にはファイルを分けて、本番用にビルドする時は1つのファイルにまとめよう！」という思想が生まれ、jsファイルやcssファイルなどをまとめてくれるモジュールバンドラーが作られました。
大体イメージはつかめたでしょうか？
また、JavaScriptにはファイルの読み込み順による依存関係の問題もあって、パッケージマネージャーがそこら辺を解決してくれますが、モジュールバンドラーもファイルを1つにまとめる際に依存関係を解決してくれるみたいです。かなりの優れものですね。現在主流のモジュールバンドラーはwepackというものみたいですので、興味のある方は調べてみてください。
トランスパイラ
トランスパイラについては、JavaScriptで使用する場合に焦点を当てて解説していきます。
トランスパイラとは、JavaScriptの記法をブラウザで実行できる形に変換してくれるものになります。
どういうことかというと、ECMAScriptで毎年仕様がどんどん追加されていきますが、ブラウザによってはまだ新しい記法に対応していないといったことがあります、
例えば、サポートが終了したIE（Internet Explorer）では、エラーが出て全く動かないといったようなこともあったみたいです。バージョンによっても違いはあると思いますが、古い記法を使用していると様々なバグや脆弱性などの原因となってしまいます。
トランスパイラを使用すると、新しい記法で書かれたJavaScriptを古い記法に変換するといったことが可能となります。その逆ももちろん可能です。しかし、新しい機能や構文が追加された場合に、常に完璧に変換されるわけではないので、その点は注意が必要になります。
以上がモダンJavaScriptの概要の説明になります。
説明が抽象的な箇所が多く分かりにくかったと思いますが、興味のある方はぜひ調べてみてください。
