やったこと

• React チュートリアル
• Udemy : モダンJavaScriptの基礎から始める挫折しないためのReact入門

学んだこと

仮想DOM

従来

DOMを直接操作していた。
これはレンダリングコストの増加、コードの複雑化を招いた。

仮想DOMの登場

DOMを直接操作するのではなく、仮想的なDOMを生成し、これに対して変更を加える。
そして、仮想的なDOMと実DOMの差分のみ、実DOMに変更を加える。
差分のみDOM操作するため、従来手法よりDOM操作量が減り、高速となる。

モジュールバンドラー

モジュール（部品）をバンドルする（束ねる）という、文字通りの機能。
複数ファイルを一つにまとめることで、通信コストが下がり、高速化が期待できる。

イメージはzip圧縮。
代表的なサービスはWebpack。

トランスパイラ

新しいJavascript構文を、古い構文に変換する機能。
開発したJavascriptを、どのブラウザでも動作させることを目的とする。

登場した背景

利用者が（新しいJavascript構文に対応していない）古いブラウザを使用している可能性がある。
そのような古いブラウザでもWEbアプリを利用できる（≒Javascriptを動作させる）ために、新しいJavascript構文を、古いでもブラウザでも動作する古いJavascript構文に変換したいという需要が生まれた。

Javascriptの変数アレコレ

var

• 上書き OK
• 再代入 OK

まず使用しない。

let

• 上書き OK

• 再代入 NG

  • 'xxx' has already been declared. 基本はこれ。

const

• 上書き NG
  • Assignment to constant variable.
• 再代入 NG
  • 'xxx' has already been declared.

いわゆる、他言語でいう定数。
constでは、再代入を防ぐことはできても、オブジェクトの変更は防げない。
言い換えると、constは、オブジェクトの不変性は担保しない。

分割代入

const user = {
  name: 'test',
  age: 20
}

const {name,age} = user // ココが分割代入
console.log(`name: ${name}, age: ${age}`)

• user.name の方が、 name だけよりも情報量が多い。
• name だけだと、何の名前かわからなくなりかねない。
  • これは、分割代入処理と、代入した変数を使用する箇所が離れるほど、わからなくなりそう
• 一方で、 user.name 、 user.age と、何度も user. を繰り返すのは冗長に感じる。

自分なりの結論 : 分割代入した変数と、分割元のコレクションは、なるべく近くで使う方がよさそう。