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
330
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
90
moment.js
kazunorikimura
0
61
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
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
330
生成AIとAWS CDKで実現! 自社ブログレビューの効率化
ymae
2
330
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
10分でわかるfreeeのQA
freee
1
3.4k
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
180
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
700
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
310
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
180
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
630
バクラクにおける可観測性向上の取り組み
yuu26
3
410
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
110
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.4k
Featured
See All Featured
A Tale of Four Properties
chriscoyier
156
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Designing the Hi-DPI Web
ddemaree
280
34k
Scaling GitHub
holman
458
140k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
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։ൃ