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
340
20170130-es2015-module
chikoski
February 01, 2017
Tweet
Share
More Decks by chikoski
See All by chikoski
20210825_ossx
chikoski
0
200
festudy02-wasm
chikoski
1
900
An overview of WebAssembly; how it is used, created, and applied?
chikoski
1
620
Functions in JavaScript
chikoski
1
1k
20171018-WASM
chikoski
2
1.2k
20171002-wejs
chikoski
1
510
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.2k
いまさら振り返るPromise
chikoski
1
470
Other Decks in Technology
See All in Technology
"好き"との生活/Regularly update profile with GitHub Actions
judeeeee
0
150
HEXA OSINT CTF V3 作戦会議
meow_noisy
0
110
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
210
小さな開発会社がWebサービスを作る理由
polidog
PRO
1
150
Tebiki株式会社 エンジニア採用資料
tebiki
0
4.1k
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
1
300
AWS パートナー企業でテクニカルサポートに従事して2年経ったので思うところをまとめてみた
kazzpapa3
3
1.3k
Janus
bkuhlmann
1
490
株式会社EventHub・エンジニア採用資料
eventhub
0
1.9k
オブザーバビリティの Primary Signals
onk
PRO
0
540
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
690
「ふりかえりのふりかえり」をふりかえり、実のあるふりかえりにする
naitosatoshi
0
220
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1355
200k
BBQ
matthewcrist
80
8.7k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Typedesign – Prime Four
hannesfritz
36
2.1k
Faster Mobile Websites
deanohume
297
30k
Designing for humans not robots
tammielis
247
25k
Designing with Data
zakiwarfel
95
4.8k
Why Our Code Smells
bkeepers
PRO
331
56k
The Pragmatic Product Professional
lauravandoore
24
5.8k
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ָㄎל