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
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
390
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
300
飲食店データの分析事例とそれを支えるデータ基盤
kimujun
0
180
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
190
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
760
Application Development WG Intro at AppDeveloperCon
salaboy
0
200
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
260
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
180
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
420
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.7k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
341
39k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Thoughts on Productivity
jonyablonski
67
4.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Site-Speed That Sticks
csswizardry
0
28
Code Reviewing Like a Champion
maltzj
520
39k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
370
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Designing for humans not robots
tammielis
250
25k
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։ൃ