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
560
Other Decks in Technology
See All in Technology
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
120
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
1.1k
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.4k
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
1.4k
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
160
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
460
AI開発ツールCreateがAnythingになったよ
tendasato
0
110
絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例
microcms
0
390
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
110
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
2
270
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
790
サンドボックス技術でAI利活用を促進する
koh_naga
0
180
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Site-Speed That Sticks
csswizardry
10
810
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Automating Front-end Workflow
addyosmani
1370
200k
BBQ
matthewcrist
89
9.8k
Navigating Team Friction
lara
189
15k
Writing Fast Ruby
sferik
628
62k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Producing Creativity
orderedlist
PRO
347
40k
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ָㄎל