React.jsの紹介

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

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
   #MPH
   
   IUUQZVVNJIBUFOBCMPHDPN
   5XJUUFS
   !ZVVNJ 5
6. աڈ େֶͷ޻ֶ෦ଔۀ
   ଔۀݚڀͰ-JTQॲཧܥʹؔΘΔ
   ૊ࠐܥͷձࣾʹब৬
   $"%ͷϕϯνϟʔاۀʹస৬
   $"%ͷίΞ෦෼ͷ։ൃ
   γϦίϯόϨʔΛ๚໰ͨ͠Γɺถࠃਓͱ࢓ࣄΛ ܦݧ 6
7. ̌ੈل͕ऴΘΔͷͰಠཱ ΧϦϑΥϧχΞͷ੨͍ۭΛΈͨ
   ͋·ΓձࣾʹೃછΊͳ͍ਓͩͬͨ
   ωοτͷ࣌୅ʹͳͬͨ 7 IUUQCMPHMFYVFTDPKQIUNM͔Β
8. &:0⒏DF ೥ʹಠཱ
   ։ൃ
   8FC
   3VCZ
   PO
   3BJMT
   J1IPOF
   ڭҭ
   ͓٬༷ͷ໰୊Λղܾ͢Δ*5ڭҭ
   
   3VCZ
   PO
   3BJMT
   J1IPOF 8 3FBDUKT
9. &:0⒏DF
   ։ൃ
   8FC 9 w ΞδΞϦʔάΞΠεϗοέʔ
   wIUUQXXXBMIPDLZKQ
   wνʔϜɾબखͷ੒੷ूܭ
   w
   1FSM
   ಠࣗϑϨʔϜϫʔΫ wΞϩϋύʔΫ
   
   wIUUQQBSLBMPIB TUSFFUDPN
   w4/4
   w+BWB
   
   4FBTBS wωοτγϣοϓ
   wIUUQXXXCPSPDPKQ
   w3BJMT
   
   K2VFSZ
   w34QFD
   
   $VDVNCFS w๖͑τʔΫ
   ੠༏ͱ4LZQF Ͱ͓࿩
   wIUUQXXXNPFUBMLKQ
   w੠༏ͱͷձ࿩༧໿༧໿
   w3BJMT
   
   K2VFSZ
   w34QFD
   
   3FRVFTU
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"
    4JOHMF
    1BHF
    "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
    ܕ͕޷͖ͳํ͸࢖͍·͠ΐ͏
    7JTVBM
    4UVEJP
    8FC4UPSN
    #BCFM
    ͳͲ͕ରԠ
33. 41" 4JOHMF
    1BHF
    "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 $MJFOU
    TJEF
    .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
    ϑϧελοΫ
    3VCZ
    PO
    3BJMTքͰ͸༗໊ 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 ஫ҙɿ
    SFBDUJWF
    QSPHSBNNJOH
    ͱ͸ແ ؔ܎ 56
57. ΋͏
    K2VFSZ͸ཁΒͳ͘ͳΔͷ͔ʁ
    /0
    
    ؆୯ͳศརػೳͷΑ͏ͳ΋ͷ͸ K2VFSZͷΑ͏ͳ΋ͷ͕ศར 57 3FBDUKT
58. ΋͏
    K2VFSZ͸ཁΒͳ͘ͳΔͷ͔ʁ
    ͋Δ෦෼Ͱ͸
    :FT
    41"Ͱ͸ࠓޙ͸࢖ΘΕͳ͍
    +4ͷ%0.ૢ࡞"1*ͷ௥Ճ
    $44Ξχϝʔγϣϯ
    &4 58 3FBDUKT
59. &:0⒏DF 3FBDUKT ৘ใݯ
    ຊՈ
    IUUQTGBDFCPPLHJUIVCJPSFBDU
    ͱͯ΋ྑ͍ʂ
    ωοτ্ʹ೔ຊޠ༁΋͋Δ͕ݹ͍ͷͰɺ֓೦ͷཧ ղʹ࢖͍ɺͦͷޙ͸ຊՈΛ࢖͏
    
    +4FSJOGP
    IUUQKTFSJOGPBCPVU
    ࠷৽ͷ+4৘ใ
    ೔ຊޠ 59
60. 3FBDUKT༻ͷެ։ίϯϙʔωϯτ
    ॆ࣮ͭͭ͋͠Δ 60 3FBDUKT IUUQSFBDUDPNQPOFOUTDPN
61. ར༻্ͷ஫ҙ఺
    K2VFSZܥͷϥΠϒϥϦʔͱ͸૬ੑ ͕ྑ͘ͳ͍ࣄ͕ଟ͍
    Ξχϝʔγϣϯ͕ۤख
    όʔδϣϯΞοϓͰ"1*͕มΘΔ ࣄ͕͋Δ
    ˠ
    ςετΛॻ͜͏ʂ 61 3FBDUKT IUUQTGBDFCPPLHJUIVCJPSFBDUUJQTVTFSFBDUXJUIPUIFSMJCSBSJFTIUNM
62. ϑϩϯτΤϯυͰ΋ςετ͸ॏཁ 62 3FBDUKT
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 1SFEJDUBCMF
    TUBUF
    DPOUBJOFS
    GPS
    +BWB4DSJQU
    BQQT
    5ISFF
    1SJODJQMFT
    4JOHMF
    TPVSDF
    PG
    USVUI
    4UBUF
    JT
    SFBEPOMZ
    .VUBUJPOT
    BSF
    XSJUUFO
    BT
    QVSF
    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
    
    
    
    
    
    
    
    
    
    
    
    
    
    CSBODI
    SFEVY
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
    σΟϨΫτϦʔ BDUJPOT
    BDUJPO
    BDUJPO$SFBUPS
    DPNQPOFOUT
    3FBDUίϯϙʔωϯτ
    DPOUBJOFST
    3FEVYʹܨ͕Δίϯϙʔ ωϯτ
    SFEVDFST
    SFEVDFS
    TUPSF
    TUPSF
    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
    
    
    
    
    
    
    
    
    
    
    
    
    
    CSBODI
    SFBDUOBUJWF σϞ
93. &MFDUSPO ϚϧνϓϥοτϑΥʔϜͷ(6*ΞϓϦΛ ࡞ΔͨΊͷϑϨʔϜϫʔΫ
    8JOEPXT
    .BD
    -JOVY
    /PEFKT
    
    $ISPNJVN
    ϕʔε
    ΋ͱ΋ͱ"UPNΤσΟλʔͷҰ෦ͩͬͨ
    ࣮ࡍʹ࢖ΘΕ͍ͯΔ 93
94. 94 &MFDUSPO
95. 95 &MFDUSPO ίʔυɿ
    IUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO
    
    
    
    
    
    
    
    
    
    
    
    
    
    CSBODI
    FMFDUSPO σϞ
96. 3FBDUKT
    
    ͍͍Ͷʂ
    
    ΋ͬͱ+BWB4DSJQUͷࣄΛ஌Ζ͏Α 96 ·ͱΊ ίʔυɿ
    IUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO
97. ͓஌Βͤ &:0⒏DF͸ۙʑ
    3FBDUKT
    ͷ ڭҭΛ։࢝͠·͢ʂ 97
98. 2
    
    "