初投稿です。
以下Udemy講座用のメモ書きとして残します。
モダンJavaScriptの基礎から始める挫折しないためのReact入門
セクション3 ReactやVue等を使うために知っておきたいJavaScriptの基本
1. DOMとは。
- HTMLを木構造で解釈したものであり、HTMLと同じ意味である。
- 従来のDOM操作として、以下のように素のDOMに対して直接操作していた
$('ul > li:first-child').remove();
2. 仮想DOMとは
- JavaScriptのオブジェクトで仮想的に作られたDOM
- JS上で仮想DOMの操作により差分を出し、変更部分のみDOMへ反映する
- 変更差分が出せるようになったため、レンダリングの複雑さが楽になりパフォーマンスが向上した。
3. yarnやnpm等のライブラリマネージャーについて
- 従来のJavaScriptは1ファイルに処理を書いたり、ライブラリとして読み込んでいた。
- yarnやnpm等は内部でNode.jsが作動することにより、従来のJavaScriptで難しかった依存関係や共有方法などが改善された。
- npmコマンドにてライブラリをダウンロードすると、package.jsonを元にpackage-lock.json(or yarn.lock)というファイルが自動生成され、node_modulesというライブラリの実態が展開される。
- node_modulesはライブラリ自体の要素となるためサイズが膨大であり、こちらはGitHubには上げない。
- package.jsonがあれば、どの端末でnpmダウンロードしても同じnode_modulesが展開される仕様。
4. モジュールバンドラーとは
- 複数のJS(css/image)ファイルを１つに纏めるためのもの
- webpackやViteが該当する。
5. トランスパイラとは
- 新しいJavaScriptの記法を古い記法へ変換してくれる。古いブラウザに対応できる。
- BABELやSWCが該当する。
6. SPAとは
- Single Page Application
- モダンJavaScriptはSPAが基本で、HTML１つのみでJSにより画面を書き換える。
- 画面遷移の待ち時間がなくなり、通信量も一部だけとなる為全体的に表示改善が行われる。
セクション3はここまでです。場合によっては再編集などを行います。
記事に問題があれば、取り下げ・編集を行いますのでコメントいただければと思います。
今後も勉強になった事があれば記事として残していこうと思います。