type=”module”で始めるJavaScriptのモジュール化

社内勉強会でやった資料です
GitHubリポジトリ: https://github.com/nalpan/script-type-module

Transcript

1. type=”module”で始めるJavaScriptのモジュール化 中田 和宏
2. ※この資料について • ライブコーディングを含みます • 後日追記したものをアップロードします
3. アジェンダ • <script>の旧来からある難点 • <script type=”module”>を使ってみる • type=”module”の特徴 • 実践でtype=”module”をどう使うか？
4. 前提知識 • JavaScriptで関数が書けること
5. 話さないこと • 空オブジェクト利用などのテクニック • defer, async • 動的import • rel="modulepreload" • Node.js上での実行（バンドル、CJS etc…）
6. <script>の旧来からある難点
7. 突然ですが こんなことありませんか？
8. scriptタグの順番を間違える…
9. scriptタグの順番を間違える… 関数が定義されているファイルと 関数を使うファイルの読み込みが逆 になっている
10. 別ファイルで関数が上書きされる…
11. 別ファイルで関数が上書きされる… 規模が大きくなっていき 別ファイルの関数名と被ってバグる
12. import / export を使ってみましょう！
13. demo（2-modules/1-non-type-modules）
14. <script type=”module”>を使ってみる
15. demo（2-modules/2-type-modules）
16. type=”module”の特徴
17. ※以後、便宜上 「type="module"」=「モジュール化script」 「旧来のもの」=「グローバルscript」 と呼びます
18. type=”module”の特徴 • モジュール化script から グローバルscript は参照できる
19. demo（3-feature/1-callable-global）
20. type=”module”の特徴 • モジュール化script から グローバルscript は参照できる • グローバルscript と importした関数が被っているときは、 importが優先
21. demo（3-feature/2-1-module-priority）
22. ※window オブジェクトを使えば グローバルscript を指定できる （3-feature/2-2-use-window-object）
23. type=”module”の特徴 • モジュール化script から グローバルscript は参照できる • グローバルscript と importした関数が被っているときは、 importが優先 • グローバルscript から モジュール化script は参照できない
24. demo（3-feature/3-not-refference-module）
25. type=”module”の特徴 • モジュール化script から グローバルscript は参照できる • グローバルscript と importした関数が被っているときは、 importが優先 • グローバルscript から モジュール化script は参照できない • 別の モジュール化script で定義されたものは利用できない
26. demo（3-feature/4-another-module）
27. type=”module”の特徴（その他） • モジュール化script の読み込み〜実行は defer と同じ • モジュール化script はCORS不可 • モジュール化script はstrictモードで動作する
28. 実践でどう使うか？
29. バンドルツールを入れられないPJ • 既存はそのまま動く • 新しく追加する部分はtype=”module” ◦ -> グローバルを参照できるため既存資産を使える ◦ -> 新しい部分はスコープが分けられ上書きの心配がない
30. • import忘れによるエラーは事前検知される ◦ 実行時に出ていたundefinedエラーがすぐわかる • 小規模であればバンドルも不要 もちろん新規画面にも
31. • MDN Web Docs ◦ https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide /Modules • デモコードリポジトリ ◦ https://github.com/nalpan/script-type-module 参考資料
32. Thank you!