モダンJSの基本概念

1.そもそもJSとは

• HTML,CSSだけでは実現できない、Webブラウザ上で複雑な動きを実装するための言語

2. モダンJSとは

• 明確な定義はないが、以下のもの指すことが多い
  • React, Vue, Angularなどの仮想DOMを用いるライブラリ・フレームワークを使用する
  • npm・yarnなどのパッケージマネージャを使用する
  • ES2015以降の記法を使用する
  • Webpack, Viteなどのモジュールバンドラーを使用
  • Babel, SWCなどのトランスパイラを使用

3. 仮想DOMとは

そもそもDOMとは

• Document Object Modelの略
• HTMLを解釈して木構造で表現したもの(DOMツリー)

従来のDOM操作

• これまではDOMを直接操作
  • 毎回DOM全体を読み込む -> レンダリングコストが高い
  • 要素の変更があらゆる箇所で行われる -> コードの複雑化

仮想DOMとは

• JSのオブジェクトで仮想的に作られたDOM
  • いきなりDOMの操作を行わない
  • JS上で仮想のDOMを操作してみて、差分が出た部分のみ実際のDOMに反映する

4. パッケージマネージャ

かつてのJS

• 1つのJSファイルに全ての処理を記述
  • コードのカオス化
  • 再利用が不可能

無理ゲー

少し前のJS

• 他のJSファイルを読み込む
  • コードの再利用・共通化ができるように
  • 読み込み順の順序を意識しないとエラーが発生(依存関係)
  • 何がどこから読み込まれたものかわからない

厳しい

パッケージマネージャを使うとどうなる

• 依存関係を勝手に解決
• import先が明示的に表示
• コマンド1つでパッケージをインストール可能
• チーム内でパッケージの共有も簡単に

幸せ

npm・yarnの基本

• NPM
  • パッケージの保存先(レジストリ)
  • 世界中のパッケージが保存されている
• package.json
  • 設計書
  • インストールされているパッケージの一覧
• package-lock.json
  • 自動生成ファイル
  • 依存関係やバージョン関係を解決
• node_modules
  • 各モジュールの実態ファイル
  • サイズが膨大なのでgitには追加しない

5. ES2015とは

ES(ECMAScript)とは

• JSの標準規格
• ECMAは、欧州電子計算機工業会の略
• 毎年1回発表
• ES5 = ES2014, ES6 = ES2015
• ES20xxの方が一般的
• ES2015で大きく言語仕様が改変された

ES2015で追加された規格

• let, const
• アロー構文
• Class
• 分割代入
• テンプレート文字列
• スプレッド構文
• Promise
• などなど…

6. モジュールバンドラーとは

• 1つのJS(css・image)ファイルを1つにまとめるもの
  • 開発においてはJSファイルを分割する方が効率的
  • ただ、実行時には分かれていないほうがパフォーマンスがいい
  • -> 分けられているファイルをいい感じにまとめてくれる(本番ビルド)
  • 今まではWebpackが主流だったが、最近はViteと呼ばれるものが勢力を伸ばしている

7. トランスパイラとは

• 新しい記法を古い記法に変換してくれるもの
  • ブラウザによっては最新のESxxに対応していないものがある
  • 開発時に古い記法を用意するのは面倒
  • -> 実行時にだけ古い記法に変換する
  • Babel, SWCなど

8. SPAとは

従来のWebシステム

• リンクをクリック -> その都度対応するHTMLファイルを送信

SPAを利用したWebシステム

• リンクをクリック -> そのページを表示させるのに必要なデータのみを送信

SPAのメリット

• ページ遷移時のちらつきがなくなる
• 表示速度が向上する
• コンポーネント分割が容易になる