はじめに
脱初心者にむけてアウトプットをしていこうと思って、
記事を書いております。
私は、まだ現場に出たことのない完全にど素人です。
間違ったことがありましたら、ぜひコメントいただけると幸いです。
対象読者
JavaScriptの基本的な文法を学んだ後に、VueやReact,
Angularを学ぼうと決めている方、
モダンな(流行しているもの) JavaScriptの開発について知りたい方。
モダン JavaScriptとは？
私が知っている範囲内で説明すると
1. React、Vue、Angular、Riot等の仮想DOMを用いるライブラリ/フレームワーク。
2. パッケージマネージャ(npm,yarnなど)を使っている。
3. 主にES2015以降の記法を使っている
4. モジュールバンドラー(Webpackなど)を使用している
5. トランスパイラ(Babelなど)を使用している。
以上の5つがそれぞれ含まれている場合、モダンなJavaScriptの開発と言えるでしょう。
一つ一つ簡易的に紹介していこうと思います。
仮想DOMとは
React、Vue、Angulerなど、人気のライブラリやフレームワークには共通して、仮想DOMという手法を使っている。
まず、DOMとはHTMLを構築する木構造のこと。
このDOMをJavaScriptのオブジェクトに再現して、リクエストがあった時にブラウザに反映させることができるのが仮想DOMである。
パッケージマネージャとは（npm/yarn）
Node.jsが開発される前までは、一つのファイルに全ての処理を書いていたらしい、、そしてNode.jsが開発されてからは様々なフレームワークが開発され、それによって、プログラムの依存関係が問題になった。
この問題を解決したのがパッケージマネージャーである。
それぞれの依存関係を解決し、さらに、世界中の公開されているパッケージをコマンド一つで使えるようになった。
つまり、パッケージマネージャーとは、依存関係を勝手に解決してくれるもの。
ES2015以降の記法とは
ESとはJavaScriptの標準規格です。（コードを書く時のルール）
その2015以降から様々な便利な機能が追加されました。
三つだけ紹介します、
詳しくは→https://qiita.com/soarflat/items/b251caf9cb59b72beb9b
constとlet
letは再宣言が不可能。
constは再宣言と、再代入が不可能。
今までは変数宣言をする時に、varしかなかったため、間違えて変数を二重に定義してしまったりした。
テンプレート文字列
``バッククォートで文字列を囲む。
${}を使えば、変数などを展開できる。
アロー関数
functionを省略できる、
条件はあるが、return文も省略できる。
モジュールバンドラとは(Webpackなど)
一言でいうなら、複数のファイルを一つにまとめてくれるもの。
そうすることで、読み込み速度が上がる。
トランスパイラとは（Babel）
新しいJavaScriptの記法を古い記法に変換してくれるもの
JavaScriptはブラウザの言語なので、ブラウザによって表示できる記法が異なるため、必要らしい。
終わり
筆者の解釈で書いているために、言葉足らずなところや、説明不足なところもあると思います。
なので、気兼ねなくコメントしていただければと思います。
また、これ以外にも、モダンJavaScriptの要素がありましたら、教えていただけると幸いです。
最後まで、読んでくださり、ありがとうございます。