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
データモデリング通り #2オンライン勉強会 ~方法論の話をしよう~
datayokocho
0
150
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
1
420
Intro to Software Startups: Spring 2025
arnabdotorg
0
240
Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)
kmiya84377
1
140
AIのグローバルトレンド 2025 / ai global trend 2025
kyonmm
PRO
1
140
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
400
Amazon S3 Vectorsは大規模ベクトル検索を低コスト化するサーバーレスなベクトルデータベースだ #jawsugsaga / S3 Vectors As A Serverless Vector Database
quiver
1
200
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.7k
九州の人に知ってもらいたいGISスポット / gis spot in kyushu 2025
sakaik
0
140
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
3
950
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
9
2.2k
薬屋のひとりごとにみるトラブルシューティング
tomokusaba
0
250
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Cult of Friendly URLs
andyhume
79
6.5k
Being A Developer After 40
akosma
90
590k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Balancing Empowerment & Direction
lara
1
540
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Optimizing for Happiness
mojombo
379
70k
BBQ
matthewcrist
89
9.8k
Faster Mobile Websites
deanohume
308
31k
Transcript
名前の話 Mozilla Japan N.Shimizu (nshimizu@mozilla-japan.org) 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ָㄎל