Web3D開発環境について勉強しよう

この日はWeb3D開発環境について勉強しました。

言語

• JavaScript
  • ES3
  • ES5 (JavaScriptとしての実用性が上がった)
  • ES6 (ECMAScript 2015)　（class構文）Babel（JSトランスパイラ: ES6 -> ES5へ変換）シンタックスシュガーが多い。
  • ECMAScript 2016 ~ 2019　今のモダンブラウザで全ての機能がサポートされた（2022年前半現在）
  • ECMAScript 2020 ~
• TypeScript
  • TypeScriptはJSへの変換まで。複数ファイルを１つ（バンドリング）にはしてくれない。
  • 10個の.tsがあれば10個の.jsに変換される。

---

Bundler

• Browserify
  • 最初期のバンドラー
• WebPack
  • 現行の定番。ほぼなんでもできる。WebPack5か6。
• Rollup.js
  • ライブラリを作る人がよく使う
• Parcel
  • ゼロコンフィグ系。アプリケーションを作る人に向く。
• ESBuild
  • 超高速動作。最近人気急上昇。
• Vite
  • 最近人気。
    ![[Pasted image 20220416222748.png]]

---

JavaScript実行環境

• Browsers
• Node.js
  • package.json はこのNode.js(とnpm)の仕様。
• Deno
  • package.jsonを使わないパッケージ管理方式。
  • ESModule志向

GlobalObject

windowオブジェクト
globalオブジェクト

---

JavaScriptのモジュール形式

• IIFE 
  • <script>タグで使うようなケースに向く。要はIIFEの中からグローバルオブジェクトとして公開する形式？。一番初心者的？なアプローチ。
• AMD
  • 赤い半導体メーカーのことではない。最初期のブラウザ向けJS非同期モジュール形式。requireJS
• CommonJS
  • Node.jsにおけるJSモジュール形式。let foo = requre('')というのはこのCommonJSモジュールのロードを指している。こちらは同期的に動作。
• UMD
  • Nodeとブラウザ両対応のモジュール形式。AMDとCommonJS、IIFEの両方に互換性がある。
• System
  • モジュールローダーSystemJSのモジュール形式。
• ESModule
  • これからの定番。JavaScript言語使用公式のモジュール形式。

---