JSのお勉強の話。

SaCSS Special13 の発表資料です。

Transcript

1. JSͷ͓ษڧͷ࿩ɻ Toro_Unit@SACSS Special13 1
2. $whoami 2
3. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) ϑϦʔϥϯεr Frontend Engineer / Web Designer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit Blog: https://torounit.com 3
4. ׂͱWordPressͷਓͰ͢ɻ • WordBench ௕໺ ϞσϨʔλʔ • ϓϥάΠϯ/ςʔϚ࡞ऀ • WordCamp Kyoto 2017 ηογϣϯ νʔϜ 4
5. Plugins • Custom Post Type Permalinks • 413,500 Downloads • Active Install 80,000+ • Other... Theme • Vanilla 5
6. Others • VCCW Team • WordPress Core Contributor (4.3,4.4,4.5,4.7) 6
7. ௕໺ݝদຊࢢ͔Β͖·ͨ͠ɻ1 • ೔ຊҰඒຯ͍͠Β͍͍͔͕͋͢͠Δ ͱ͔ແ͍ͱ͔ɻ • ϫΠϯඒຯ͍ɻ 1 https://commons.wikimedia.org/wiki/File: 130608_Matsumoto_Castle_Matsumoto_Nagano_pref_Japan02bs4.jpg Author: 663highland. License: CC BY 2.5 7
9. ΍͖ͬͯͨ͜ͱ (2010 ~) • HTML&CSS ։ൃ / ͨ·ʹWebσβΠϯ • JavaScript͸jQueryͰΰϦΰϦܥ͕ΘΓͱଟΊɻ • CMS ςʔϚ੍࡞ • ( 9ׂํ WordPress or MovableType / ͨ·ʹDrupalͱ͔...etc ) • CMS ΧελϚΠζɾϓϥάΠϯ੍࡞ • ( ΧελϜϑΟʔϧυΊͬͪΌ࡞ͬͨΓɺPHPΊͬͪΌॻ͍ͨΓ ) • ؀ڥ͸΄ͱΜͲϨϯλϧαʔόʔ (LAMP) 9
10. ΍ͬͯͳ͍͜ͱ (ख఻͍ఔ౓ͳΒ͋Δ) • εϚϗΞϓϦ։ൃ • WEBαʔϏε։ൃ • γεςϜ։ൃ 10
11. ࠓ೔ͷ࿩ͷΰʔϧ • ࣗ෼ͰάάΓͳ͕ΒJSͷษڧ͕ग़དྷ ΔΑ͏ʹͳΔɻ • Qiita ౳ͷจॻ͕͋Δఔ౓ཧղͰ͖Δ Α͏ʹͳΔɻ 11
12. Do you know JavaScript? 12
13. ͦ΋ͦ΋JavaScript ͬͯͳʹʁ 13
14. • 1995೥ʹɺNetscapeʢޙͷFirefoxʣʹ౥ࡌ͞Εͨϒϥ΢β ༻ͷϓϩάϥϛϯάݴޠɻ • ݩʑ͸LiveScript໊ͬͯલ͚ͩͬͨͲɺେਓͷࣄ৘Ͱվ໊ɻ 14
15. • ࠷ۙ͸Node.js౳ɺϒϥ΢βʹͱͲ· Βͣ൚༻తͳϓϩάϥϛϯάݴޠͱ ͯ͠ͷར༻΋૿͖͑ͯͨɻ • ݴޠͱͯ͠͸ɺͪΐͬͱมΘͬͨಛ ௃Λ͍Ζ͍Ζ࣋ͬͯΔɻ • ϓϩτλΠϓϕʔε 15
16. JavaScriptͰԿ͕ग़དྷΔͷʁ 16
17. WEBαΠτͰͷϢʔεέʔεɻ • DOM (ϒϥ΢β্ͰͷHTML/CSS)ͷૢ࡞ɻ • https://codepen.io/torounit/pen/xLwjMB • Ajax. αʔόʔͱͷ௨৴ɻ • https://codepen.io/torounit/pen/Kvzdej • more... 17
18. DEMO 18
19. ͜ͷΑ͏ʹɺͪΐͬͱͨ͜͠ͱ͔ΒɺΞϓϦέʔγϣϯΈ͍ͨͳϞϊ·Ͱɺ༷ʑͳίτ͕Ͱ͖·͢ɻ 19
20. Usecase • WEBαΠτɾϒϥ΢βΞϓϦέʔγϣϯ • ϞόΠϧΞϓϦ • σεΫτοϓΞϓϦέʔγϣϯ • Atom/Vscode/Slack/WordPress.com...etc • Brackets 20
21. ͪΐͬͱָͦ͠͏͡Όͳ͍Ͱ͔͢ʁ ΕͬͭͱΒ͍ʂ 21
22. Ͱ΋ɺ͍͟άάͬͨΓ৭ΜͳࢿྉΛΑΉͱɾɾɾ 22
23. 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
24. ʢ´°Ϝ°`;ʣ 24
25. • JavaScript ͷ࿩͕஌Γ͍ͨΜ͚ͩ Ͳɻɻɻ • ͔͠΋ίϐϖͯ͠΋ಈ͔ͳ͍ɻɻɻ 25
26. ͱ͍͏Θ͚Ͱɺ࠷ॳ͸ɺJSքʹຮԆΔṖͷ୯ޠͷͬ͘͟Γղ આɺͦͷπʔϧ͕ੜ·ΕͨҙຯΛ͓࿩͠͠Α͏ͱࢥ͍·͢ɻ 26
27. Α͘ฉ͘ ES6 ͱ ͔ ES2015 ͬͯ Կʁ 27
28. ECMAScript (௨শES) • ஀ੜ͙ͯ͢͠ʹɺJavaScriptͬΆ͍ݴ ޠ͕ੜ·ΕΔɻ(IEͷJScript) • ECMAͱ͍͏ඪ४Խஂମ͕ඪ४ن֨ ΛఆΊΔɻͦΕ͕ECMAScript. • ཁ͸JISن֨Έ͍ͨͳϠπɻ 28
29. ES6 / ES2015 • ECMAScript 6 Edition. 6൛. • ͜Εͷࡦఆதʹຖ೥ϦϦʔε͢ΔΑ͏ʹͳͬͨͷͰɺਖ਼ࣜʹ ͸ɺECMAScript 2015ɻͨͩ͠Ҏલ͔ΒES6ͱݺΜͰ͍ͨͷ ͰɺES6ͱݺͼଓ͚͍ͯΔɻ • ES6͸ES5(2009೥)ͱ͸ผ෺ʹͳΔϨϕϧͰͷେ͖ͳมߋ͕͋ ͬͨɻ 29
30. ES2016 • ES2016: ECMAScript 2016ɻݱࡏެ։͞Ε͍ͯΔ࠷৽ͷ࢓ ༷ɻ ES.next, ES7 • ະདྷʹ࣮૷༧ఆor࣮૷͕ٞ࿦͞Ε͍ͯΔ࢓༷ͷ͜ͱɻES7͸ ແ͍͚Ͳɺաڈʹͦ͏͍͏ݴ͍ํΛ͍ͯͨ͠ࠒͷ໊࢒ɻ 30
31. JavaScript / ECMAScript ͷྺ࢙ 1 • 1995೥: JavaScript஀ੜɻNetscapeʹ౥ࡌɻ • 1996೥: JScript஀ੜɻIE3ʹ౥ࡌɻҰؾʹීٴɻ • 1997೥: ECMAScriptॳ൛ɻ • 1998೥: ES2. ୈ2൛ɻ • 1999೥: ES3͕ࡦఆɻ 31
32. 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
33. ਐԽ͸ఀ଺͢Δ͕ͦͷؒɺരൃతʹधཁ͕৳ͼΔɻ • ύιίϯɺΠϯλʔωοτͷීٴɻ • Ajaxʹ஫໨͕ू·Δɻ • εϚʔτϑΥϯͷීٴɻ • ୤Flashͷಈ͖ɻ 33
34. CommonJS / Node.JS • αʔόʔαΠυ΍ϒϥ΢βҎ֎Ͱ΋JavaScriptΛ࢖͍͍ͨʂ V8Τϯδϯ(Google ChromeͷJSΤϯδϯ)໓஡ۤ஡ૣ͍ʂ 34
35. AltJS (Altnative Javascript) • JavaScript ͸͍Ζ͍ΖͱଞͷϓϩάϥϜݴޠͱ͸ҧ͏ಛ௃͕ ͋Δɻ͍Ζ͍Ζݸੑతɻ(thisͱ͔...) • ͦΕΒͷ໰୊Λղܾ͢ΔͨΊʹɺผͷݴޠͰॻ͍ͯɺͦΕΛ JSʹม׵͠Α͏ʂͱ͍͏ಈ͖͕ੜ·ΕΔɻ͍ͦͭΒ͸AltJSͱ ݺ͹ΕΔɻ 35
36. άάΔͱɺTypeScriptͱ͔CoffeeScriptͱ͍͏୯ޠ͕ग़ͯ͘Δ͚ ͲɺʮJSʹ΁Μ͔Μ͢ΔΜͩʔɺ;ʔΜʯͬͯࢥͬͯΕ͹OK. • AltJSͷػೳ͕ES6ʹऔΓࠐ·ΕͨͷͰ΄ͱΜͲਰୀ͕ͨ͠ɺ TypeScript ͸ॱௐʹϢʔβʔ਺͕૿͍͑ͯΔɻಛʹେن໛͔ ͭνʔϜͰͷ։ൃͰ͸ɺܕ͕ཉ͍͠έʔε͕ଟ͍ͱͷ͜ͱɻ 36
37. ͳͲͳͲ͍Ζ͍Ζឯ༨ۂં͕͋Γ·ͯ͠ɻ 37
38. ECMAScript 2015 ( 6 edition ) !!! 38
39. ECMAScript Harmony ͕͍ͭʹϦϦʔεɻ ʢ໿7೥!!!ʣ • ES4Ͱ࠳ંͨ͠࢓༷΋औΓࠐ·Ε͍ͯΔɻ • 1999೥Ҏདྷͷ௒େن໛Ξοϓσʔτɻ(໿16೥!!!) • ΄΅ผͷݴޠʹͳͬͨͱࢥͬͯࠩ͠ࢧ͑ͳ͍ɻ • CommonJS ΍ AltJS ༝དྷͷػೳͳͲ΋Ұ෦औΓࠐ·Ε͍ͯ Δɻ 39
40. ͲΜͳ෩ʹมΘͬͨͷʁ େྔʹ͋Γ͗ͯ͢શ෦͸঺հͰ͖·ͤΜ͕͍͔ͭ͘ɻ 40
41. ఆ਺ Ҏલ͸ม਺͔͠ແ͔ͬͨɻ const ham = 'ʢ´°Ϝ°`ʣ' ham = 'ϋϜ' // <- Τϥʔ!!! 41
42. Ҏલ͸ɻɻɻ ఆ਺ͱͯ͠ѻ͏Ϟϊ͸ɺେจࣈʹͯ͠ίʔσΟϯάن໿Ͱର Ԡɻ ͦͯ͠ഁΒΕΔ var HAM = 'ʢ´°Ϝ°`ʣ' HAM = 'ϋϜ' // <- ΤϥʔʹͳΒͳ͍!!! 42
43. σϑΥϧτҾ਺ function multiply(a, b = 1) { return a*b; } multiply(5); // 5 43
44. Ҏલ͸ɻɻɻ function multiply(a, b) { var b = typeof b !== 'undefined' ? b : 1; return a*b; } multiply(5); // 5 44
45. 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
46. Ҏલ͸ɻɻɻ 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
47. ES6 Modules JS ͔Β JSΛऔΓࠐΉ࢓૊Έɻ import hoge from './hoge.js' hoge.js const hoge = '΄͛'; export default hoge; 47
48. CommonJSʹ΋ࣅͨΑ͏ͳ࢓૊Έ͕ɻ var hoge = require('./hoge.js'); 48
49. Ҏલ͸... window.hoge = {} ͦͷଞ • require.js 49
50. • scriptλάͷಡΈࠐΈॱͳͲΛͪΐͬͱؒҧ͑Δͱಈ͔ͳ͔ ͬͨɻ • window.hoge ͸άϩʔόϧม਺ͳͷͰɺͲ͔͜ΒͰ΋ॻ͖׵ ͑ΒΕΔɻ·ͨɺvar hoge ͱ ؔ਺ͳͲͷ֎Ͱॻ͘ͱ window.hoge ͕ॻ͖׵ΘΔɻ • ྑ͘ղΒͳ͍ͱ͜ΖͰಥવͷΤϥʔ͕ൃੜͨ͠Γɻ 50
51. ม਺͕Өڹ͠ͳ͍Α͏ʹɺଈ࣌ؔ਺ͰғΜͩΓɻ (function(){ var hoge = '΄͛'; })(); 51
52. ৄ͘͠͸ • ͍·͔Β͸͡ΊΔECMAScript 6 52
53. JSʹ͓͚Δ༷ʑͳ໰୊͕ղܾ! ؆୯ʹॻ͚Δͧʂʂ 53
54. ΍ͬͨʔʂ 54
55. ΈΜͳ΋ JS ॻ͜͏ʂʂ 55
56. ... 56
57. ͦ͏͸͔ΜͨΜʹ͍͔ͳ͍ͷ͕͜ͷੈ 57
58. JSʢͱ͍͏͔ϑϩϯτΤϯυશൠʣͷ࠷େͷਏΈɻ • ಉҰͷίʔυͰෳ਺ͷϒϥ΢βɾόʔδϣϯʹରԠɻ • IE / Edge / Safari / Chrome / Firefox / iOS / Android / …. • ECMAScript͸͋͘·Ͱ΋࢓༷ɻϒϥ΢βʹͦͷػೳ͕ೖ͍ͬͯΔ ͔Ͳ͏͔͸ผ໰୊ɻ • શͯͷػೳΛ100%࣮૷ͨ͠ϒϥ΢β͸ɺSafariͷΈɻࠓ೥தʹ ͸ଞͷϒϥ΢β΋? • ES6 Modules ʹ͸·ͩ·ͩน͕ɾɾɾ 58
59. શવָʹͳͬͯͳ͍… 59
60. ͡Ό͊Ͳ͏ͯ͠Δʁ 60
61. ࠷ۙΑ͋͘Δख๏ɻ 1. ES6΍ͦΕҎ߱ͷ࢓༷Ͱॻ͘ɻ 2. ϒϥ΢βͰ΋ಈ͘Α͏ʹม׵ɻ • ม׵͢ΔϓϩάϥϜͷ͜ͱΛτϥ ϯεύΠϥͱ͍͏ɻBabel ͕༗ ໊ɻʢม׵͢Δ͜ͱΛόϕΔͬͯ ݴͬͨΓʣ 61
62. ES6 Modules • τϥϯεύΠϥ͸JSͷߏจΛม׵͠ ͯ͘ΕΔ͕ɺimport ΍ require ͸ผ ͷରԠ͕ඞཁɻ • webpack / browserify / rollup.js ͋ͨ Γ͕༗໊ɻ 62
63. ͜͜·Ͱͷ·ͱΊ • ES/ECMAScript ͕࢓༷ɻ JavaScript ͕࣮૷ɻ • ͍ͭ࠷ۙ·Ͱ 1999೥ͷ࢓༷͔ΒಀΕΒΕͳ͔ͬͨͷ͕JSɻ • ͦͷ൓ಈͰɺES2015 Ͱ΄΅ผ෺ͷݴޠʹͳͬͯΔɻ • ͍ΖΜͳ؀ڥͰಉ͡ίʔυΛಈ͔ͨ͢Ίʹɺόά͕গͳ͘ಡ Έ΍͘͢؅ཧ͠΍͍͢JSͷͨΊʹɺwebpackͱ͔Ͱ·ͱΊͨ ΓɺBabel Ͱม׵ͨ͠Γͯ͠Δɻ 63
64. ๻͕ײ͡Δɺ࠷ۙͷJSपΓͷงғؾɻ WEBΞϓϦɾαʔϏεɺϞόΠϧΞϓϦɺWEBαΠτͳͲͰ࿩ ୊ɾٻΊΒΕΔٕज़Ϩϕϧ͸ͦΕͧΕҟͳΓ·͕͢ɺϘʔμʔ Ϩεʹͳ͖ͬͯͨ෦෼΋ଟ͍ؾ͕͢Δɻ • ΞϓϦͳͲͰ͸ɺJSͰHTML΍CSS΋ಈతʹੜ੒͢ΔΑ͏ͳ Ϟϊ΋ଟ͍ɻ·ͨϦονͳUI͕ཁٻ͞ΕΔέʔεͳͲͰ΋ɻ • RESTAPI౳ɺJS(ͦΕҎ֎Ͱ΋)͔Β͍Ζ͍Ζ৮ΕΔػೳ͕ CMS/ϑϨʔϜϫʔΫ/αʔϏεʹ౥ࡌ͞ΕͨΓɻ 64
65. ͨͱ͑͹͜Μͳͷ 65
67. Good Morning Sunshine • gms.life • new barlance ͷWEBϚΨδϯ • CMSʢWordPressʣ͕ग़ྗͨ͠JSONΛAjaxͰऔ͖ͬͯͯɺ ReactͰϨϯμϦϯάɻ 67
68. ϑϨʔϜϫʔΫ/ϥΠϒϥϦ • ϦονͳUIɺͦΕͳΓͷن໛ͷJSΛॻ͘৔߹͸ɺԿΒ͔ͷϥ ΠϒϥϦɾϑϨʔϜϫʔΫΛ࢖͏͜ͱ͕ଟ͍ɻ • ͨͿΜɺ࠷ۙͷJSք۾ͷϝΠϯͷ࿩୊ɻ 68
69. jQuery Ұڧͩͬͨ࣌୅΋͋ͬͨɻ 69
70. • ͪΐΖͬͱॻ͘ͿΜʹ͸ศརɻ • ࠷ۙ͸ɺʮͱΓ͋͑ͣjQueryʯ͸ආ͚ΒΕΔ܏޲ɻ • jQuery͕ఏڙ͖ͯͨ͠ػೳ͸࠷ۙͷϒϥ΢βʹ͸͍͍ͩͨඪ४ ૷උɻ • ϒϥ΢βͷػೳ͕ඪ४Խ͞ΕΔલ͸ྑ͍ײ͡ʹͯ͘͠Εͨɻ • ࣮͸݁ߏτϦοΩʔͳ͜ͱΛ΍ͬͯΔͷͰ૊Έ߹Θͤ଍Γ͢Δ ͷʹ೉͕͋Δ͜ͱ΋ɻ • औ͖ͬͭ΍͢͞͸ૉ੖Β͍͚͠ͲɺͲͪΒʹ͠ΖJSͷ஌ࣝ͸ཁΔɻ 70
71. ͍͔ͭ͘ྫɻ 71
72. 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
73. 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
74. ॴײ • ࠓͰ΋ศརͳέʔε͸͋ΔͷͰ΄Ͳ΄Ͳʹ෇͖߹͑͹ྑ͍ͷ ͔ͳͱɻ • jQuery ͦͷ΋ͷ΋ඪ४Խ͞Εͨ࢓༷ʹ߹ΘͤΑ͏ͱ͍ͯ͠Δ งғؾɻ(ver3ܥ) 74
75. Angular/React/Vue/Riot • JavaScript ͷϥΠϒϥϦɻAngular͸ Google੡ɺReact͸Facebook੡ɻ • ViewɺUIΛߏங͢ΔͨΊͷϥΠϒϥ Ϧɻ༩͑ΒΕͨσʔλʹԠͯ͡HTML Λੜ੒ͨ͠Γ͕ಘҙɻ • ͜ΕΒͷϥΠϒϥϦͰݟͨ໨Λߏங → σʔλ͸JSͰAPIͱ௨৴ͯ͠औ ಘɻͱݴ͏ྲྀΕ΋ࠓޙ·͢·͢૿͑ ͦ͏ɻ 75
76. ͻͱͭͷϑϨʔϜϫʔΫͷ্Ͱͱݴ͏ྲྀΕ͔Βɺ໾ׂʹಛԽ͠ ͨϥΠϒϥϦΛ૊Έ߹Θͤͯ࢖͏Α͏ʹͳ͖ͬͯͨɻ 76
77. ৄ͘͠஌Γ͍ͨਓ͸ JavaScriptϑϨʔϜϫʔΫબఆͷٞ࿦ - Qiita 77
78. PWA • ϓϩάϨογϒ΢ΣϒΞϓϦ • WEBαΠτͱΞϓϦͷ͍͍ͱ͜औΓΛͨ͠Α͏ͳϞϊɻ • ΦϑϥΠϯϑΝʔετͱ͍͏ߟ͑ํ΋ɻ • Yosuke Onoue: WORDPRESSϢʔβʔͷͨΊͷ PROGRESSIVE WEB APPSͷ࿩ | WordPress.tv 78
79. Ͳ͏΍ͬͯ෇͖߹͍ͬͯ͘ʁ Ͳ͏΍ͬͯษڧ͢Δʁ 79
80. ๻ͷ৔߹ɻ • ๻ࣗ਎͸JSͷҊ݅͸ͦ͜·Ͱଟ͘ͳ͍ɻͰ΋ɺಥવWEBΞϓ Ϧ͡Έͨ͜ͱɺෳࡶͳϑΥʔϜΛ࡞ΔҊ͕݅;ͬͯ͘Δɻ • jQuery Ͱ΋ྑ͍͚ͲɺͦΕ͔͠஌Βͳ͍ͱద੾ͳબ୒͕ग़ དྷͳ͍ͷͰɺͪΐͬ͜ͱ৮ͬͯΈΔɻ • ը໘ભҠ͕͋ΔϞϊ͸ঢ়ଶͷ؅ཧ͕ਏ͍͚ͲɺJS͚ͩͰ΍ ΔͱׂͱαΫοͱऴΘΔέʔε͕ଟ͍ؾ͕͢Δɻʢଟஈࣜ ͷϑΥʔϜͱ͔ʣ 80
81. ͨͱ͑͹͜Μͳͷɻ 81
82. • νϡʔτϦΞϧ΍αϯϓϧΞϓϦ͕੔ උ͞Ε͍ͯΔ΋ͷ͕ଟ͍ͷͰɺͦΕͷ ࣸܦ͸͓͢͢Ίɻ ࣸܦ • ۩ମྫΛݟͳ͕Βࣗ෼Ͱಉ͡ϞϊΛ ॻ͍͍ͯ͘ߦҝɻ • খ͍͞ϞϊΛͬ͘͡Γߟ͑ͳ͕Βॻ ͍͍ͯ͘ɻԿߦ͔ॻ͘͝ͱʹಈ͔ͯ͠ ΈͨΓɻͨͩയવͱॻ͍ͯ΋ͩΊɻ 82
83. TodoΞϓϦ • TodoΞϓϦ͕جૅ͕Ұഋ٧·ͬͯͯΦεεϝɻ • TodoMVCͱ͍͏͍ΖΜͳٕज़Ͱಉ͡TodoΞϓϦΛͭͬͯ͘ݟΑ͏ͱ͍͏ ϓϩδΣΫτ΋͋ΔͷͰɺࢀߟʹ͸ͳΔ͔΋ɻ 83
84. ͱΓ͋͑ͣಈ͘ϞϊΛ࡞Δͱςϯγϣϯ্͕Δ! • ϞνϕʔγϣϯΛҡ࣋͢Δ্Ͱ͍ͩ͡ɻ • ͳΜ͔ͩΜͩͰಈ͘Ϟϊ࡞Δͷ͸ୡ੒ײ͋ΔͰ͠ΐʁ • ੌ͍ϞϊΛ࡞Δඞཁ͸ແ͍ɻ • torounit/one-day-onsen-in-asamaonsen 84
85. ਓʹฉ͘ɻ • ਎ۙʹΤϯδχΞ͕͍Δ৔߹͸͍Ζ͍Ζฉ͍ͯΈΔɻ • ਎ۙʹډͳ͍৔߹͸ɺษڧձͳͲʹࢀՃͯ͠஥ؒΛ૿΍͢ɻ • ஥ྑ͘ͳΔ -> SNS Ͱܨ͕Δ -> ৘ใ͕ࣗવʹʹೖͬͯ͘Δ • ༑ୡ͕΍ͬͯΔ͜ͱͬͯ݁ߏؾʹͳΔΑͶɻ 85
86. ίʔυΛެ։͢Δɻ • ίʔυΛެ։ͯ͠SNS΍ϒϩάͰ͞Β͢ͱɺ͍Ζ͍Ζڭ͑ͯ ͘ΕΔਓ͕ͦͷ஥ؒͷத͔Βग़ݱͨ͠Γ͢Δɻ • ਓͷίʔυΛಡΉͷ΋ࣸܦ͢Δͷ΋ษڧʹͳΔ͠ɺຊਓʹฉ ͍ͨΓͰ͖Δɻ • Github͓͢͢ΊɻϑϩϯτΤϯυͩͬͨΒ Codepen ΋͓͢ ͢Ίɻ 86
87. • ϑϨʔϜϫʔΫͷशಘ͸ݴޠҰ֮ͭ͑Δͷͱಉ͘͡Β͍ͷ࿑ ྗ͕͔͔ΔͱݴΘΕΔͷͰɺͷΜͼΓΏΔΏΔͱ஍ಓʹ෇͖ ߹ͬͯߦ͘ͷ͕ྑ͍ͱࢥ͍·͢ɻҰ೔30෼ͱ͔ɻ • ࢓ࣄͰίϐϖͯ͠Δίʔυͱ͔΋ͪΌΜͱಡΜͰΈͨΓ͢Δ ͷେ੾ɻ 87
88. ͱΓ͋͑ͣɺࠓ͔ΒJSΛॻ͍ ͯΈΔͳΒɻ • codepen • JSBin ͋ͨΓ͕ϒϥ΢βͰͬ͘͞ͱ΍Ε͓ͯख ܰɻ 88
89. ͱΓ͋͑ͣɺͳʹ͔ͭͬͯ͘ΈΔͳΒ 89
90. Felt • https://cognitom.github.io/felt/ • ΦʔϓϯιʔεΧϑΣͷՏଜ͞Μ࡞ͷ ։ൃɾϏϧυ؀ڥɻ • ཁNode.js. • ίϚϯυΛίϐϖ͢Ε͹ग़དྷΔɻ ʢ cd path/to/project ͸దٓಡΈ ସ͑ͯɻʣ 90
91. WebStarterKit • https://developers.google.com/ web/tools/starter-kit/ • Google ࡞ͷελʔλʔΩοτ • ES6 Modules ʹ͸ඇରԠ 91
92. • HTML/CSS/JS͚ͩͳΒɺͲͪΒ΋࢓ࣄͰ΋ී௨ʹ࢖͑Δɻ • PHPͱ૊Έ߹ΘͤΔͱ͔ͩͱ͍Ζ͍ΖେมͰ͕͢ɺஶ໊ͳ ϑϨʔϜϫʔΫ΍CMSͱ͔ͳΒͻͳܗ͕͋ͬͨΓ͢Δɻ • ͜ΕΒʹݶΒͣɺNode.js ੡ͷπʔϧ͕ଟ͍ͷͰɺΠϯετʔ ϧ͓ͯ͘͠ͱ͍͍ɻ • ஶ໊ͳϑϨʔϜϫʔΫͳͲ΋ɺϓϩδΣΫτͷͻͳܗΛ഑෍ ͍ͯͨ͠Γ͢ΔͷͰɺͦΕ͔Β͸͡ΊΔͱ͍͍ײ͡ʹJSΛॻ ͘͜ͱ͚ͩʹूதग़དྷΔɻ 92
93. ͪΐͬͱͰ͖ΔΑ͏ʹͳͬͨΒ 93
94. ࣮ઓ౤ೖɻ • ࣮ࡍʹ࢓ࣄ΍Ҋ݅Λ͜ͳ͢தͰݟ͑ͯ͘Δ෦෼΋ଟ͍ɻ • ʮ͜Μͳ͜ͱʹ΋ؾΛݣ͏ͷ͔ʔʯͱ͔ɻ • ීஈίϐϖͯ͠ΔΑ͏ͳ10ߦఔ౓ͷίʔυΛࣗ෼ͰվΊͯॻ͍ͯΈ ͨΓɻ • ୹͍ίʔυΛ͔ͬ͠ΓͪΌΜͱߟ͑ͯॻ͘͜ͱ͕ͦͷޙʹܨ͕ Δɻ • ͪΐͬͱͣͭ΍ͬͯΈΔͷ͕͍ͨͤͭɻ 94
95. ΋͏͢͜͠Ͱ͖ΔΑ͏ʹͳͬͨΒ 95
96. ଞͷݴޠ΋৮ͬͯΈΔ • ϓϩάϥϛϯάݴޠ͸͍Ζ͍ΖӨڹΛ༩͑͋ͬͯΔͷͰɺ࢓ ࣄͰ৮ͬͯΔଞͷݴޠͱ͔΋ಉ࣌ฒߦతʹษڧͯ͠ΈΔɻ • ʮJSͷ͜ΕͬͯPHPͰ͍͏ͱ͜Ζͷ͋Ε͔ʂʯΈ͍ͨͳൃ ݟ͕͋ͬͨΓɺ͍Ζ͍Ζཧղͷॿ͚ʹͳΔɻ • ଞͷݴޠͷػೳ͕༌ೖ͞ΕΔέʔε͸JSʹݶΒͣΑ͋͘ Δɻ 96
97. ·ͱΊ • ࣸܦେࣄɻྔΑΓ࣭ɻ • ࣮ઓ౤ೖ΋େࣄɻͨͩɺ͍ͪͭͭ͘͜͜͞ɻ • ͻͱΓͰؤுΔͷ͸͍ͨ΁ΜͳͷͰɺίʔυΛެ։͍ͯ͠Ζ ΜͳਓͱҰॹʹ΂Μ͖ΐ͏͍ͯ͜͠͏ɻ • ͱΓ͋͑ͣ Codepen Ͱͳʹ͔ॻ͜͏ɻ • ͱΓ͋͑ͣ Node.js ͸Πϯετʔϧ͠ͱ͜͏ɻ 97
98. ͍͞͝ʹ 98
99. JS͸·ͩ·ͩൃల్্ɻࢢ৔ͷχʔζʹΑͬͯͲΜͲΜਐԽ͠ ͍ͯ͘ɻ͜Ε͔Β΋·ͩ·ͩਐԽ͸ଓ͘ɻ 99
100. ࠷৽ͷϞϊ͔ͩΒྑ͍ʂͬͯ͜ͱ͸ͳ͍ɻ͚ͲͦΕΛ༻͍Δͱ ؆୯ʹղܾग़དྷΔ͜ͱ΋͋Δɻ • ৽͍͠ػೳ͸ԿΒ͔ͷ໰୊Λղܾ͢ΔͨΊʹੜ·ΕΔɻ • 1,2೥஗Ε͘Β͍Ͱ͍͍ͷ͔ͳʔͱ͍͏ΏΔ͍ؾ࣋ͪͰɻ • ֓ཁ͘Β͍͸ԡ͓͑ͯ͘͞ΫηΛ͚ͭΔͱ͍͍͔΋ɻ • શ෦ͷػೳΛҰ౓ʹ࢖ͬͯΈΑ͏ʂͱ͍͏ͷ͸େมɻ • ࢼͯ͠Έͳ͕Βঃʑʹ஥ྑ͘ͳͬͯߦ͚Ε͹ɻ 100
101. ͭͭ͜͜஍ಓʹ͖͍͖ͭ͋ͬͯ·͠ΐ͏ɻ • 1೔30෼ͱ͔Ͱ΋͍͍ɻ๞͖ͳ͍ఔ౓ʹɻ • ࣮ઓ౤ೖͱ஥ؒΛ࡞Δ͜ͱ͸Ϟνϕʔγϣϯͷҡ࣋ʹͱͯ΋ ॏཁɻ • ࠔͬͯ೰Μͩ࣌ؒ͸ઈରແବʹͳΒͳ͍ɻ 101
102. @see • ͍·͔Β͸͡ΊΔECMAScript 6 102
103. ͓ΘΓɻ Thanks! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB Site: https://torounit.com 103