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
JavaScript再入門
Search
Kazunori-Kimura
January 19, 2018
Technology
0
190
JavaScript再入門
BabelによるモダンJavaScript開発
Kazunori-Kimura
January 19, 2018
Tweet
Share
More Decks by Kazunori-Kimura
See All by Kazunori-Kimura
path-parser
kazunorikimura
0
320
objectのcloneを行う/How to clone of the object in js
kazunorikimura
0
330
クライアントサイドで大きなデータを扱うときのお話/Web Worker & IndexedDB
kazunorikimura
0
570
How freelance programmer works
kazunorikimura
0
89
moment.js
kazunorikimura
0
59
sequelize.pdf
kazunorikimura
0
500
Toward the world of "ready player one"
kazunorikimura
0
63
npmの便利なパッケージ: forever, winser
kazunorikimura
0
880
npmの便利なパッケージ: Jest
kazunorikimura
0
97
Other Decks in Technology
See All in Technology
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
140
Swift Testingのconfirmationを コードリーディング/Dive into Swift Testing confirmation
laprasdrum
2
260
プログラム検証入門
riru
6
870
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
230
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
270
チームビルディングは"感性"で向き合おう / Team Building with Awareness
kohzas
0
260
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
240
どこよりも遅めなWinActor Ver.7.5.0 新機能紹介
tamai_63
0
210
Cloud Run と GitHub Template Repository による軽量なアプリケーションプラットフォーム/ #nikkei_tech_talk
nikkei_engineer_recruiting
0
110
LINEヤフーのフロントエンド組織・体制の紹介
lycorp_recruit_jp
1
1.2k
Technical Writing Meetup vol.35
soracom
PRO
2
120
学術機関におけるID連携とOpenID Connect
fujie
0
250
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
36
7k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Scaling GitHub
holman
458
140k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
Atom: Resistance is Futile
akmur
261
25k
It's Worth the Effort
3n
182
27k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
How STYLIGHT went responsive
nonsquared
93
5.1k
The Mythical Team-Month
searls
218
43k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Transcript
JavaScript࠶ೖ BabelʹΑΔϞμϯJavaScript։ൃ 2018-02-24 ଜ ݑن
+BWB4DSJQUͱʁ #BCFMʹΑΔϞμϯ+BWB4DSJQU։ൃ
+BWB4DSJQUͱʁ #BCFMʹΑΔϞμϯ+BWB4DSJQU։ൃ
2ͭͷJavaScript ΫϥΠΞϯταΠυJavaScript αʔόαΠυJavaScript
ΫϥΠΞϯταΠυJavaScript ϒϥβͱυΩϡϝϯτ ΦϒδΣΫτ Ϟσϧ (DOM) Λ੍ޚ͢ΔΦϒδΣΫτ Λఏڙ͢Δ͜ͱʹΑΓίΞݴޠΛ֦ு
αʔόαΠυJavaScript αʔόͷՔಇʹؔ࿈͢ΔΦϒδΣΫτ Λఏڙ͢Δ͜ͱʹΑΓίΞݴޠΛ֦ு
αʔόαΠυJavaScript αʔόͷՔಇʹؔ࿈͢ΔΦϒδΣΫτ Λఏڙ͢Δ͜ͱʹΑΓίΞݴޠΛ֦ு /PEFKT .POHP%# 3IJOP etc...
2ͭͷJavaScript αʔόαΠυJS ΫϥΠΞϯταΠυJS ίΞݴޠ
ྺུ࢙֓ ग़དྷࣄ ϒϨϯμϯɾΞΠΫ͕-JWF4DSJQUΛΔ /FUTDBQFʹ+BWB4DSJQU͕ࡌ͞ΕΔ *OUFSOFU&YQMPSFSʹ+4DSJQU͕ࡌ͞ΕΔ
&$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQU Ҏ߱ɺຖΞοϓσʔτ
ྺུ࢙֓ ग़དྷࣄ ϒϨϯμϯɾΞΠΫ͕-JWF4DSJQUΛΔ /FUTDBQFʹ+BWB4DSJQU͕ࡌ͞ΕΔ *OUFSOFU&YQMPSFSʹ+4DSJQU͕ࡌ͞ΕΔ
&$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQU Ҏ߱ɺຖΞοϓσʔτ &$."4DSJQU+BWB4DSJQUͷඪ४ن֨
ྺུ࢙֓ ग़དྷࣄ ϒϨϯμϯɾΞΠΫ͕-JWF4DSJQUΛΔ /FUTDBQFʹ+BWB4DSJQU͕ࡌ͞ΕΔ *OUFSOFU&YQMPSFSʹ+4DSJQU͕ࡌ͞ΕΔ
&$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQU Ҏ߱ɺຖΞοϓσʔτ (NBJM (PPHMF.BQ
ྺུ࢙֓ ग़དྷࣄ ϒϨϯμϯɾΞΠΫ͕-JWF4DSJQUΛΔ /FUTDBQFʹ+BWB4DSJQU͕ࡌ͞ΕΔ *OUFSOFU&YQMPSFSʹ+4DSJQU͕ࡌ͞ΕΔ
&$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQU Ҏ߱ɺຖΞοϓσʔτ QSPUPUZQFKT K2VFSZ
දతͳJavaScript࣮ ࣮ ࡌιϑτΣΞ 7 (PPHMF$ISPNF 0QFSB /PEFKT 4QJEFS.POLFZ 'JSFGPY
+BWB4DSJQU$PSF 4BGBSJ 8FC,JU $IBLSB *OUFSOFU&YQMPSFS &EHF
JavaScript࣮͝ͱͷࠩҟ ༷Ͱࡦఆ͞Ε͍ͯΔ͕ɺJavaScript ࣮ʹΑͬͯ·ͩࡌ͞Ε͍ͯͳ͍
JavaScript࣮͝ͱͷࠩҟ ༷Ͱࡦఆ͞Ε͍ͯΔ͕ɺJavaScript ࣮ʹΑͬͯ·ͩࡌ͞Ε͍ͯͳ͍ BabelͱPolyfillΛ༻
+BWB4DSJQUͱʁ #BCFMʹΑΔϞμϯ+BWB4DSJQU։ൃ
Babel ECMAScript2015Ҏ߱ͷιʔεΛ ECMAScript5ʹมͯ͠ग़ྗ
ྺུ࢙֓ ग़དྷࣄ ϒϨϯμϯɾΞΠΫ͕-JWF4DSJQUΛΔ /FUTDBQFʹ+BWB4DSJQU͕ࡌ͞ΕΔ *OUFSOFU&YQMPSFSʹ+4DSJQU͕ࡌ͞ΕΔ
&$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQUୈ൛ &$."4DSJQU Ҏ߱ɺຖΞοϓσʔτ
มલ
มલ BTZODBXBJU
มޙ
มޙ XIJMF ແݶϧʔϓ ʹஔ͖Θ͍ͬͯΔ ࣮֬ʹ࣮͞Ε͍ͯΔػೳʹม
Polyfill ࠷ۙͷػೳΛαϙʔτ͍ͯ͠ͳ͍ϒϥ βͰͦͷػೳΛ͑ΔΑ͏ʹ͢Δ
"SSBZQSPUPUZQFpOE +BWB4DSJQUc.%/
BabelʹΑΔ JavaScript։ൃ
ϑΥϧμɾϑΝΠϧߏ
BabelͷΠϯετʔϧ > npm install --save-dev babel-cli babel- preset-env babel-polyfill
Babelͷઃఆ (.babelrc) ࠷খߏɻλʔήοτϒϥβΛࢦఆ͢ΔͳͲ ৄࡉͳઃఆՄೳɻ
OQNTDSJQUTOPEF@NPEVMFTʹ1"5)͕ ௨͍ͬͯΔͷͰɺ$-*πʔϧΛ͏ͷʹศར
Babelͷ࣮ߦ > npm run build:babel
PolyfillͷಡΈࠐΈ babelͰੜͨ͠ϑΝΠϧʹPolyfillΛऔΓࠐΉ ผͷϑΝΠϧͷಡΈࠐΈʹrequireϝιου requireϝιουϒϥβͰ༻Ͱ͖ͳ͍
PolyfillͷಡΈࠐΈ babelͰੜͨ͠ϑΝΠϧʹPolyfillΛऔΓࠐΉ ผͷϑΝΠϧͷಡΈࠐΈʹrequireϝιου requireϝιουϒϥβͰ༻Ͱ͖ͳ͍ browserifyΛ༻
browserifyͷΠϯετʔϧ > npm install --save-dev browserify
None
browserifyͷ࣮ߦ > npm run build:browserify ͻͱͭͷϑΝΠϧʹ݁߹
·ͱΊ ECMAScriptຖϦϦʔε JavaScript࣮ʹΑͬͯࠩҟ͕ଘࡏ BabelͱPolyfillʹΑͬͯࠩҟΛٵऩ
+BWB4DSJQUͱʁ #BCFMʹΑΔϞμϯ+BWB4DSJQU։ൃ