JavaScriptを基本からまとめてみた【18】【Reactを使うために知っておきたいJavaScriptの基本①】

##まずは概念を理解して、それから手を動かして学ぶ。

##モダンJavaScriptとは

• 明確な定義はないが以下あたりを指すことが常

• React、Vue、Angular、Riot等の仮装DOMを用いるライブラリ/フレームワークを使用

• npm/yarn等のパッケージマネージャーを使用
  ➡︎ 内部ではNode.jsが動いてくれる
  依存関係が勝手に解決してくる
  import先が明示的に分かれる
  世界的に公開されているパッケージコマンドを１つで利用可能
  チーム内での共有も簡単に

• 主にES2015(ES6)以降の記法を使用
  ※ES5=ES2014、ES6=ES2015

• webpack等のモジュールバンドラーを使用

• Babel等のトランスパイラを使用

##DOMとは

• Document Object Modelの略
• HTMLなどを解釈し木構造で表現したもの

##仮想DOMとは

• JavaScriptのオブジェクトで仮想的に作られたDOM

➡︎ いきなりDOMを操作せず、JS上で仮想DOMを操作し差分を出してからDOMに反映

##モジュールバンドラーとは

#####複数のjs(css/image)ファイルを１つにまとめるためのもの

##トランスパイラとは

#####新しいJavaScriptの気泡を古い記法に変換してくれる

##SPA (Single Page Application) とは

• モダンJavaScirptはSPAが基本
• HTMLは１つのみでJavaScirptで画面を置き換える

##SPA (Single Page Application) のメリット

• ページ遷移毎のチラつきがなくなる
• 表示速度のアップによるユーザー体験向上
• コンポーネント分割が容易になることでの開発効率アップ

##参考サイト
[モダンJavaScriptの基礎から始める挫折しないためのReact入門]
(https://www.udemy.com/course/modern_javascipt_react_beginner/learn/lecture/22032604#overview)