Zenn
💭

モダンJavaScriptとは

2022/05/24に公開
JavaScript
React
webpack
npm
DOM
tech

初心者が、そもそもモダンJavaScriptとは何なのかをアウトプットしていこうと思います。
間違った内容がありましたら、ぜひコメントでご指摘いただけると幸いです。

モダンJavaScriptの特徴

明確なルールはないが、一般的には以下の特徴が挙げられる

  • React、Vue、Angularなどの仮想DOMを用いるライブラリ・フレームワーク
  • ES2015(ES6)以降の記法
  • webpack等のモジュールバンドラーを使用
  • Babel等のモジュールバンドラーを使用
  • SPAで作成

DOM、仮想DOMとは

DOM

Document Object Model の略。
ウェブ文書のためのプログラミングインターフェイスで、ページを表現するため、プログラムが文書構造、スタイル、内容を変更することができます。 DOMは文書をノードとオブジェクトで表現する
ノード...ドキュメントを構成するオブジェクトのこと。ノードはさらに種類に応じて「要素ノードbody」「テキストノード」「属性ノード」などに分類される

仮想DOM

仮想DOMとは、JavaScriptのオブジェクトで作られた仮想的なDOMのこと
実際のDOMとの差を比較し、変更リクエストがあった時にブラウザに反映させることで、DOMへの操作を最小限に抑えることができる。

ReactやVueなどのフレームワークでは仮想DOMが用いられており、レンダリングコストを最小限に抑えることができる

レンダリング...パースしてメモリへ展開した DOMツリーと CSSOMツリーを使い、ブラウザの画面に表示させるまでの処理のこと
参考記事：ブラウザレンダリングの仕組み - Zenn

パッケージマネージャーとは(npm/yarn)

パッケージの管理、インストール、アップグレードなどを担う管理ツールのこと
(例)JavaScriptのnpm、PHPのcomposer、Rubyのgem etc...

パッケージマネージャーの特徴

*依存関係を意識しなくてもいい
*チーム内でパッケージの共有やバージョン統一が簡単

下記のコマンドで追加が可能

npm  i [パッケージ名]

yarn add [パッケージ名]

上記のコマンド実行時に、package.jsonに情報が追加される
また、npmの場合はpackage-lock.json、yarnの場合はyarn.lockファイルが更新される

また、コマンドを実行すると、この二つのファイルを参照してnode_modulesが生成され、パッケージが展開される

※node_modulesフォルダはサイズが膨大になるのでGitHubにあげたりコピペで移動するのは厳禁

その2に続きます！

Discussion