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
200
JavaScript再入門
BabelによるモダンJavaScript開発
Kazunori-Kimura
January 19, 2018
Tweet
Share
More Decks by Kazunori-Kimura
See All by Kazunori-Kimura
path-parser
kazunorikimura
0
340
objectのcloneを行う/How to clone of the object in js
kazunorikimura
0
340
クライアントサイドで大きなデータを扱うときのお話/Web Worker & IndexedDB
kazunorikimura
0
590
How freelance programmer works
kazunorikimura
0
92
moment.js
kazunorikimura
0
63
sequelize.pdf
kazunorikimura
0
510
Toward the world of "ready player one"
kazunorikimura
0
63
npmの便利なパッケージ: forever, winser
kazunorikimura
0
910
npmの便利なパッケージ: Jest
kazunorikimura
0
100
Other Decks in Technology
See All in Technology
日経電子版のStoreKit2フルリニューアル
shimastripe
1
140
アプリエンジニアのためのGraphQL入門.pdf
spycwolf
0
100
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
320
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
330
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
900
Engineer Career Talk
lycorp_recruit_jp
0
190
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
120
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
130
【Startup CTO of the Year 2024 / Audience Award】アセンド取締役CTO 丹羽健
niwatakeru
0
1.3k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
KATA
mclloyd
29
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Optimizing for Happiness
mojombo
376
70k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Automating Front-end Workflow
addyosmani
1366
200k
The Cult of Friendly URLs
andyhume
78
6k
Designing Experiences People Love
moore
138
23k
Making Projects Easy
brettharned
115
5.9k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Agile that works and the tools we love
rasmusluckow
327
21k
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։ൃ