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
880
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
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
150
A2Aのクライアントを自作する
rynsuke
1
180
本が全く読めなかった過去の自分へ
genshun9
0
550
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
990
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
260
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
230
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
130
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
11k
M3 Expressiveの思想に迫る
chnotchy
0
110
【PHPカンファレンス 2025】PHPを愛するひとに伝えたい PHPとキャリアの話
tenshoku_draft
0
120
Witchcraft for Memory
pocke
1
420
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Raft: Consensus for Rubyists
vanstee
140
7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Balancing Empowerment & Direction
lara
1
380
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Side Projects
sachag
455
42k
Visualization
eitanlees
146
16k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
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!