JSのお勉強の話。

by Toro_Unit (Hiroshi Urabe)

Slide 1

Slide 1 text

JSͷ͓ษڧͷ࿩ɻ Toro_Unit@SACSS Special13 1

Slide 2

Slide 2 text

$whoami 2

Slide 3

Slide 3 text

Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) ϑϦʔϥϯεr Frontend Engineer / Web Designer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 3

Slide 4

Slide 4 text

ׂͱWordPressͷਓͰ͢ɻ • WordBench ௕໺ ϞσϨʔλʔ • ϓϥάΠϯ/ςʔϚ࡞ऀ • WordCamp Kyoto 2017 ηογϣϯ νʔϜ 4

Slide 5

Slide 5 text

Plugins • Custom Post Type Permalinks • 413,500 Downloads • Active Install 80,000+ • Other... Theme • Vanilla 5

Slide 6

Slide 6 text

Others • VCCW Team • WordPress Core Contributor (4.3,4.4,4.5,4.7) 6

Slide 7

Slide 7 text

௕໺ݝদຊࢢ͔Β͖·ͨ͠ɻ1 • ೔ຊҰඒຯ͍͠Β͍͍͔͕͋͢͠Δ ͱ͔ແ͍ͱ͔ɻ • ϫΠϯඒຯ͍ɻ 1 https://commons.wikimedia.org/wiki/File: 130608_Matsumoto_Castle_Matsumoto_Nagano_pref_Japan02bs4.jpg Author: 663highland. License: CC BY 2.5 7

Slide 8

Slide 8 text

Slide 9

Slide 9 text

΍͖ͬͯͨ͜ͱ (2010 ~) • HTML&CSS ։ൃ / ͨ·ʹWebσβΠϯ • JavaScript͸jQueryͰΰϦΰϦܥ͕ΘΓͱଟΊɻ • CMS ςʔϚ੍࡞ • ( 9ׂํ WordPress or MovableType / ͨ·ʹDrupalͱ͔...etc ) • CMS ΧελϚΠζɾϓϥάΠϯ੍࡞ • ( ΧελϜϑΟʔϧυΊͬͪΌ࡞ͬͨΓɺPHPΊͬͪΌॻ͍ͨΓ ) • ؀ڥ͸΄ͱΜͲϨϯλϧαʔόʔ (LAMP) 9

Slide 10

Slide 10 text

΍ͬͯͳ͍͜ͱ (ख఻͍ఔ౓ͳΒ͋Δ) • εϚϗΞϓϦ։ൃ • WEBαʔϏε։ൃ • γεςϜ։ൃ 10

Slide 11

Slide 11 text

ࠓ೔ͷ࿩ͷΰʔϧ • ࣗ෼ͰάάΓͳ͕ΒJSͷษڧ͕ग़དྷ ΔΑ͏ʹͳΔɻ • Qiita ౳ͷจॻ͕͋Δఔ౓ཧղͰ͖Δ Α͏ʹͳΔɻ 11

Slide 12

Slide 12 text

Do you know JavaScript? 12

Slide 13

Slide 13 text

ͦ΋ͦ΋JavaScript ͬͯͳʹʁ 13

Slide 14

Slide 14 text

• 1995೥ʹɺNetscapeʢޙͷFirefoxʣʹ౥ࡌ͞Εͨϒϥ΢β ༻ͷϓϩάϥϛϯάݴޠɻ • ݩʑ͸LiveScript໊ͬͯલ͚ͩͬͨͲɺେਓͷࣄ৘Ͱվ໊ɻ 14

Slide 15

Slide 15 text

• ࠷ۙ͸Node.js౳ɺϒϥ΢βʹͱͲ· Βͣ൚༻తͳϓϩάϥϛϯάݴޠͱ ͯ͠ͷར༻΋૿͖͑ͯͨɻ • ݴޠͱͯ͠͸ɺͪΐͬͱมΘͬͨಛ ௃Λ͍Ζ͍Ζ࣋ͬͯΔɻ • ϓϩτλΠϓϕʔε 15

Slide 16

Slide 16 text

JavaScriptͰԿ͕ग़དྷΔͷʁ 16

Slide 17

Slide 17 text

WEBαΠτͰͷϢʔεέʔεɻ • DOM (ϒϥ΢β্ͰͷHTML/CSS)ͷૢ࡞ɻ • https://codepen.io/torounit/pen/xLwjMB • Ajax. αʔόʔͱͷ௨৴ɻ • https://codepen.io/torounit/pen/Kvzdej • more... 17

Slide 18

Slide 18 text

DEMO 18

Slide 19

Slide 19 text

͜ͷΑ͏ʹɺͪΐͬͱͨ͜͠ͱ͔ΒɺΞϓϦέʔγϣϯΈ͍ͨͳϞϊ·Ͱɺ༷ʑͳίτ͕Ͱ͖·͢ɻ 19

Slide 20

Slide 20 text

Usecase • WEBαΠτɾϒϥ΢βΞϓϦέʔγϣϯ • ϞόΠϧΞϓϦ • σεΫτοϓΞϓϦέʔγϣϯ • Atom/Vscode/Slack/WordPress.com...etc • Brackets 20

Slide 21

Slide 21 text

ͪΐͬͱָͦ͠͏͡Όͳ͍Ͱ͔͢ʁ ΕͬͭͱΒ͍ʂ 21

Slide 22

Slide 22 text

Ͱ΋ɺ͍͟άάͬͨΓ৭ΜͳࢿྉΛΑΉͱɾɾɾ 22

Slide 23

Slide 23 text

ES3/ES5/ES6/ES7/ ECMAScript2015/ ECMAScript2016/Node.js/Babel/ Bable/Webpack/browserify/ Rollup/fusebox/CoffeeScript/ TypeScript/jQuery/underscore.js/ Backbone.js/Angular/React/Vue/ Riot… 23

Slide 24

Slide 24 text

ʢ´°Ϝ°`;ʣ 24

Slide 25

Slide 25 text

• JavaScript ͷ࿩͕஌Γ͍ͨΜ͚ͩ Ͳɻɻɻ • ͔͠΋ίϐϖͯ͠΋ಈ͔ͳ͍ɻɻɻ 25

Slide 26

Slide 26 text

ͱ͍͏Θ͚Ͱɺ࠷ॳ͸ɺJSքʹຮԆΔṖͷ୯ޠͷͬ͘͟Γղ આɺͦͷπʔϧ͕ੜ·ΕͨҙຯΛ͓࿩͠͠Α͏ͱࢥ͍·͢ɻ 26

Slide 27

Slide 27 text

Α͘ฉ͘ ES6 ͱ ͔ ES2015 ͬͯ Կʁ 27

Slide 28

Slide 28 text

ECMAScript (௨শES) • ஀ੜ͙ͯ͢͠ʹɺJavaScriptͬΆ͍ݴ ޠ͕ੜ·ΕΔɻ(IEͷJScript) • ECMAͱ͍͏ඪ४Խஂମ͕ඪ४ن֨ ΛఆΊΔɻͦΕ͕ECMAScript. • ཁ͸JISن֨Έ͍ͨͳϠπɻ 28

Slide 29

Slide 29 text

ES6 / ES2015 • ECMAScript 6 Edition. 6൛. • ͜Εͷࡦఆதʹຖ೥ϦϦʔε͢ΔΑ͏ʹͳͬͨͷͰɺਖ਼ࣜʹ ͸ɺECMAScript 2015ɻͨͩ͠Ҏલ͔ΒES6ͱݺΜͰ͍ͨͷ ͰɺES6ͱݺͼଓ͚͍ͯΔɻ • ES6͸ES5(2009೥)ͱ͸ผ෺ʹͳΔϨϕϧͰͷେ͖ͳมߋ͕͋ ͬͨɻ 29

Slide 30

Slide 30 text

ES2016 • ES2016: ECMAScript 2016ɻݱࡏެ։͞Ε͍ͯΔ࠷৽ͷ࢓ ༷ɻ ES.next, ES7 • ະདྷʹ࣮૷༧ఆor࣮૷͕ٞ࿦͞Ε͍ͯΔ࢓༷ͷ͜ͱɻES7͸ ແ͍͚Ͳɺաڈʹͦ͏͍͏ݴ͍ํΛ͍ͯͨ͠ࠒͷ໊࢒ɻ 30

Slide 31

Slide 31 text

JavaScript / ECMAScript ͷྺ࢙ 1 • 1995೥: JavaScript஀ੜɻNetscapeʹ౥ࡌɻ • 1996೥: JScript஀ੜɻIE3ʹ౥ࡌɻҰؾʹීٴɻ • 1997೥: ECMAScriptॳ൛ɻ • 1998೥: ES2. ୈ2൛ɻ • 1999೥: ES3͕ࡦఆɻ 31

Slide 32

Slide 32 text

JavaScript / ECMAScript ͷྺ࢙ 2 • 2000೥~2003೥ࠒ: ES4ͷ࢓༷ࡦఆ͕࢝·Δɻ͕ɺࣦഊɻ • 2007೥~2008೥ࠒ: ࠶ͼES4ͷ࢓༷ࡦఆ͕࢝·Δɻ͕ɺࣦഊɻͦͯ͠ES4 ͸͓ଂೖΓʹ... • 2008೥: ࣍ੈ୅ͷJSΛߟ͑ΔϓϩδΣΫτ ECMAScript Harmony ൃ଍ɻ • 2009೥: Internet Explorer 8 (ES3४ڌ…) • 2009೥: Node.JSͷొ৔ɻ • 2009೥: ES5ࡦఆ ʢͪ͜Β͸ES3.1Λͪΐͬͱվྑͨ͠Ϟϊʣ 32

Slide 33

Slide 33 text

ਐԽ͸ఀ଺͢Δ͕ͦͷؒɺരൃతʹधཁ͕৳ͼΔɻ • ύιίϯɺΠϯλʔωοτͷීٴɻ • Ajaxʹ஫໨͕ू·Δɻ • εϚʔτϑΥϯͷීٴɻ • ୤Flashͷಈ͖ɻ 33

Slide 34

Slide 34 text

CommonJS / Node.JS • αʔόʔαΠυ΍ϒϥ΢βҎ֎Ͱ΋JavaScriptΛ࢖͍͍ͨʂ V8Τϯδϯ(Google ChromeͷJSΤϯδϯ)໓஡ۤ஡ૣ͍ʂ 34

Slide 35

Slide 35 text

AltJS (Altnative Javascript) • JavaScript ͸͍Ζ͍ΖͱଞͷϓϩάϥϜݴޠͱ͸ҧ͏ಛ௃͕ ͋Δɻ͍Ζ͍Ζݸੑతɻ(thisͱ͔...) • ͦΕΒͷ໰୊Λղܾ͢ΔͨΊʹɺผͷݴޠͰॻ͍ͯɺͦΕΛ JSʹม׵͠Α͏ʂͱ͍͏ಈ͖͕ੜ·ΕΔɻ͍ͦͭΒ͸AltJSͱ ݺ͹ΕΔɻ 35

Slide 36

Slide 36 text

άάΔͱɺTypeScriptͱ͔CoffeeScriptͱ͍͏୯ޠ͕ग़ͯ͘Δ͚ ͲɺʮJSʹ΁Μ͔Μ͢ΔΜͩʔɺ;ʔΜʯͬͯࢥͬͯΕ͹OK. • AltJSͷػೳ͕ES6ʹऔΓࠐ·ΕͨͷͰ΄ͱΜͲਰୀ͕ͨ͠ɺ TypeScript ͸ॱௐʹϢʔβʔ਺͕૿͍͑ͯΔɻಛʹେن໛͔ ͭνʔϜͰͷ։ൃͰ͸ɺܕ͕ཉ͍͠έʔε͕ଟ͍ͱͷ͜ͱɻ 36

Slide 37

Slide 37 text

ͳͲͳͲ͍Ζ͍Ζឯ༨ۂં͕͋Γ·ͯ͠ɻ 37

Slide 38

Slide 38 text

ECMAScript 2015 ( 6 edition ) !!! 38

Slide 39

Slide 39 text

ECMAScript Harmony ͕͍ͭʹϦϦʔεɻ ʢ໿7೥!!!ʣ • ES4Ͱ࠳ંͨ͠࢓༷΋औΓࠐ·Ε͍ͯΔɻ • 1999೥Ҏདྷͷ௒େن໛Ξοϓσʔτɻ(໿16೥!!!) • ΄΅ผͷݴޠʹͳͬͨͱࢥͬͯࠩ͠ࢧ͑ͳ͍ɻ • CommonJS ΍ AltJS ༝དྷͷػೳͳͲ΋Ұ෦औΓࠐ·Ε͍ͯ Δɻ 39

Slide 40

Slide 40 text

ͲΜͳ෩ʹมΘͬͨͷʁ େྔʹ͋Γ͗ͯ͢શ෦͸঺հͰ͖·ͤΜ͕͍͔ͭ͘ɻ 40

Slide 41

Slide 41 text

ఆ਺ Ҏલ͸ม਺͔͠ແ͔ͬͨɻ const ham = 'ʢ´°Ϝ°`ʣ' ham = 'ϋϜ' // <- Τϥʔ!!! 41

Slide 42

Slide 42 text

Ҏલ͸ɻɻɻ ఆ਺ͱͯ͠ѻ͏Ϟϊ͸ɺେจࣈʹͯ͠ίʔσΟϯάن໿Ͱର Ԡɻ ͦͯ͠ഁΒΕΔ var HAM = 'ʢ´°Ϝ°`ʣ' HAM = 'ϋϜ' // <- ΤϥʔʹͳΒͳ͍!!! 42

Slide 43

Slide 43 text

σϑΥϧτҾ਺ function multiply(a, b = 1) { return a*b; } multiply(5); // 5 43

Slide 44

Slide 44 text

Ҏલ͸ɻɻɻ function multiply(a, b) { var b = typeof b !== 'undefined' ? b : 1; return a*b; } multiply(5); // 5 44

Slide 45

Slide 45 text

Class ߏจ class Human { constructor(name) { this.name = name; } say(){ console.log('ࢲͷ໊લ͸' + this.name + 'Ͱ͢ʂ'); } } const ham = new Human('ʢ´°Ϝ°`ʣ'); const torounit = new Human('ͱΖΏʹ'); ham.say(); //'ࢲͷ໊લ͸ʢ´°Ϝ°`ʣͰ͢ʂ' torounit.say(); //'ࢲͷ໊લ͸ͱΖΏʹͰ͢ʂ' 45

Slide 46

Slide 46 text

Ҏલ͸ɻɻɻ function Human(name) { this.name = name } Human.prototype.say = function () { console.log('ࢲͷ໊લ͸' + this.name + 'Ͱ͢ʂ'); } const ham = new Human('ʢ´°Ϝ°`ʣ'); const torounit = new Human('ͱΖΏʹ'); ham.say(); //'ࢲͷ໊લ͸ʢ´°Ϝ°`ʣͰ͢ʂ' torounit.say(); //'ࢲͷ໊લ͸ͱΖΏʹͰ͢ʂ' 46

Slide 47

Slide 47 text

ES6 Modules JS ͔Β JSΛऔΓࠐΉ࢓૊Έɻ import hoge from './hoge.js' hoge.js const hoge = '΄͛'; export default hoge; 47

Slide 48

Slide 48 text

CommonJSʹ΋ࣅͨΑ͏ͳ࢓૊Έ͕ɻ var hoge = require('./hoge.js'); 48

Slide 49

Slide 49 text

Ҏલ͸... window.hoge = {} ͦͷଞ • require.js 49

Slide 50

Slide 50 text

• scriptλάͷಡΈࠐΈॱͳͲΛͪΐͬͱؒҧ͑Δͱಈ͔ͳ͔ ͬͨɻ • window.hoge ͸άϩʔόϧม਺ͳͷͰɺͲ͔͜ΒͰ΋ॻ͖׵ ͑ΒΕΔɻ·ͨɺvar hoge ͱ ؔ਺ͳͲͷ֎Ͱॻ͘ͱ window.hoge ͕ॻ͖׵ΘΔɻ • ྑ͘ղΒͳ͍ͱ͜ΖͰಥવͷΤϥʔ͕ൃੜͨ͠Γɻ 50

Slide 51

Slide 51 text

ม਺͕Өڹ͠ͳ͍Α͏ʹɺଈ࣌ؔ਺ͰғΜͩΓɻ (function(){ var hoge = '΄͛'; })(); 51

Slide 52

Slide 52 text

ৄ͘͠͸ • ͍·͔Β͸͡ΊΔECMAScript 6 52

Slide 53

Slide 53 text

JSʹ͓͚Δ༷ʑͳ໰୊͕ղܾ! ؆୯ʹॻ͚Δͧʂʂ 53

Slide 54

Slide 54 text

΍ͬͨʔʂ 54

Slide 55

Slide 55 text

ΈΜͳ΋ JS ॻ͜͏ʂʂ 55

Slide 56

Slide 56 text

... 56

Slide 57

Slide 57 text

ͦ͏͸͔ΜͨΜʹ͍͔ͳ͍ͷ͕͜ͷੈ 57

Slide 58

Slide 58 text

JSʢͱ͍͏͔ϑϩϯτΤϯυશൠʣͷ࠷େͷਏΈɻ • ಉҰͷίʔυͰෳ਺ͷϒϥ΢βɾόʔδϣϯʹରԠɻ • IE / Edge / Safari / Chrome / Firefox / iOS / Android / …. • ECMAScript͸͋͘·Ͱ΋࢓༷ɻϒϥ΢βʹͦͷػೳ͕ೖ͍ͬͯΔ ͔Ͳ͏͔͸ผ໰୊ɻ • શͯͷػೳΛ100%࣮૷ͨ͠ϒϥ΢β͸ɺSafariͷΈɻࠓ೥தʹ ͸ଞͷϒϥ΢β΋? • ES6 Modules ʹ͸·ͩ·ͩน͕ɾɾɾ 58

Slide 59

Slide 59 text

શવָʹͳͬͯͳ͍… 59

Slide 60

Slide 60 text

͡Ό͊Ͳ͏ͯ͠Δʁ 60

Slide 61

Slide 61 text

࠷ۙΑ͋͘Δख๏ɻ 1. ES6΍ͦΕҎ߱ͷ࢓༷Ͱॻ͘ɻ 2. ϒϥ΢βͰ΋ಈ͘Α͏ʹม׵ɻ • ม׵͢ΔϓϩάϥϜͷ͜ͱΛτϥ ϯεύΠϥͱ͍͏ɻBabel ͕༗ ໊ɻʢม׵͢Δ͜ͱΛόϕΔͬͯ ݴͬͨΓʣ 61

Slide 62

Slide 62 text

ES6 Modules • τϥϯεύΠϥ͸JSͷߏจΛม׵͠ ͯ͘ΕΔ͕ɺimport ΍ require ͸ผ ͷରԠ͕ඞཁɻ • webpack / browserify / rollup.js ͋ͨ Γ͕༗໊ɻ 62

Slide 63

Slide 63 text

͜͜·Ͱͷ·ͱΊ • ES/ECMAScript ͕࢓༷ɻ JavaScript ͕࣮૷ɻ • ͍ͭ࠷ۙ·Ͱ 1999೥ͷ࢓༷͔ΒಀΕΒΕͳ͔ͬͨͷ͕JSɻ • ͦͷ൓ಈͰɺES2015 Ͱ΄΅ผ෺ͷݴޠʹͳͬͯΔɻ • ͍ΖΜͳ؀ڥͰಉ͡ίʔυΛಈ͔ͨ͢Ίʹɺόά͕গͳ͘ಡ Έ΍͘͢؅ཧ͠΍͍͢JSͷͨΊʹɺwebpackͱ͔Ͱ·ͱΊͨ ΓɺBabel Ͱม׵ͨ͠Γͯ͠Δɻ 63

Slide 64

Slide 64 text

๻͕ײ͡Δɺ࠷ۙͷJSपΓͷงғؾɻ WEBΞϓϦɾαʔϏεɺϞόΠϧΞϓϦɺWEBαΠτͳͲͰ࿩ ୊ɾٻΊΒΕΔٕज़Ϩϕϧ͸ͦΕͧΕҟͳΓ·͕͢ɺϘʔμʔ Ϩεʹͳ͖ͬͯͨ෦෼΋ଟ͍ؾ͕͢Δɻ • ΞϓϦͳͲͰ͸ɺJSͰHTML΍CSS΋ಈతʹੜ੒͢ΔΑ͏ͳ Ϟϊ΋ଟ͍ɻ·ͨϦονͳUI͕ཁٻ͞ΕΔέʔεͳͲͰ΋ɻ • RESTAPI౳ɺJS(ͦΕҎ֎Ͱ΋)͔Β͍Ζ͍Ζ৮ΕΔػೳ͕ CMS/ϑϨʔϜϫʔΫ/αʔϏεʹ౥ࡌ͞ΕͨΓɻ 64

Slide 65

Slide 65 text

ͨͱ͑͹͜Μͳͷ 65

Slide 66

Slide 66 text

Slide 67

Slide 67 text

Good Morning Sunshine • gms.life • new barlance ͷWEBϚΨδϯ • CMSʢWordPressʣ͕ग़ྗͨ͠JSONΛAjaxͰऔ͖ͬͯͯɺ ReactͰϨϯμϦϯάɻ 67

Slide 68

Slide 68 text

ϑϨʔϜϫʔΫ/ϥΠϒϥϦ • ϦονͳUIɺͦΕͳΓͷن໛ͷJSΛॻ͘৔߹͸ɺԿΒ͔ͷϥ ΠϒϥϦɾϑϨʔϜϫʔΫΛ࢖͏͜ͱ͕ଟ͍ɻ • ͨͿΜɺ࠷ۙͷJSք۾ͷϝΠϯͷ࿩୊ɻ 68

Slide 69

Slide 69 text

jQuery Ұڧͩͬͨ࣌୅΋͋ͬͨɻ 69

Slide 70

Slide 70 text

• ͪΐΖͬͱॻ͘ͿΜʹ͸ศརɻ • ࠷ۙ͸ɺʮͱΓ͋͑ͣjQueryʯ͸ආ͚ΒΕΔ܏޲ɻ • jQuery͕ఏڙ͖ͯͨ͠ػೳ͸࠷ۙͷϒϥ΢βʹ͸͍͍ͩͨඪ४ ૷උɻ • ϒϥ΢βͷػೳ͕ඪ४Խ͞ΕΔલ͸ྑ͍ײ͡ʹͯ͘͠Εͨɻ • ࣮͸݁ߏτϦοΩʔͳ͜ͱΛ΍ͬͯΔͷͰ૊Έ߹Θͤ଍Γ͢Δ ͷʹ೉͕͋Δ͜ͱ΋ɻ • औ͖ͬͭ΍͢͞͸ૉ੖Β͍͚͠ͲɺͲͪΒʹ͠ΖJSͷ஌ࣝ͸ཁΔɻ 70

Slide 71

Slide 71 text

͍͔ͭ͘ྫɻ 71

Slide 72

Slide 72 text

use jQuery var button = jQuery('.button'); button.on('click', function(){ jQuery(this).addClass('active'); }); Vanilla.js var button = document.querySelector('.button'); button.addEventListener('click', (e) => { e.currentTarget.classList.add('active'); }); 72

Slide 73

Slide 73 text

use jQuery jQuery.ajax('/api.json') .then( data => console.log( data ) ) Vanilla.js fetch('/api.json') .then( response => response.json() ) .then( data => console.log( data ) ) 73

Slide 74

Slide 74 text

ॴײ • ࠓͰ΋ศརͳέʔε͸͋ΔͷͰ΄Ͳ΄Ͳʹ෇͖߹͑͹ྑ͍ͷ ͔ͳͱɻ • jQuery ͦͷ΋ͷ΋ඪ४Խ͞Εͨ࢓༷ʹ߹ΘͤΑ͏ͱ͍ͯ͠Δ งғؾɻ(ver3ܥ) 74

Slide 75

Slide 75 text

Angular/React/Vue/Riot • JavaScript ͷϥΠϒϥϦɻAngular͸ Google੡ɺReact͸Facebook੡ɻ • ViewɺUIΛߏங͢ΔͨΊͷϥΠϒϥ Ϧɻ༩͑ΒΕͨσʔλʹԠͯ͡HTML Λੜ੒ͨ͠Γ͕ಘҙɻ • ͜ΕΒͷϥΠϒϥϦͰݟͨ໨Λߏங → σʔλ͸JSͰAPIͱ௨৴ͯ͠औ ಘɻͱݴ͏ྲྀΕ΋ࠓޙ·͢·͢૿͑ ͦ͏ɻ 75

Slide 76

Slide 76 text

ͻͱͭͷϑϨʔϜϫʔΫͷ্Ͱͱݴ͏ྲྀΕ͔Βɺ໾ׂʹಛԽ͠ ͨϥΠϒϥϦΛ૊Έ߹Θͤͯ࢖͏Α͏ʹͳ͖ͬͯͨɻ 76

Slide 77

Slide 77 text

ৄ͘͠஌Γ͍ͨਓ͸ JavaScriptϑϨʔϜϫʔΫબఆͷٞ࿦ - Qiita 77

Slide 78

Slide 78 text

PWA • ϓϩάϨογϒ΢ΣϒΞϓϦ • WEBαΠτͱΞϓϦͷ͍͍ͱ͜औΓΛͨ͠Α͏ͳϞϊɻ • ΦϑϥΠϯϑΝʔετͱ͍͏ߟ͑ํ΋ɻ • Yosuke Onoue: WORDPRESSϢʔβʔͷͨΊͷ PROGRESSIVE WEB APPSͷ࿩ | WordPress.tv 78

Slide 79

Slide 79 text

Ͳ͏΍ͬͯ෇͖߹͍ͬͯ͘ʁ Ͳ͏΍ͬͯษڧ͢Δʁ 79

Slide 80

Slide 80 text

๻ͷ৔߹ɻ • ๻ࣗ਎͸JSͷҊ݅͸ͦ͜·Ͱଟ͘ͳ͍ɻͰ΋ɺಥવWEBΞϓ Ϧ͡Έͨ͜ͱɺෳࡶͳϑΥʔϜΛ࡞ΔҊ͕݅;ͬͯ͘Δɻ • jQuery Ͱ΋ྑ͍͚ͲɺͦΕ͔͠஌Βͳ͍ͱద੾ͳબ୒͕ग़ དྷͳ͍ͷͰɺͪΐͬ͜ͱ৮ͬͯΈΔɻ • ը໘ભҠ͕͋ΔϞϊ͸ঢ়ଶͷ؅ཧ͕ਏ͍͚ͲɺJS͚ͩͰ΍ ΔͱׂͱαΫοͱऴΘΔέʔε͕ଟ͍ؾ͕͢Δɻʢଟஈࣜ ͷϑΥʔϜͱ͔ʣ 80

Slide 81

Slide 81 text

ͨͱ͑͹͜Μͳͷɻ 81

Slide 82

Slide 82 text

• νϡʔτϦΞϧ΍αϯϓϧΞϓϦ͕੔ උ͞Ε͍ͯΔ΋ͷ͕ଟ͍ͷͰɺͦΕͷ ࣸܦ͸͓͢͢Ίɻ ࣸܦ • ۩ମྫΛݟͳ͕Βࣗ෼Ͱಉ͡ϞϊΛ ॻ͍͍ͯ͘ߦҝɻ • খ͍͞ϞϊΛͬ͘͡Γߟ͑ͳ͕Βॻ ͍͍ͯ͘ɻԿߦ͔ॻ͘͝ͱʹಈ͔ͯ͠ ΈͨΓɻͨͩയવͱॻ͍ͯ΋ͩΊɻ 82

Slide 83

Slide 83 text

TodoΞϓϦ • TodoΞϓϦ͕جૅ͕Ұഋ٧·ͬͯͯΦεεϝɻ • TodoMVCͱ͍͏͍ΖΜͳٕज़Ͱಉ͡TodoΞϓϦΛͭͬͯ͘ݟΑ͏ͱ͍͏ ϓϩδΣΫτ΋͋ΔͷͰɺࢀߟʹ͸ͳΔ͔΋ɻ 83

Slide 84

Slide 84 text

ͱΓ͋͑ͣಈ͘ϞϊΛ࡞Δͱςϯγϣϯ্͕Δ! • ϞνϕʔγϣϯΛҡ࣋͢Δ্Ͱ͍ͩ͡ɻ • ͳΜ͔ͩΜͩͰಈ͘Ϟϊ࡞Δͷ͸ୡ੒ײ͋ΔͰ͠ΐʁ • ੌ͍ϞϊΛ࡞Δඞཁ͸ແ͍ɻ • torounit/one-day-onsen-in-asamaonsen 84

Slide 85

Slide 85 text

ਓʹฉ͘ɻ • ਎ۙʹΤϯδχΞ͕͍Δ৔߹͸͍Ζ͍Ζฉ͍ͯΈΔɻ • ਎ۙʹډͳ͍৔߹͸ɺษڧձͳͲʹࢀՃͯ͠஥ؒΛ૿΍͢ɻ • ஥ྑ͘ͳΔ -> SNS Ͱܨ͕Δ -> ৘ใ͕ࣗવʹʹೖͬͯ͘Δ • ༑ୡ͕΍ͬͯΔ͜ͱͬͯ݁ߏؾʹͳΔΑͶɻ 85

Slide 86

Slide 86 text

ίʔυΛެ։͢Δɻ • ίʔυΛެ։ͯ͠SNS΍ϒϩάͰ͞Β͢ͱɺ͍Ζ͍Ζڭ͑ͯ ͘ΕΔਓ͕ͦͷ஥ؒͷத͔Βग़ݱͨ͠Γ͢Δɻ • ਓͷίʔυΛಡΉͷ΋ࣸܦ͢Δͷ΋ษڧʹͳΔ͠ɺຊਓʹฉ ͍ͨΓͰ͖Δɻ • Github͓͢͢ΊɻϑϩϯτΤϯυͩͬͨΒ Codepen ΋͓͢ ͢Ίɻ 86

Slide 87

Slide 87 text

• ϑϨʔϜϫʔΫͷशಘ͸ݴޠҰ֮ͭ͑Δͷͱಉ͘͡Β͍ͷ࿑ ྗ͕͔͔ΔͱݴΘΕΔͷͰɺͷΜͼΓΏΔΏΔͱ஍ಓʹ෇͖ ߹ͬͯߦ͘ͷ͕ྑ͍ͱࢥ͍·͢ɻҰ೔30෼ͱ͔ɻ • ࢓ࣄͰίϐϖͯ͠Δίʔυͱ͔΋ͪΌΜͱಡΜͰΈͨΓ͢Δ ͷେ੾ɻ 87

Slide 88

Slide 88 text

ͱΓ͋͑ͣɺࠓ͔ΒJSΛॻ͍ ͯΈΔͳΒɻ • codepen • JSBin ͋ͨΓ͕ϒϥ΢βͰͬ͘͞ͱ΍Ε͓ͯख ܰɻ 88

Slide 89

Slide 89 text

ͱΓ͋͑ͣɺͳʹ͔ͭͬͯ͘ΈΔͳΒ 89

Slide 90

Slide 90 text

Felt • https://cognitom.github.io/felt/ • ΦʔϓϯιʔεΧϑΣͷՏଜ͞Μ࡞ͷ ։ൃɾϏϧυ؀ڥɻ • ཁNode.js. • ίϚϯυΛίϐϖ͢Ε͹ग़དྷΔɻ ʢ cd path/to/project ͸దٓಡΈ ସ͑ͯɻʣ 90

Slide 91

Slide 91 text

WebStarterKit • https://developers.google.com/ web/tools/starter-kit/ • Google ࡞ͷελʔλʔΩοτ • ES6 Modules ʹ͸ඇରԠ 91

Slide 92

Slide 92 text

• HTML/CSS/JS͚ͩͳΒɺͲͪΒ΋࢓ࣄͰ΋ී௨ʹ࢖͑Δɻ • PHPͱ૊Έ߹ΘͤΔͱ͔ͩͱ͍Ζ͍ΖେมͰ͕͢ɺஶ໊ͳ ϑϨʔϜϫʔΫ΍CMSͱ͔ͳΒͻͳܗ͕͋ͬͨΓ͢Δɻ • ͜ΕΒʹݶΒͣɺNode.js ੡ͷπʔϧ͕ଟ͍ͷͰɺΠϯετʔ ϧ͓ͯ͘͠ͱ͍͍ɻ • ஶ໊ͳϑϨʔϜϫʔΫͳͲ΋ɺϓϩδΣΫτͷͻͳܗΛ഑෍ ͍ͯͨ͠Γ͢ΔͷͰɺͦΕ͔Β͸͡ΊΔͱ͍͍ײ͡ʹJSΛॻ ͘͜ͱ͚ͩʹूதग़དྷΔɻ 92

Slide 93

Slide 93 text

ͪΐͬͱͰ͖ΔΑ͏ʹͳͬͨΒ 93

Slide 94

Slide 94 text

࣮ઓ౤ೖɻ • ࣮ࡍʹ࢓ࣄ΍Ҋ݅Λ͜ͳ͢தͰݟ͑ͯ͘Δ෦෼΋ଟ͍ɻ • ʮ͜Μͳ͜ͱʹ΋ؾΛݣ͏ͷ͔ʔʯͱ͔ɻ • ීஈίϐϖͯ͠ΔΑ͏ͳ10ߦఔ౓ͷίʔυΛࣗ෼ͰվΊͯॻ͍ͯΈ ͨΓɻ • ୹͍ίʔυΛ͔ͬ͠ΓͪΌΜͱߟ͑ͯॻ͘͜ͱ͕ͦͷޙʹܨ͕ Δɻ • ͪΐͬͱͣͭ΍ͬͯΈΔͷ͕͍ͨͤͭɻ 94

Slide 95

Slide 95 text

΋͏͢͜͠Ͱ͖ΔΑ͏ʹͳͬͨΒ 95

Slide 96

Slide 96 text

ଞͷݴޠ΋৮ͬͯΈΔ • ϓϩάϥϛϯάݴޠ͸͍Ζ͍ΖӨڹΛ༩͑͋ͬͯΔͷͰɺ࢓ ࣄͰ৮ͬͯΔଞͷݴޠͱ͔΋ಉ࣌ฒߦతʹษڧͯ͠ΈΔɻ • ʮJSͷ͜ΕͬͯPHPͰ͍͏ͱ͜Ζͷ͋Ε͔ʂʯΈ͍ͨͳൃ ݟ͕͋ͬͨΓɺ͍Ζ͍Ζཧղͷॿ͚ʹͳΔɻ • ଞͷݴޠͷػೳ͕༌ೖ͞ΕΔέʔε͸JSʹݶΒͣΑ͋͘ Δɻ 96

Slide 97

Slide 97 text

·ͱΊ • ࣸܦେࣄɻྔΑΓ࣭ɻ • ࣮ઓ౤ೖ΋େࣄɻͨͩɺ͍ͪͭͭ͘͜͜͞ɻ • ͻͱΓͰؤுΔͷ͸͍ͨ΁ΜͳͷͰɺίʔυΛެ։͍ͯ͠Ζ ΜͳਓͱҰॹʹ΂Μ͖ΐ͏͍ͯ͜͠͏ɻ • ͱΓ͋͑ͣ Codepen Ͱͳʹ͔ॻ͜͏ɻ • ͱΓ͋͑ͣ Node.js ͸Πϯετʔϧ͠ͱ͜͏ɻ 97

Slide 98

Slide 98 text

͍͞͝ʹ 98

Slide 99

Slide 99 text

JS͸·ͩ·ͩൃల్্ɻࢢ৔ͷχʔζʹΑͬͯͲΜͲΜਐԽ͠ ͍ͯ͘ɻ͜Ε͔Β΋·ͩ·ͩਐԽ͸ଓ͘ɻ 99

Slide 100

Slide 100 text

࠷৽ͷϞϊ͔ͩΒྑ͍ʂͬͯ͜ͱ͸ͳ͍ɻ͚ͲͦΕΛ༻͍Δͱ ؆୯ʹղܾग़དྷΔ͜ͱ΋͋Δɻ • ৽͍͠ػೳ͸ԿΒ͔ͷ໰୊Λղܾ͢ΔͨΊʹੜ·ΕΔɻ • 1,2೥஗Ε͘Β͍Ͱ͍͍ͷ͔ͳʔͱ͍͏ΏΔ͍ؾ࣋ͪͰɻ • ֓ཁ͘Β͍͸ԡ͓͑ͯ͘͞ΫηΛ͚ͭΔͱ͍͍͔΋ɻ • શ෦ͷػೳΛҰ౓ʹ࢖ͬͯΈΑ͏ʂͱ͍͏ͷ͸େมɻ • ࢼͯ͠Έͳ͕Βঃʑʹ஥ྑ͘ͳͬͯߦ͚Ε͹ɻ 100

Slide 101

Slide 101 text

ͭͭ͜͜஍ಓʹ͖͍͖ͭ͋ͬͯ·͠ΐ͏ɻ • 1೔30෼ͱ͔Ͱ΋͍͍ɻ๞͖ͳ͍ఔ౓ʹɻ • ࣮ઓ౤ೖͱ஥ؒΛ࡞Δ͜ͱ͸Ϟνϕʔγϣϯͷҡ࣋ʹͱͯ΋ ॏཁɻ • ࠔͬͯ೰Μͩ࣌ؒ͸ઈରແବʹͳΒͳ͍ɻ 101

Slide 102

Slide 102 text

@see • ͍·͔Β͸͡ΊΔECMAScript 6 102

Slide 103

Slide 103 text

͓ΘΓɻ Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB Site: https://torounit.com 103