Reactを学ぶ前にモダンなJavaScriptについて知っておく

スポンサーリンク

よく言語の特徴でモダンなという言葉がでてきます。

直訳すると近代的なという意味があるのですが、このモダンはいつの時点の何が基準になってモダンと言っているのかよくわかりません。
今勉強中のReact(リアクト)にもモダンなJavaScriptという言葉が出てきます。

そこで今回は、モダンJavaScriptについてまとめてみました。

結論から言うと、明確なルールはないみたいですが
以下のようなものが一般的にはモダンなJavaScript環境と言われているみたいです。

  • 仮想DOMが使われている
  • パッケージマネージャーを使っている
  • ES2015以降の記法で書かれている
  • モジュールバンドラーを使用
  • トランスパイラを使用している
  • SPA(シングルページアプリケーション)で作られている

仮想DOM

DOMは、Document Object Modelの略でHTMLなどの文書に含まれる要素やテキストのデータをオブジェクトとして扱う仕組みです。

chromeを起動し,F12の開発者モードでElementsを除くと現在選択されているDOMを確認することができます。

モダンではないJavaScriptでは、このDOMを直接指定して書き換えを行っていました。DOMを直接指定して書き換える処理は、処理が分かりやすい反面、画面の表示速度が遅いというデメリットがありす。

この表示速度の問題を解決するために登場したのが仮想DOMという技術です。

この技術は、直接DOMを指定せずにJavaScriptで作れた仮想DOMというオブジェクトに書かれて、実際のDOMと仮想DOMとを比較して、相違がある差分のみを実際のDOMに反映しているので画面表示のコストが少なく済みます。

仮想DOMの技術は、ReactやVue,Angularなどのフレームワークでは、使う側が意識して使うわけではなく勝手に処理してくれるものなので概念について知っておく程度で問題ないと思います。

パッケージマネージャー

モダンではない、Javascriptの頃は1つのファイルに大量のソースコードを書いていました。私もよくわからない数千行のコードが書かれているjsファイルを見て、嫌になりました。そこでこの問題を解決するためにパッケージマネージャーというパッケージ管理ツールが導入されました。

JavaScriptで使われているパッケージマネージャーは,npmyarnが主流です。

これらのパッケージ管理ツールを使うことによって、外部で使われている便利なパッケージはnpmなどで簡単にインストールすることが可能です。自分が実現したい機能がすでにほかの人が作っていて外部に公開されていれば簡単にインストールできるので非常に便利です。

また、インストールしたパッケージも管理されているのでアップグレードしたり、別のパソコンに同じ環境を構築したいときなどにも便利です。また、依存関係があるパッケージをインストールする場合には意識いなくとも自動で解決してくれるのも大きいです。

他の言語でもパッケージ管理ツールと同じような仕組みがあります。例えば、

  • Pythonであればpip
  • Rubyであればgem
  • PHPの場合はcomposer
    などです。

ES2015以降の記法で書かれている

JavaScriptは、ECMAScript(Eurpean Computer Manufactures Association)という組織で標準仕様が作成されています。この標準仕様は基本的に1年に1回更新するというルールがあります。

・ES5:2009年にリリース
・ES5.1:2011年にリリース
ES2015:2015年にリリース
・ES2016:2016年にリリース
・ES2017:2017年にリリース
・ES2018:2018年にリリース
・ES2019:2019年にリリース
・ES2020:2020年にリリース
・ES2021:2021年にリリース

モダン JavaScriptは、一般的に2015年にリリースされたES2015以降の記法で書かれたもののことを示しています。

ES2015でletやconstを用いた変数宣言やClass構文などのモダン JavaScriptでよく使う機能が追加されています。

モジュールバンドラー

モジュールバンドラーは、複数のモジュールの依存関係を自動で解決して一つにまとめてくれる機能のことです。

JavaScriptの大規模開発では、下手すると数万行のJavaScriptのコードを書くこともあり得ます。この時に保守性を考慮してファイルを機能ごとに細かく分割するとソースの管理がしやすくなるのですが、同時にHTTPからJavaScriptの分割したファイルごとに読込を行う必要があるため、パフォーマンスがよくありません。

コードを分割すると管理や保守性は上がりますがパフォーマンスが落ちるという相反関係があります。
これを解決するためにモジュールバンドラーが、分割したファイルを一つにバンドルしてくれるため大規模開発にもJavaScriptが使いやすくなりました。

モジュールバンドラーで現在の主流はWebpackでNode.js環境で使えるモジュールバンドラーです。

トランスパイラ

トランスパイラは、上述したES2015以降の記法の違いを吸収して、ブラウザで実行できる形に変換する仕組みです。トランスパイラを使用することでESの最新の記法が一部のブラウザで非対応だった場合も新しい記法で記述したJavaScriptをすべてのブラウザが動く古い記法に変換(トランスパイル)してくれます。

ちなみに現在はBabelというトランスパイラが主流です。

SPA(シングルページアプリケーション)

モダンJavaScriptで作られるWebアプリケーションは、SPA(シングルページアプリケーション)で作られることが主流になっています。

SPAは、HTMLファイルは、一つでJavaScriptで画面を書き換えることによって画面遷移を表現するアプリケーションです。

このSPAのメリットとして

  • 余計なりクエストが無くなることでパフォーマンスが向上する。
  • 画面の要素をコンポーネントとして使いまわしできる。

ユーザー側、開発側双方にメリットがあります。

まとめ

モダンJavaScriptの定義は明確にはないですが以下の項目が参考基準になるのかなと思っています。

  • 仮想DOMが使われている
  • パッケージマネージャーを使っている
  • ES2015以降の記法で書かれている
  • モジュールバンドラーを使用
  • トランスパイラを使用している
  • SPA(シングルページアプリケーション)で作られている

コメント

タイトルとURLをコピーしました