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.5k
Other Decks in Technology
See All in Technology
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
2
330
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
290
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
simosako
2
370
SRE × マネジメントレイヤーが挑戦した組織・会社のオブザーバビリティ改革 ― ビジネス価値と信頼性を両立するリアルな挑戦
coconala_engineer
0
280
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
210
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
150
Observability — Extending Into Incident Response
nari_ex
1
540
AIでデータ活用を加速させる取り組み / Leveraging AI to accelerate data utilization
okiyuki99
4
1.2k
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
400
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
piyonakajima
0
150
Building a cloud native business on open source
lizrice
0
190
Featured
See All Featured
Building Adaptive Systems
keathley
44
2.8k
Practical Orchestrator
shlominoach
190
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Bash Introduction
62gerente
615
210k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
The World Runs on Bad Software
bkeepers
PRO
72
11k
The Language of Interfaces
destraynor
162
25k
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!