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-optin-camera
cyberagentdevelopers
PRO
1
120
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
330
Forget efficiency – Become more productive without the stress
ufried
0
110
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
クライアントサイドでよく使われる Debounce処理 をサーバサイドで3回実装した話
yoshiori
1
150
チームを主語にしてみる / Making "Team" the Subject
ar_tama
4
310
10分でわかるfreeeのQA
freee
1
3.4k
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
100
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
520
話題のGraphRAG、その可能性と課題を理解する
hide212131
4
1.5k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
132
8.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Visualization
eitanlees
144
15k
The Pragmatic Product Professional
lauravandoore
31
6.3k
BBQ
matthewcrist
85
9.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Gamification - CAS2011
davidbonilla
80
5k
Bash Introduction
62gerente
608
210k
Thoughts on Productivity
jonyablonski
67
4.3k
Into the Great Unknown - MozCon
thekraken
31
1.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
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։ൃ