Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
type=”module”で始めるJavaScriptのモジュール化
Search
nal
July 29, 2022
Technology
0
900
type=”module”で始めるJavaScriptのモジュール化
社内勉強会でやった資料です
GitHubリポジトリ:
https://github.com/nalpan/script-type-module
nal
July 29, 2022
Tweet
Share
More Decks by nal
See All by nal
チーム開発におけるコンポーネントシステムの問題と解決施策
nalpan
0
1.4k
Other Decks in Technology
See All in Technology
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
240
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
210
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
260
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
8
4.3k
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
730
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
160
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
120
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
610
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
160
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
440
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.3k
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
730
Featured
See All Featured
Facilitating Awesome Meetings
lara
56
6.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Code Review Best Practice
trishagee
72
19k
Writing Fast Ruby
sferik
629
62k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
The Invisible Side of Design
smashingmag
302
51k
Building an army of robots
kneath
306
46k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Speed Design
sergeychernyshev
32
1.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
It's Worth the Effort
3n
187
28k
Transcript
type=”module”で始めるJavaScriptのモジュール化 中田 和宏
※この資料について • ライブコーディングを含みます • 後日追記したものをアップロードします
アジェンダ • <script>の旧来からある難点 • <script type=”module”>を使ってみる • type=”module”の特徴 • 実践でtype=”module”をどう使うか?
前提知識 • JavaScriptで関数が書けること
話さないこと • 空オブジェクト利用などのテクニック • defer, async • 動的import • rel="modulepreload"
• Node.js上での実行(バンドル、CJS etc…)
<script>の旧来からある難点
突然ですが こんなことありませんか?
scriptタグの順番を間違える…
scriptタグの順番を間違える… 関数が定義されているファイルと 関数を使うファイルの読み込みが逆 になっている
別ファイルで関数が上書きされる…
別ファイルで関数が上書きされる… 規模が大きくなっていき 別ファイルの関数名と被ってバグる
import / export を使ってみましょう!
demo(2-modules/1-non-type-modules)
<script type=”module”>を使ってみる
demo(2-modules/2-type-modules)
type=”module”の特徴
※以後、便宜上 「type="module"」=「モジュール化script」 「旧来のもの」=「グローバルscript」 と呼びます
type=”module”の特徴 • モジュール化script から グローバルscript は参照できる
demo(3-feature/1-callable-global)
type=”module”の特徴 • モジュール化script から グローバルscript は参照できる • グローバルscript と importした関数が被っているときは、
importが優先
demo(3-feature/2-1-module-priority)
※window オブジェクトを使えば グローバルscript を指定できる (3-feature/2-2-use-window-object)
type=”module”の特徴 • モジュール化script から グローバルscript は参照できる • グローバルscript と importした関数が被っているときは、
importが優先 • グローバルscript から モジュール化script は参照できない
demo(3-feature/3-not-refference-module)
type=”module”の特徴 • モジュール化script から グローバルscript は参照できる • グローバルscript と importした関数が被っているときは、
importが優先 • グローバルscript から モジュール化script は参照できない • 別の モジュール化script で定義されたものは利用できない
demo(3-feature/4-another-module)
type=”module”の特徴(その他) • モジュール化script の読み込み〜実行は defer と同じ • モジュール化script はCORS不可 •
モジュール化script はstrictモードで動作する
実践でどう使うか?
バンドルツールを入れられないPJ • 既存はそのまま動く • 新しく追加する部分はtype=”module” ◦ -> グローバルを参照できるため既存資産を使える ◦ ->
新しい部分はスコープが分けられ上書きの心配がない
• import忘れによるエラーは事前検知される ◦ 実行時に出ていたundefinedエラーがすぐわかる • 小規模であればバンドルも不要 もちろん新規画面にも
• MDN Web Docs ◦ https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide /Modules • デモコードリポジトリ ◦
https://github.com/nalpan/script-type-module 参考資料
Thank you!