JSのお勉強の話。

 JSのお勉強の話。

SaCSS Special13 の発表資料です。

E03953e0c18d776fead147601fdc3899?s=128

Toro_Unit (Hiroshi Urabe)

August 05, 2017
Tweet

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
  8. 8

  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

  66. 66

  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