20170130-es2015-module

名前の話 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ָㄎל׸׷

20170130-es2015-module

20170130-es2015-module

chikoski

More Decks by chikoski

Other Decks in Technology

Featured

Transcript

名前の話 Mozilla Japan N.Shimizu ([email protected]) We are JavaScripters @ 21cafe

a = 10;

B a = 10;

B a = 10; a = 11;

DPOTU\8%5) )&()5^\ ^فؚٗٓيⰋ⡤ד剣⸬ GVODUJPOEJW \EJWכفؚٗٓيⰋ⡤ד剣⸬ SFUVSOEPDVNFOUDSFBUF&MFNFOU EJW ^ GVODUJPOSFOEFS

モジュール

モジュール：ソフトウェア部品のまとまり • 関数とオブジェクト、クラスをまとめたもので、特定の仕事（興味の対象）を実装しています • 例えば • Component / View model

JavaScript でのモジュール • ES2015で定義済みの機能です • なお実装しているブラウザは皆無… • Webpack で解決できます •

DPOTUEJW DPOG\^ DIJMESFO DSFBUF/PEF EJW DPOG DIJMESFO DPOTUTQBO DPOG\^

JNQPSUEPNGSPNEPN GVODUJPOSFOEFS JUFN \ DPOTUFMEPNEJW \DMBTTT/BNFJUFN^ DPOTUUJUMFEPNTQBO \DMBTT/BNFUJUMF^ JUFNUJUMF

JNQPSUEPNGSPNEPN رؿٕؓزדؒؗأه٦زׁ׸׷ؔـآؙؑزָ EPNח勲簂ׁ׸תׅկ؎ٝه٦ز儗הؒؗأه٦ ز儗ךせ⵸כ殯ז׏גְג圓ְתׇ׿ JNQPSU\EJW^GSPNEPN

DPOTU\8%5) )&()5 \ ^ GVODUJPOEJW \ SFUVSOEPDVNFOUDSFBUF&MFNFOU EJW ^

FYQPSUDPOTU8%5) FYQPSUDPOTU)&()5 FYQPSUEFGBVMUGVODUJPOSFOEFS \^ GVODUJPOEJW \^ֿךꟼ侧כؒؗأه٦زׁ׸תׇ׿ エキスポートの方法その1：宣言につける

DPOTU8%5) DPOTU)&()5 EFGBVMUGVODUJPOSFOEFS \^ GVODUJPOEJW \^ FYQPSU\8%5) )&()5 SFOEFS^ FYQPSU\SFOEFSBTEFGBVMU^

モジュールの効果：名前に関する悩みが減らせます • グローバルスコープへの露出が減らせます • エキスポートしない関数 / 変数 / 定数の名前は、これまでよりも自由に（気を使わずに）つけられます •