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
20170130-es2015-module
Search
chikoski
February 01, 2017
Technology
0
430
20170130-es2015-module
chikoski
February 01, 2017
Tweet
Share
More Decks by chikoski
See All by chikoski
20210825_ossx
chikoski
0
310
festudy02-wasm
chikoski
1
990
An overview of WebAssembly; how it is used, created, and applied?
chikoski
1
730
Functions in JavaScript
chikoski
1
1.2k
20171018-WASM
chikoski
2
1.4k
20171002-wejs
chikoski
1
590
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.5k
いまさら振り返るPromise
chikoski
1
570
Other Decks in Technology
See All in Technology
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
daisuketakeda
2
100
実装で解き明かす並行処理の歴史
zozotech
PRO
1
350
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
許しとアジャイル
jnuank
1
130
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
980
Where will it converge?
ibknadedeji
0
180
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
180
多野優介
tanoyusuke
1
440
20250929_QaaS_vol20
mura_shin
0
110
バイブコーディングと継続的デプロイメント
nwiizo
2
430
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
200
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
300
Featured
See All Featured
A designer walks into a library…
pauljervisheath
209
24k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Designing Experiences People Love
moore
142
24k
Scaling GitHub
holman
463
140k
Gamification - CAS2011
davidbonilla
81
5.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Practical Orchestrator
shlominoach
190
11k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
名前の話 Mozilla Japan N.Shimizu (
[email protected]
) We are JavaScripters @ 21cafe
(2017/01/31)
a = 10;
B a = 10;
B a = 10; a = 11;
DPOTU\8*%5) )&*()5^\ ^فؚٗٓيⰋ⡤ד剣⸬ GVODUJPOEJW \EJWכفؚٗٓيⰋ⡤ד剣⸬ SFUVSOEPDVNFOUDSFBUF&MFNFOU EJW ^ GVODUJPOSFOEFS
DPNQPOFOUT \SFOEFSכفؚٗٓيⰋ⡤ד剣⸬ DPOUBJOFSEPDVNFOURVFSZ4FMFDUPS DPOUBJOFS فؚٗٓيⰋ⡤ד剣⸬ GPS DPOTUDPNQPOFOUPGDPNQPOFOUT \DPNQPOFOUכֿךـٗحؙד剣⸬ WBSFMJSFOEFS 8*%5) )&*()5 FMכꟼ侧Ⰻ⡤ד剣⸬ DPOUBJOFSBQQFOE$IJME FM ^ ^ スコープ:名前の有効範囲
モジュール
モジュール:ソフトウェア部品のまとまり • 関数とオブジェクト、クラスをまとめたもので、特定の仕事(興味の対象)を実装しています • 例えば • Component / View model
/ Model / Event dispatch / State management / etc • Authentication / Dash board / Detailed view • Data Visualization / 3D Graphics / DOM manipulation • モジュールを作ることの意義: • 内部実装を隠蔽して、簡単なインタフェースを提供できる • 名前空間を分けられる • 外部から見えない(露出しない)ものの名付けに苦労しなくていい
JavaScript でのモジュール • ES2015で定義済みの機能です • なお実装しているブラウザは皆無… • Webpack で解決できます •
npm install webpack@2 • モジュールでできること • 自動的に strict モードになります("use strict"; を書かなくてもよくなります) • import / export 文が使えるようになります • export で露出したものを import を使って名前に束縛します • 束縛:ものに名前をつけること
DPOTUEJW DPOG\^ DIJMESFO DSFBUF/PEF EJW DPOG DIJMESFO DPOTUTQBO DPOG\^
DIJMESFO DSFBUF/PEF TQBO DPOG DIJMESFO DPOTUJNH DPOG\^ DIJMESFO DSFBUF/PEF JNH DPOG DIJMESFO DPOTU%0.\ EJWEJW TQBOTQBO JNHJNH ^ FYQPSU\EJW TQBO^ FYQPSU\%0.BTEFGBVMU^ export 文の使用例
JNQPSUEPNGSPNEPN GVODUJPOSFOEFS JUFN \ DPOTUFMEPNEJW \DMBTTT/BNFJUFN^ DPOTUUJUMFEPNTQBO \DMBTT/BNFUJUMF^ JUFNUJUMF
DPOTUBSUXPSLEPNJNH JNH \TSDJUFNBSUXPSL^ FMBQQFOE$IJME UJUMF FMBQQFOE$IJME BSUXPSL SFUVSOFM ^ export された関数の利用
JNQPSUEPNGSPNEPN رؿٕؓزדؒؗأه٦زׁؔـآؙؑزָ EPNח勲簂ׁתׅկ؎ٝه٦ز儗הؒؗأه٦ ز儗ךせכ殯זגְג圓ְתׇ JNQPSU\EJW^GSPNEPN
ؒؗأه٦زׁせךٔأزך⚥ַծ さ荜ׅךח勲簂ׁתׅկ DPOTU%0.\ EJWEJW BSSPXGVODUJPO TQBOTQBO BSSPXGVODUJPO JNHJNH ^ FYQPSU\%0.BTEFGBVMU^ رؿٕؓزؒؗأه٦ز FYQPSU\EJW TQBO^ せ➰ֹؒؗأه٦ز デフォルトエキスポートと名前付きエキスポート
DPOTU\8*%5) )&*()5 \ ^ GVODUJPOEJW \ SFUVSOEPDVNFOUDSFBUF&MFNFOU EJW ^
GVODUJPOSFOEFS DPNQPOFOUT \ DPOUBJOFSEPDVNFOURVFSZ4FMFDUPS DPOUBJOFS GPS DPOTUDPNQPOFOUPGDPNQPOFOUT \ WBSFMWBSFMJSFOEFS 8*%5) )&*()5 DPOUBJOFSBQQFOE$IJME FM ^ ^
FYQPSUDPOTU8*%5) FYQPSUDPOTU)&*()5 FYQPSUEFGBVMUGVODUJPOSFOEFS \^ GVODUJPOEJW \^ֿךꟼ侧כؒؗأه٦زׁתׇ エキスポートの方法その1:宣言につける
DPOTU8*%5) DPOTU)&*()5 EFGBVMUGVODUJPOSFOEFS \^ GVODUJPOEJW \^ FYQPSU\8*%5) )&*()5 SFOEFS^ FYQPSU\SFOEFSBTEFGBVMU^
エキスポートの方法その2:リストを作る
JNQPSU BT3FOEFSFSGSPNSFOEFSFS Ⰻגךך؎ٝه٦ز׃גծ䭷㹀׃せח勲簂׃תׅ JNQPSU\8*%5) )&*()5^GSPNSFOEFSFS 暴㹀ךך؎ٝه٦ز׃ג勲簂׃תׅ JNQPSU\8*%5)BTX^GSPNSFOEFSFS 暴㹀ךך؎ٝه٦ز׃גծ䭷㹀ׁせח勲簂׃תׅ 名前つきエキスポートのインポート方法
モジュールの効果:名前に関する悩みが減らせます • グローバルスコープへの露出が減らせます • エキスポートしない関数 / 変数 / 定数の名前は、これまでよりも自由に(気を使わずに)つけられます •
エキスポートされた時の名前に関係ない名前で、インポートできます • プログラムを細かく分割できるため、メンテナンス性もあがります GVODUJPOIFMQFS \^ GVODUJPOEJW \IFMQFS ^ GVODUJPOTQBO \IFMQFS ^ FYQPSU\EJW TQBO^ JNQPSU\EJWBTE^GSPNNPE E 䊩ד㹀纏׃גְꟼ侧EJWָㄎל