React.jsの紹介

 React.jsの紹介

* React.js いいね!
* もっとJavaScriptの事を知ろうよ

7ec547b3208545bcb5e6c0f1feb732c7?s=128

裕美 吉田

June 13, 2016
Tweet

Transcript

  1. 3FBDUKTͷ঺հ 7FSTJPO٢ా༟ඒ

  2. ຊ೔಺༰ ࣗݾ঺հ +BWB4DSJQUͷྺ࢙ &4 &4  41" 41"༻ϥΠϒϥϦʔɾ ϑϨʔϜϫʔΫ 3FBDUKT

    3FBDUKTσϞ 3FEVY Ϟμϯ+4։ൃ؀ڥ 8FCҎ֎Ͱͷ +BWB4DSJQUར༻ ͓஌Βͤɾ·ͱΊ 2" 2
  3. 3FBDUKT͍͍Ͷʂ ΋ͬͱ+BWB4DSJQUͷࣄΛ஌Ζ͏Α 3FBDUKT 3FEVYͷ࠷৽ͷ৘ใͳ Ͳ͸࿩͠·ͤΜ 3 ຊ೔͓఻͍͑ͨ͠ࣄ

  4. ࣗݾ঺հ

  5. ٢ా༟ඒ :PTIJEB:VVNJ  ༗ݶձࣾ&:0⒏DF IUUQXXXFZP⒏DFDPN #MPHIUUQZVVNJIBUFOBCMPHDPN 5XJUUFS!ZVVNJ 5

  6. աڈ େֶͷ޻ֶ෦ଔۀ ଔۀݚڀͰ-JTQॲཧܥʹؔΘΔ ૊ࠐܥͷձࣾʹब৬ $"%ͷϕϯνϟʔاۀʹస৬ $"%ͷίΞ෦෼ͷ։ൃ γϦίϯόϨʔΛ๚໰ͨ͠Γɺถࠃਓͱ࢓ࣄΛ ܦݧ 6

  7. ̌ੈل͕ऴΘΔͷͰಠཱ ΧϦϑΥϧχΞͷ੨͍ۭΛΈͨ ͋·ΓձࣾʹೃછΊͳ͍ਓͩͬͨ ωοτͷ࣌୅ʹͳͬͨ 7 IUUQCMPHMFYVFTDPKQIUNM͔Β

  8. &:0⒏DF ೥ʹಠཱ ։ൃ 8FC 3VCZPO3BJMT  J1IPOF ڭҭ ͓٬༷ͷ໰୊Λղܾ͢Δ*5ڭҭ 3VCZPO3BJMT

    J1IPOF 8 3FBDUKT
  9. &:0⒏DF։ൃ 8FC 9 w ΞδΞϦʔάΞΠεϗοέʔ wIUUQXXXBMIPDLZKQ wνʔϜɾબखͷ੒੷ूܭ w1FSMಠࣗϑϨʔϜϫʔΫ wΞϩϋύʔΫ wIUUQQBSLBMPIB

    TUSFFUDPN w4/4 w+BWB4FBTBS wωοτγϣοϓ wIUUQXXXCPSPDPKQ w3BJMTK2VFSZ w34QFD$VDVNCFS w๖͑τʔΫ ੠༏ͱ4LZQF Ͱ͓࿩  wIUUQXXXNPFUBMLKQ w੠༏ͱͷձ࿩༧໿༧໿ w3BJMTK2VFSZ w34QFD3FRVFTU
  10. &:0⒏DF։ൃ J1IPOF 10 ֆຊΞϓϦ J1IPOFJ1BE 5XFFUͳ͏ ແྉ ڭ͑ࢠ͕࡞ͬͨΞϓϦ

  11. ࣥච 11

  12. ߨԋ 12 RubyKaigi2008 Ruby World Conference 2013 Ruby Business Users

    Conference 2014, 2015
  13. ࠷ۙͷ࢓ࣄ 13 ໿ສߦͷK2VFSZϕʔεͷ41"Λ 3FBDUKT΁Ҡߦ IUUQZVVNJIBUFOBCMPHDPNFOUSZ

  14. +BWB4DSJQUੈքͷ Πϝʔδ

  15. Ծઆ ࠷৽ͷ+BWB4DSJQUͷੈք͸Ұൠతͳ ιϑτ΢ΣΞɾΤϯδχΞʹ͸ɺ͋ ·Γ஌ΒΕͯͳ͍ͷͰ͸ʁ 15

  16. 8FCΞϓϦ։ൃͷੈքɾੲ 16 04 GSBNFXPSL "QQMJDBUJPO %BUB#BTF MBOHVBHF +BWB "41 1FSM

    )5.- $44 +BWB4DSJQU (SBQIJDT σβΠφʔ ϓϩάϥϚʔ
  17. 17 04 GSBNFXPSL "QQMJDBUJPO %BUB#BTF MBOHVBHF +BWB $ 3VCZ 1)1

    )5.- $44 +BWB4DSJQU (SBQIJDT σβΠφʔ ϓϩάϥϚʔ ϑϩϯτΤϯυΤϯδχΞ 8FCΞϓϦ։ൃͷੈքɾࠓ /PEFKT K2VFSZ "OHVMB 3FBDU
  18. ࢲͷ஌͍ͬͯΔ ݴޠίϛϡχςΟͷڑ཭ 18 ࢀՃऀͷฏۉ೥ྸ +BWB 3VCZ ݸਓతͳΠϝʔδͰ͢ +BWB4DSJQU 4XJGU J04

  19. +BWB4DSJQUͷ ྺ࢙

  20. +BWB4DSJQUͷྺ࢙ 20 41" "KBY ҉ࠇظ 1995 2005 2010 2015 JavaScript஀ੜ

    ECMAScript1 Gmail , Google Maps Google V8 CoffeeScript Node.js TypeScript ECMAScript6 Prototype.js jQuery Backbone.js Ember.js AngularJS React.js
  21. ॳΊͯ঎༻8FCϒϥ΢βʔΛ࡞ͬͨ /FUTDBQFࣾͷ#SFOEBO&JDI͕ɺ ೥ʹ։ൃ͠ಉࣾͷϒϥ΢βʔʹ૊Έࠐ Μͩ େ͍ʹ஫໨͞Εɺͦͷޙ.JDSPTPGUͳͲͷϥΠόϧ اۀ΋ϒϥ΢βʔʹ+BWB4DSJQUʹ࣮૷ͨ͠ +BWBʙͱ͍͏໊લ͕෇͍͍ͯΔ͕+BWBݴޠͱ͸·ͬ ͨ͘ແԑɺ౰࣌+BWB͕஫໨͞Ε͍ͯͨͷͰϚʔέο ςΟϯάతʹ෇͚ΒΕͨ 21

    +4ͷྺ࢙ɿ஀ੜ
  22. ֤ࣾͷϒϥ΢βʔͰ࢓༷͕ҧͬͨΓɺόά͕ ଟ͘ɺظ଴͞Εͨ΄Ͳʹ͸࢖ΘΕͳ͔ͬͨɻ ओʹΞϥʔτͷදࣔ΍ɺ΢Οϯυ΢ͷίϯτ ϩʔϧͳͲ؆୯ͳࣄʹ࢖ΘΕ͍ͯͨɻ 22 +4ͷྺ࢙ɿ҉ࠇظ

  23. ೥͜Ζ͔Βɺ(NBJM΍(PPHMF.BQͷΑ͏ ʹɺ+BWB4DSJQUΛ࢖͏ࣄͰ8FCΞϓϦͷ࢖͍ উखΛඈ༂తʹߴΊͨΞϓϦ͕ొ৔͠ɺ࠶౓ +BWB4DSJQUʹ஫໨͕ू·ΔΑ͏ʹͳͬͨɻ "KBY +BWB4DSJQU΋Ұਓલͷϓϩάϥϛϯάݴޠͱ͠ ͯͷ஍ҐΛཱ֬ͨ͠ 23 +4ͷྺ࢙ɿΧϜόοΫ

  24. /PEFKTɿαʔόʔαΠυͷ+BWB4DSJQU؀ڥ ඇಉظ*0 ߴ଎ ඇৗʹߴ͍εέʔϥϏϦςΟʔ 24 +4ͷྺ࢙ɿݱࡏ େൃల 

  25. 25 IUUQTXXXRVPSBDPN8IBUDPNQBOJFTBSFVTJOH/PEFKTJOQSPEVDUJPOΑΓ +4ͷྺ࢙ɿݱࡏ େൃల 

  26. 41" 4JOHMF1BHF"QQMJDBUJPO ɿ6*ΛΫϥΠ ΞϯταΠυͷ+BWB4DSJQUͰશͯߦ͏ελΠϧ ͷ8FCΞϓϦ 3FBDU/BUJWFɿ+4 3FBDUKT Λ࢖ͬͨεϚϑΥ ΞϓϦ։ൃ؀ڥ &MFDUSPOɿ/PEFKT

    $ISPOJVN $ISPNFͷΤ ϯδϯ Λ࢖͍ϚϧνϓϥοτϑΥʔϜͳ(6*πʔ ϧΛ࡞ΕΔϕʔε 26 +4ͷྺ࢙ɿݱࡏ େൃల 
  27. &4 &4

  28. &4 &4 +BWB4DSJQUͷ৽͍͠࢓༷ &$."4DSJQU ͷ೥൛ ैདྷ&4ͱݺ͹Ε͍ͯͨ΋ͷ ͪͳΈʹݱࡏͷ+4͸&4 Ϋϥε΍਺ʑͷ৽͍͠จ๏͕ಋೖ͞Ε ॻ͖΍͕͢͞େ෯ʹ޲্ͨ͠ 28

  29. &4 &4 ݱ࣌఺Ͱ͸ϒϥ΢βʔͷαϙʔτ͸׬શ Ͱ͸ͳ͍ ಛʹεϚϑΥͷϒϥ΢βʔ͸μϝ ݱࡏ͸&4͔Β&4ʹม׵͢Δπʔϧ ୅ ද#BCFM ౳Ͱม׵͠ར༻͞Ε͍ͯΔ 29

    IUUQTLBOHBYHJUIVCJPDPNQBUUBCMFFTΑΓ
  30. 30 &4 &4 var PI = 3.141592 function square(x) {

    return x * x; } function tax(n, rate) { if (rate == undefined) rate = 0.08; return Math.floor(n * rate); } const PI = 3.141592 square = (x) => x * x tax = (n, rate = 0.08) => Math.floor(n * rate) &4 &4
  31. 31 &4 &4 Jyanken = (function() { function Jyanken(hand) {

    this.hand = hand; } jyanken.prototype.poi = function() { return this.hand = Math.floor(Math.random() * 3); }; jyanken.prototype.judge = function(your) { if (this.hand === your.hand) { return "Ҿ͖෼͚"; } else if ( ..লུ.. ) { return "উͪ"; } else { return "ෛ͚"; } }; return Jyanken; })(); class Jyanken { constructor(hand) { this.hand = hand } poi() { this.hand = Math.floor(Math.random() * 3) } judge(your) { if (this.hand === your.hand) { return "Ҿ͖෼͚" } else if ( ..লུ.. ) { return "উͪ" } else { return "ෛ͚" } } } &4 &4
  32. 32 &4 &4 +BWB4DSJQU"MUFSOBUJWFT $P⒎F4DSJQU ΋͏๨Ε·͠ΐ͏ 5ZQF4DSJQU ܕ͕޷͖ͳํ͸࢖͍·͠ΐ͏ 7JTVBM4UVEJP 8FC4UPSN

    #BCFM ͳͲ͕ରԠ
  33. 41" 4JOHMF1BHF"QQMJDBUJPO

  34. ݹ͖ྑ͖8FCΞϓϦ 34 controller model view HTML (css, image) request HTML

    Server Browser
  35. "KBYγϯϓϧ 35 controller model view HTML (css, image) request HTML

    Server Browser JS request HTML
  36. "KBYෳࡶ 36 controller model view HTML (css, image) request HTML

    Server Browser JS request HTML state, data
  37. 41" 37 controller model request Server Browser JS controller model

    view HTML css, image JSON iOS / Android request JSON $MJFOUTJEF.7$ͱݺ͹ΕΔࣄ΋͋Δ
  38. 41" ϝϦοτ αʔόʔͱ+4ͷॲཧͷ੾Γ෼͚͕ ໌֬ ൓Ԡͷૣ͍6*69ΛఏڙͰ͖Δ αʔόʔଆ͔Β͸εϚϑΥͱಉ༷ ʹѻ͑Δ 38

  39. 41" σϝϦοτ ݕࡧΤϯδϯରࡦ͕ඞཁ ݹ͍ϒϥ΢βʔ͸αϙʔτग़དྷͳ͍ ։ൃऀͷֶशίετ͕૿͑Δ 39

  40. 40 ຖ೥ͷΑ͏ʹφ΢ΠͷϥΠϒϥ ϦʔɾϑϨʔϜ͕ొ৔͍ͯͨ͠ 41"༻ϥΠϒϥϦʔɾϑϨʔϜϫʔΫ

  41. 41"༻ϥΠϒϥϦʔɾϑϨʔϜϫʔΫ #BDLCPOFKT .$ͷϕʔεͷΈఏڙ 41

  42. 41"༻ϥΠϒϥϦʔɾϑϨʔϜϫʔΫ "OHVMBS+4 ϑϧελοΫ ૒ํ޲όΠϯσΟϯά Ұ࣌ظ͸41"ͷຊ໋ͱݴΘΕ͍ͯͨ όʔδϣϯ̎͸ඇޓ׵ 42

  43. 41"༻ϥΠϒϥϦʔɾϑϨʔϜϫʔΫ &NCFSKT ϑϧελοΫ 3VCZPO3BJMTքͰ͸༗໊ 43

  44. 3FBDUKT

  45. &:0⒏DF 3FBDUKT γϯϓϧͳϓϩάϥϛϯάϞσϧͱੑೳ Λཱ྆ ϝϯςφϯεੑ͕ߴ͍ίʔυ͕ॻ͚Δ 'BDFCPPL͕࣮ࡍʹ࢖͍ͬͯΔ࣮੷ 45

  46. &:0⒏DF 3FBDUKT γϯϓϧͳϓϩάϥϛϯάϞσϧͱੑೳΛ ཱ྆ K2VFSZϖʔδͷͲͷ෦෼ΛͲ͏มߋ͢Δ ͱ͍͏ϓϩάϥϜΛॻ͔ͳ͍ͱ͍͚ͳ͍ 3FBDUαʔόʔαΠυͷWJFXͷΑ͏ʹϓ ϩάϥϜ͸ϖʔδશମΛඳը͢ΔίʔυΛ ॻ͚ͩ͘ 46

  47. &:0⒏DF 3FBDUKT 7JSUVBM%0. 3FBDUKTͷද͕ࣔߴ଎ԽͰ͖Δٕज़ ϝϞϦʔ্ʹͷมߋલޙͷ%0.Λ࣋ͪɺ มߋ͕͋ͬͨ෦෼Λݕग़͠ɺຊ౰ʹมߋ͕ ඞཁͳ෦෼ͷΈΛը໘ʹ൓ө͢Δ 47

  48. 3FBDUKT 48 IUUQUFSPQBJOGPCMPHDIBOHFBOEJUTEFUFDUJPOJOKBWBTDSJQUGSBNFXPSLTIUNM ΑΓ 7JSUVBM%0. ϒϥ΢βʔ ը໘ +4 ϝϞϦʔ

  49. &:0⒏DF 3FBDUKT ϝϯςφϯεੑ͕ߴ͍ίʔυ͕ॻ͚Δ ίϯϙʔωϯτࢦ޲ +4ͷதʹ)5.-Λॻ͘+49Λ࠾༻ 49

  50. 3FBDUKT 50

  51. 3FBDUKT 51

  52. 52 3FBDUKT ?? 

  53. 3FBDUKTσϞ ίʔυɿIUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO

  54. 3FBDUKT ίϯϙʔωϯτ $PNQPOFOUΛܧঝͨ͠Ϋϥε ϑϧػೳ ؔ਺ දࣔͷΈͷίϯϙʔωϯτ 54

  55. 3FBDUKTϕετϓϥΫςΟε 55 ίϯϙʔωϯτ਌ ίϯϙʔωϯτࢠ ίϯϙʔωϯτଙ σʔλ QSPQT Πϕϯτ TUBUF

  56. &:0⒏DF 3FBDUKT ஫ҙɿSFBDUJWFQSPHSBNNJOHͱ͸ແ ؔ܎ 56

  57. ΋͏K2VFSZ͸ཁΒͳ͘ͳΔͷ͔ʁ /0 ؆୯ͳศརػೳͷΑ͏ͳ΋ͷ͸ K2VFSZͷΑ͏ͳ΋ͷ͕ศར 57 3FBDUKT

  58. ΋͏K2VFSZ͸ཁΒͳ͘ͳΔͷ͔ʁ ͋Δ෦෼Ͱ͸:FT 41"Ͱ͸ࠓޙ͸࢖ΘΕͳ͍ +4ͷ%0.ૢ࡞"1*ͷ௥Ճ $44Ξχϝʔγϣϯ &4 58 3FBDUKT

  59. &:0⒏DF 3FBDUKT ৘ใݯ ຊՈIUUQTGBDFCPPLHJUIVCJPSFBDU ͱͯ΋ྑ͍ʂ ωοτ্ʹ೔ຊޠ༁΋͋Δ͕ݹ͍ͷͰɺ֓೦ͷཧ ղʹ࢖͍ɺͦͷޙ͸ຊՈΛ࢖͏ +4FSJOGPIUUQKTFSJOGPBCPVU ࠷৽ͷ+4৘ใ ೔ຊޠ

    59
  60. 3FBDUKT༻ͷެ։ίϯϙʔωϯτ ॆ࣮ͭͭ͋͠Δ 60 3FBDUKT IUUQSFBDUDPNQPOFOUTDPN

  61. ར༻্ͷ஫ҙ఺ K2VFSZܥͷϥΠϒϥϦʔͱ͸૬ੑ ͕ྑ͘ͳ͍ࣄ͕ଟ͍ Ξχϝʔγϣϯ͕ۤख όʔδϣϯΞοϓͰ"1*͕มΘΔ ࣄ͕͋ΔˠςετΛॻ͜͏ʂ 61 3FBDUKT IUUQTGBDFCPPLHJUIVCJPSFBDUUJQTVTFSFBDUXJUIPUIFSMJCSBSJFTIUNM

  62. ϑϩϯτΤϯυͰ΋ςετ͸ॏཁ 62 3FBDUKT

  63. None
  64. 3FEVY 'MVY 3FBDUKT͸දࣔͷΈͷϥΠϒϥϦʔ ͳΒ͹.PEFM$POUSPMMFS͸ʁ 64

  65. 'MVY .7$͸εέʔϧ͠ͳ͍ɻͳΒ͹'MVYͩ CZ'BDFCPPL 65 IUUQTXXXJOGPRDPNOFXTGBDFCPPLNWDqVYΑΓ

  66. 66 'MVY IUUQTHJUIVCDPNGBDFCPPLqVYΑΓ ྲྀΕ͕Ұํ޲

  67. ͔͠͠'BDFCPPL͸׬ શͳ'MVY࣮૷ΛϦϦʔ ε͠ͳ͔ͬͨ 67 'MVY IUUQTHJUIVCDPNLSJBTPGUSFBDUTUBSUFSLJUJTTVFT ΑΓ

  68. 3FEVY 1SFEJDUBCMFTUBUFDPOUBJOFSGPS +BWB4DSJQUBQQT 5ISFF1SJODJQMFT 4JOHMFTPVSDFPGUSVUI 4UBUFJTSFBEPOMZ .VUBUJPOTBSFXSJUUFOBTQVSF GVODUJPOT 68

  69. 3FEVY 'MVYͷ࣮૷Ͱ͸ͳ͍ 'MVYʹΠϯεύΠΞ͞Ε͍ͯΔ ࠓͷͱ͜Ζϙϐϡϥʔͳ'MVYܥϑϨʔ ϜϫʔΫ 3FBDUKTઐ༻Ͱ͸ͳ͍ 69

  70. 3FEVY 70 Actions ActionCreators Store View React.js Reduces state (data)

    event, … dispatch update state͸࢖Θͳ͍
  71. 3FEVY 71

  72. 3FEVYͷίʔυ ίʔυɿIUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO CSBODISFEVY

  73. 3FEVY "DUJPOT"DUJPO$SFBUPS 3FEVDFST "DUJPOΛड͚ͯ࣍ͷঢ়ଶΛฦ͢ 4UPSF TUBUFঢ়ଶͷอ࣋ 73

  74. 3FEVY $POOFDU 3FBDUͱͷͭͳ͗ TUBUFΛQSPQTͰ౉͢ "DUJPO EJTQBUDI ΛQSPQTͰ౉͢ .JEEMFXBSF SFEVYͷ֦ு"1*௨৴ɺϩάɾɾɾ 74

  75. 3FEVYσΟϨΫτϦʔ BDUJPOTBDUJPO BDUJPO$SFBUPS DPNQPOFOUT3FBDUίϯϙʔωϯτ DPOUBJOFST3FEVYʹܨ͕Δίϯϙʔ ωϯτ SFEVDFSTSFEVDFS TUPSFTUPSF NJEEMFXBSFఆٛ 75

  76. 3FEVYࢲݟ ྑ͍఺ 3FBDU͔Β.PEFM$POUSPMMFSཁૉ͕ͳ ͘ͳΔ ॻ͖ํ͕౷Ұ͞ΕΔͷͰɺେن໛ɾେ ਓ਺ͷ։ൃ޲͖ʁ ίϯύΫτͳ࡞Γ 3FBDUͱ͸ૄ݁߹ 76

  77. 3FEVYࢲݟ ෆຬͳ఺ ΊΜͲ͏ "1*ݺͼग़͕͠εϚʔτͰͳ͍ ຊ౰ʹܾఆଧ͔ʁ 77

  78. Ϟμϯ+4։ൃ؀ڥ

  79. Ϟμϯ+4։ൃ؀ڥ 79

  80. Ϟμϯ+4։ൃ؀ڥ DTT KTΛҰͭͷϑΝΠϧʹ·ͱΊͨ Γɺѹॖͨ͠Γ &4 5ZQF4DSJQUΛ&4ʹม׵͢Δ 4BTTΛ$44ʹม׵͢Δ +BWB4DSJQUʹϞδϡʔϧΛఏڙ /PEFKTͷϥΠϒϥϦʔΛ8FCͰ࢖͑ ΔΑ͏ʹ͢Δ

    80
  81. Ϟμϯ+4։ൃ؀ڥ ͨ͘͞Μ͋Γ͗͢ɺԿΛ࢖͑͹ྑ͍ ͷ͔෼͔Βͳ͍ʁʁ φ΢ͳπʔϧ͕සൟʹมΘΔʂ ಥવͷ։ൃఀ଺??  81

  82. ม׵ɹɹɹɹ ౷߹։ൃπʔϧ ϥΠϒϥϦʔ λεΫ؅ཧ Ϟμϯ+4։ൃ؀ڥ 82 ݴޠ ೥݄ݱࡏ νΣοΫ

  83. OPEFKT (PPHMFͷ։ൃͨ͠ߴ଎+BWB4DSJQUΤ ϯδϯ7Λ֩ʹ࡞ΒΕͨ+4ίϚϯυ ϚϧνϓϥοτϑΥʔϜ ඇಉظ*0 +4πʔϧ͸ɺ+4Ͱॻ͔Ε͍ͯͯ OPEFKTͰಈ͘ 83

  84. OQN OPEFKT༻ϥΠϒϥϦʔ؅ཧπʔϧ OPEFKT༻ϥΠϒϥϦʔͷϦϙδτ Ϧʔ ґଘϥΠϒϥϦʔͷόʔδϣϯͷௐ ఀΛߦͬͯ͘ΕΔ ͦͷଞɾɾɾ 84

  85. OQN 85 http://www.modulecounts.com ʙ

  86. 8FCQBDL ݱࡏ ೥݄ ྲྀߦͷ։ൃπʔϧ ֤ॲཧ͸MPBEFSͱݺ͹ΕΔϞδϡʔ ϧ͕ߦ͏ ϑΝΠϧͷґଘؔ܎ɺ࡞ۀΛهड़ Ұൠతͳ࡞ۀ͸؆୯ʹͰ͖Δ .BD 8JOEPXT

    -JOVYΛαϙʔτ 86
  87. &4-JOU +4 &4 &4 ͷจ๏νΣοΫ πʔϧ ಈ࡞ͤ͞Δલʹɺจ๏Τϥʔɺະఆٛ ͳͲ͕൑Γɺ։ൃͷੜ࢈ੑ͕͕͋Δ +4Λ࢖͏ʹ͸΄΅ඞਢͳπʔϧ ಠࣗνΣοΫϧʔϧͷ௥Ճ΋༰қ

    87
  88. σϞͷ։ൃ؀ڥͷߏஙखॱ 88 $ mkdir frontend $ cd frontend $ mkdir

    -p src/js src/css $ brew install node $ npm init -y $ npm install --save react react-dom $ npm install --save isomorphic-fetch $ npm install --save material-design-lite $ npm install —-save-dev babel-loader babel-preset-es2015 babel-preset-react $ npm install —-save-dev eslint eslint-loader eslint-plugin-react babel $ npm install —-save-dev css-loader style-loader $ npm install -g webpack
  89. σϞͷ։ൃ؀ڥͷઃఆ 89 module.exports = { entry: { "app": "./src/js/index.js", },

    output: { path: '../public/js', filename: "[name].js" }, module: { preLoaders: [{ test: /\.js$/, exclude: /node_modules/, loader: "eslint-loader" }], loaders: [{ test: /\.css$/, loader: "style!css" }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }] }, resolve: { extensions: ['', '.js', '.css'] }, eslint: { configFile: './.eslintrc' } }; XFCQBDLDPOpHKT
  90. 8FCҎ֎Ͱͷ +BWB4DSJQUར༻

  91. 3FBDU/BUJWF +4 3FBDUͰεϚϑΥΞϓϦΛߏங ͢ΔͨΊͷϑϨʔϜϫʔΫ J04 "OESPJEʜରԠ σόΠε (14 Χϝϥʜ ΋ར༻Ͱ͖Δ

    IUNMͷເΑ΋͏Ұ౓ʁ 91
  92. 92 3FBDU/BUJWF ίʔυɿIUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO CSBODISFBDUOBUJWF σϞ

  93. &MFDUSPO ϚϧνϓϥοτϑΥʔϜͷ(6*ΞϓϦΛ ࡞ΔͨΊͷϑϨʔϜϫʔΫ 8JOEPXT .BD -JOVY /PEFKT $ISPNJVNϕʔε ΋ͱ΋ͱ"UPNΤσΟλʔͷҰ෦ͩͬͨ ࣮ࡍʹ࢖ΘΕ͍ͯΔ

    93
  94. 94 &MFDUSPO

  95. 95 &MFDUSPO ίʔυɿIUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO CSBODIFMFDUSPO σϞ

  96. 3FBDUKT͍͍Ͷʂ ΋ͬͱ+BWB4DSJQUͷࣄΛ஌Ζ͏Α 96 ·ͱΊ ίʔυɿIUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO

  97. ͓஌Βͤ &:0⒏DF͸ۙʑ3FBDUKTͷ ڭҭΛ։࢝͠·͢ʂ 97

  98. 2"