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
720
Functions in JavaScript
chikoski
1
1.2k
20171018-WASM
chikoski
2
1.4k
20171002-wejs
chikoski
1
580
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.4k
いまさら振り返るPromise
chikoski
1
560
Other Decks in Technology
See All in Technology
GMOペパボのデータ基盤とデータ活用の現在地 / Current State of GMO Pepabo's Data Infrastructure and Data Utilization
zaimy
3
210
猫でもわかるQ_CLI(CDK開発編)+ちょっとだけKiro
kentapapa
0
3.4k
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか?
cap120
1
440
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
750
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
k6s4i53rx
0
130
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
bengo4com
0
2.2k
o11yツールを乗り換えた話
tak0x00
2
520
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
890
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
390
Serverless Meetup #21
yoshidashingo
1
110
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
140
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
moriyuya
1
1.2k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Facilitating Awesome Meetings
lara
54
6.5k
Bash Introduction
62gerente
614
210k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Writing Fast Ruby
sferik
628
62k
Music & Morning Musume
bryan
46
6.7k
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ָㄎל