Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React.jsの紹介
Search
裕美 吉田
June 13, 2016
Technology
2
800
React.jsの紹介
* React.js いいね!
* もっとJavaScriptの事を知ろうよ
裕美 吉田
June 13, 2016
Tweet
Share
More Decks by 裕美 吉田
See All by 裕美 吉田
React-nativeの紹介
yuumi3
1
1.8k
即戦力になるRubyエンジニアの作り方教えます
yuumi3
0
500
iOS 開発者のためのバックエンド入門 (2)
yuumi3
1
4k
iOS 開発者のためのバックエンド入門 (1)
yuumi3
15
8.6k
LoopBackに付いて少し
yuumi3
0
1.6k
Ruby開発者を増やすための教育について (8年間のRuby教育で得た知見)
yuumi3
7
3.9k
クラウドxスマフォ時代のRuby on Rails入門
yuumi3
2
230
真のWebプログラマー向け RubyMotion フレームワーク
yuumi3
4
1.4k
CLandMK
yuumi3
1
120
Other Decks in Technology
See All in Technology
アジリティを高めるテストマネジメント #QiitaQualityForward
makky_tyuyan
1
290
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
1k
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
380
開発者体験を定量的に把握する手法と活用事例
ham0215
0
130
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
130
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
310
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
160
MIMEと文字コードの闇
hirachan
2
1.5k
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
340
Platform Engineeringで クラウドの「楽しくない」を解消しよう
jacopen
4
210
RaspberryPi CM4(CM5も)面白いぞ!
nonnoise
0
110
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
GitHub's CSS Performance
jonrohan
1030
460k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
440
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
The Language of Interfaces
destraynor
156
24k
A Philosophy of Restraint
colly
203
16k
Transcript
3FBDUKTͷհ 7FSTJPO٢ా༟ඒ
ຊ༰ ࣗݾհ +BWB4DSJQUͷྺ࢙ &4 &4 41" 41"༻ϥΠϒϥϦʔɾ ϑϨʔϜϫʔΫ 3FBDUKT
3FBDUKTσϞ 3FEVY Ϟμϯ+4։ൃڥ 8FCҎ֎Ͱͷ +BWB4DSJQUར༻ ͓Βͤɾ·ͱΊ 2" 2
3FBDUKT͍͍Ͷʂ ͬͱ+BWB4DSJQUͷࣄΛΖ͏Α 3FBDUKT 3FEVYͷ࠷৽ͷใͳ Ͳ͠·ͤΜ 3 ຊ͓͍͑ͨ͠ࣄ
ࣗݾհ
٢ా༟ඒ :PTIJEB:VVNJ ༗ݶձࣾ&:0⒏DF IUUQXXXFZP⒏DFDPN #MPHIUUQZVVNJIBUFOBCMPHDPN 5XJUUFS!ZVVNJ 5
աڈ େֶͷֶ෦ଔۀ ଔۀݚڀͰ-JTQॲཧܥʹؔΘΔ ࠐܥͷձࣾʹब৬ $"%ͷϕϯνϟʔاۀʹస৬ $"%ͷίΞ෦ͷ։ൃ γϦίϯόϨʔΛ๚ͨ͠ΓɺถࠃਓͱࣄΛ ܦݧ 6
̌ੈل͕ऴΘΔͷͰಠཱ ΧϦϑΥϧχΞͷ੨͍ۭΛΈͨ ͋·ΓձࣾʹೃછΊͳ͍ਓͩͬͨ ωοτͷ࣌ʹͳͬͨ 7 IUUQCMPHMFYVFTDPKQIUNM͔Β
&:0⒏DF ʹಠཱ ։ൃ 8FC 3VCZPO3BJMT J1IPOF ڭҭ ͓٬༷ͷΛղܾ͢Δ*5ڭҭ 3VCZPO3BJMT
J1IPOF 8 3FBDUKT
&: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
&:0⒏DF։ൃ J1IPOF 10 ֆຊΞϓϦ J1IPOFJ1BE 5XFFUͳ͏ ແྉ ڭ͑ࢠ͕࡞ͬͨΞϓϦ
ࣥච 11
ߨԋ 12 RubyKaigi2008 Ruby World Conference 2013 Ruby Business Users
Conference 2014, 2015
࠷ۙͷࣄ 13 ສߦͷK2VFSZϕʔεͷ41"Λ 3FBDUKTҠߦ IUUQZVVNJIBUFOBCMPHDPNFOUSZ
+BWB4DSJQUੈքͷ Πϝʔδ
Ծઆ ࠷৽ͷ+BWB4DSJQUͷੈքҰൠతͳ ιϑτΣΞɾΤϯδχΞʹɺ͋ ·ΓΒΕͯͳ͍ͷͰʁ 15
8FCΞϓϦ։ൃͷੈքɾੲ 16 04 GSBNFXPSL "QQMJDBUJPO %BUB#BTF MBOHVBHF +BWB "41 1FSM
)5.- $44 +BWB4DSJQU (SBQIJDT σβΠφʔ ϓϩάϥϚʔ
17 04 GSBNFXPSL "QQMJDBUJPO %BUB#BTF MBOHVBHF +BWB $ 3VCZ 1)1
)5.- $44 +BWB4DSJQU (SBQIJDT σβΠφʔ ϓϩάϥϚʔ ϑϩϯτΤϯυΤϯδχΞ 8FCΞϓϦ։ൃͷੈքɾࠓ /PEFKT K2VFSZ "OHVMB 3FBDU
ࢲͷ͍ͬͯΔ ݴޠίϛϡχςΟͷڑ 18 ࢀՃऀͷฏۉྸ +BWB 3VCZ ݸਓతͳΠϝʔδͰ͢ +BWB4DSJQU 4XJGU J04
+BWB4DSJQUͷ ྺ࢙
+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
ॳΊͯ༻8FCϒϥβʔΛ࡞ͬͨ /FUTDBQFࣾͷ#SFOEBO&JDI͕ɺ ʹ։ൃ͠ಉࣾͷϒϥβʔʹΈࠐ Μͩ େ͍ʹ͞Εɺͦͷޙ.JDSPTPGUͳͲͷϥΠόϧ اۀϒϥβʔʹ+BWB4DSJQUʹ࣮ͨ͠ +BWBʙͱ͍͏໊લ͕͍͍ͯΔ͕+BWBݴޠͱ·ͬ ͨ͘ແԑɺ࣌+BWB͕͞Ε͍ͯͨͷͰϚʔέο ςΟϯάతʹ͚ΒΕͨ 21
+4ͷྺ࢙ɿੜ
֤ࣾͷϒϥβʔͰ༷͕ҧͬͨΓɺόά͕ ଟ͘ɺظ͞Εͨ΄ͲʹΘΕͳ͔ͬͨɻ ओʹΞϥʔτͷදࣔɺΟϯυͷίϯτ ϩʔϧͳͲ؆୯ͳࣄʹΘΕ͍ͯͨɻ 22 +4ͷྺ࢙ɿ҉ࠇظ
͜Ζ͔Βɺ(NBJM(PPHMF.BQͷΑ͏ ʹɺ+BWB4DSJQUΛ͏ࣄͰ8FCΞϓϦͷ͍ উखΛඈ༂తʹߴΊͨΞϓϦ͕ొ͠ɺ࠶ +BWB4DSJQUʹ͕ू·ΔΑ͏ʹͳͬͨɻ "KBY +BWB4DSJQUҰਓલͷϓϩάϥϛϯάݴޠͱ͠ ͯͷҐΛཱ֬ͨ͠ 23 +4ͷྺ࢙ɿΧϜόοΫ
/PEFKTɿαʔόʔαΠυͷ+BWB4DSJQUڥ ඇಉظ*0 ߴ ඇৗʹߴ͍εέʔϥϏϦςΟʔ 24 +4ͷྺ࢙ɿݱࡏ େൃల
25 IUUQTXXXRVPSBDPN8IBUDPNQBOJFTBSFVTJOH/PEFKTJOQSPEVDUJPOΑΓ +4ͷྺ࢙ɿݱࡏ େൃల
41" 4JOHMF1BHF"QQMJDBUJPO ɿ6*ΛΫϥΠ ΞϯταΠυͷ+BWB4DSJQUͰશͯߦ͏ελΠϧ ͷ8FCΞϓϦ 3FBDU/BUJWFɿ+4 3FBDUKT ΛͬͨεϚϑΥ ΞϓϦ։ൃڥ &MFDUSPOɿ/PEFKT
$ISPOJVN $ISPNFͷΤ ϯδϯ Λ͍ϚϧνϓϥοτϑΥʔϜͳ(6*πʔ ϧΛ࡞ΕΔϕʔε 26 +4ͷྺ࢙ɿݱࡏ େൃల
&4 &4
&4 &4 +BWB4DSJQUͷ৽͍༷͠ &$."4DSJQU ͷ൛ ैདྷ&4ͱݺΕ͍ͯͨͷ ͪͳΈʹݱࡏͷ+4&4 Ϋϥεʑͷ৽͍͠จ๏͕ಋೖ͞Ε ॻ͖͕͢͞େ෯ʹ্ͨ͠ 28
&4 &4 ݱ࣌Ͱϒϥβʔͷαϙʔτશ Ͱͳ͍ ಛʹεϚϑΥͷϒϥβʔμϝ ݱࡏ&4͔Β&4ʹม͢Δπʔϧ ද#BCFM Ͱม͠ར༻͞Ε͍ͯΔ 29
IUUQTLBOHBYHJUIVCJPDPNQBUUBCMFFTΑΓ
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 &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 &4 &4 +BWB4DSJQU"MUFSOBUJWFT $P⒎F4DSJQU ͏Ε·͠ΐ͏ 5ZQF4DSJQU ܕ͕͖ͳํ͍·͠ΐ͏ 7JTVBM4UVEJP 8FC4UPSN
#BCFM ͳͲ͕ରԠ
41" 4JOHMF1BHF"QQMJDBUJPO
ݹ͖ྑ͖8FCΞϓϦ 34 controller model view HTML (css, image) request HTML
Server Browser
"KBYγϯϓϧ 35 controller model view HTML (css, image) request HTML
Server Browser JS request HTML
"KBYෳࡶ 36 controller model view HTML (css, image) request HTML
Server Browser JS request HTML state, data
41" 37 controller model request Server Browser JS controller model
view HTML css, image JSON iOS / Android request JSON $MJFOUTJEF.7$ͱݺΕΔࣄ͋Δ
41" ϝϦοτ αʔόʔͱ+4ͷॲཧͷΓ͚͕ ໌֬ Ԡͷૣ͍6*69ΛఏڙͰ͖Δ αʔόʔଆ͔ΒεϚϑΥͱಉ༷ ʹѻ͑Δ 38
41" σϝϦοτ ݕࡧΤϯδϯରࡦ͕ඞཁ ݹ͍ϒϥβʔαϙʔτग़དྷͳ͍ ։ൃऀͷֶशίετ͕૿͑Δ 39
40 ຖͷΑ͏ʹφΠͷϥΠϒϥ ϦʔɾϑϨʔϜ͕ొ͍ͯͨ͠ 41"༻ϥΠϒϥϦʔɾϑϨʔϜϫʔΫ
41"༻ϥΠϒϥϦʔɾϑϨʔϜϫʔΫ #BDLCPOFKT .$ͷϕʔεͷΈఏڙ 41
41"༻ϥΠϒϥϦʔɾϑϨʔϜϫʔΫ "OHVMBS+4 ϑϧελοΫ ํόΠϯσΟϯά Ұ࣌ظ41"ͷຊ໋ͱݴΘΕ͍ͯͨ όʔδϣϯ̎ඇޓ 42
41"༻ϥΠϒϥϦʔɾϑϨʔϜϫʔΫ &NCFSKT ϑϧελοΫ 3VCZPO3BJMTքͰ༗໊ 43
3FBDUKT
&:0⒏DF 3FBDUKT γϯϓϧͳϓϩάϥϛϯάϞσϧͱੑೳ Λཱ྆ ϝϯςφϯεੑ͕ߴ͍ίʔυ͕ॻ͚Δ 'BDFCPPL͕࣮ࡍʹ͍ͬͯΔ࣮ 45
&:0⒏DF 3FBDUKT γϯϓϧͳϓϩάϥϛϯάϞσϧͱੑೳΛ ཱ྆ K2VFSZϖʔδͷͲͷ෦ΛͲ͏มߋ͢Δ ͱ͍͏ϓϩάϥϜΛॻ͔ͳ͍ͱ͍͚ͳ͍ 3FBDUαʔόʔαΠυͷWJFXͷΑ͏ʹϓ ϩάϥϜϖʔδશମΛඳը͢ΔίʔυΛ ॻ͚ͩ͘ 46
&:0⒏DF 3FBDUKT 7JSUVBM%0. 3FBDUKTͷද͕ࣔߴԽͰ͖Δٕज़ ϝϞϦʔ্ʹͷมߋલޙͷ%0.Λ࣋ͪɺ มߋ͕͋ͬͨ෦Λݕग़͠ɺຊʹมߋ͕ ඞཁͳ෦ͷΈΛը໘ʹө͢Δ 47
3FBDUKT 48 IUUQUFSPQBJOGPCMPHDIBOHFBOEJUTEFUFDUJPOJOKBWBTDSJQUGSBNFXPSLTIUNM ΑΓ 7JSUVBM%0. ϒϥβʔ ը໘ +4 ϝϞϦʔ
&:0⒏DF 3FBDUKT ϝϯςφϯεੑ͕ߴ͍ίʔυ͕ॻ͚Δ ίϯϙʔωϯτࢦ +4ͷதʹ)5.-Λॻ͘+49Λ࠾༻ 49
3FBDUKT 50
3FBDUKT 51
52 3FBDUKT ??
3FBDUKTσϞ ίʔυɿIUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO
3FBDUKT ίϯϙʔωϯτ $PNQPOFOUΛܧঝͨ͠Ϋϥε ϑϧػೳ ؔ දࣔͷΈͷίϯϙʔωϯτ 54
3FBDUKTϕετϓϥΫςΟε 55 ίϯϙʔωϯτ ίϯϙʔωϯτࢠ ίϯϙʔωϯτଙ σʔλ QSPQT Πϕϯτ TUBUF
&:0⒏DF 3FBDUKT ҙɿSFBDUJWFQSPHSBNNJOHͱແ ؔ 56
͏K2VFSZཁΒͳ͘ͳΔͷ͔ʁ /0 ؆୯ͳศརػೳͷΑ͏ͳͷ K2VFSZͷΑ͏ͳͷ͕ศར 57 3FBDUKT
͏K2VFSZཁΒͳ͘ͳΔͷ͔ʁ ͋Δ෦Ͱ:FT 41"ͰࠓޙΘΕͳ͍ +4ͷ%0.ૢ࡞"1*ͷՃ $44Ξχϝʔγϣϯ &4 58 3FBDUKT
&:0⒏DF 3FBDUKT ใݯ ຊՈIUUQTGBDFCPPLHJUIVCJPSFBDU ͱͯྑ͍ʂ ωοτ্ʹຊޠ༁͋Δ͕ݹ͍ͷͰɺ֓೦ͷཧ ղʹ͍ɺͦͷޙຊՈΛ͏ +4FSJOGPIUUQKTFSJOGPBCPVU ࠷৽ͷ+4ใ ຊޠ
59
3FBDUKT༻ͷެ։ίϯϙʔωϯτ ॆ࣮ͭͭ͋͠Δ 60 3FBDUKT IUUQSFBDUDPNQPOFOUTDPN
ར༻্ͷҙ K2VFSZܥͷϥΠϒϥϦʔͱ૬ੑ ͕ྑ͘ͳ͍ࣄ͕ଟ͍ Ξχϝʔγϣϯ͕ۤख όʔδϣϯΞοϓͰ"1*͕มΘΔ ࣄ͕͋ΔˠςετΛॻ͜͏ʂ 61 3FBDUKT IUUQTGBDFCPPLHJUIVCJPSFBDUUJQTVTFSFBDUXJUIPUIFSMJCSBSJFTIUNM
ϑϩϯτΤϯυͰςετॏཁ 62 3FBDUKT
None
3FEVY 'MVY 3FBDUKTදࣔͷΈͷϥΠϒϥϦʔ ͳΒ.PEFM$POUSPMMFSʁ 64
'MVY .7$εέʔϧ͠ͳ͍ɻͳΒ'MVYͩ CZ'BDFCPPL 65 IUUQTXXXJOGPRDPNOFXTGBDFCPPLNWDqVYΑΓ
66 'MVY IUUQTHJUIVCDPNGBDFCPPLqVYΑΓ ྲྀΕ͕Ұํ
͔͠͠'BDFCPPL શͳ'MVY࣮ΛϦϦʔ ε͠ͳ͔ͬͨ 67 'MVY IUUQTHJUIVCDPNLSJBTPGUSFBDUTUBSUFSLJUJTTVFT ΑΓ
3FEVY 1SFEJDUBCMFTUBUFDPOUBJOFSGPS +BWB4DSJQUBQQT 5ISFF1SJODJQMFT 4JOHMFTPVSDFPGUSVUI 4UBUFJTSFBEPOMZ .VUBUJPOTBSFXSJUUFOBTQVSF GVODUJPOT 68
3FEVY 'MVYͷ࣮Ͱͳ͍ 'MVYʹΠϯεύΠΞ͞Ε͍ͯΔ ࠓͷͱ͜Ζϙϐϡϥʔͳ'MVYܥϑϨʔ ϜϫʔΫ 3FBDUKTઐ༻Ͱͳ͍ 69
3FEVY 70 Actions ActionCreators Store View React.js Reduces state (data)
event, … dispatch update stateΘͳ͍
3FEVY 71
3FEVYͷίʔυ ίʔυɿIUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO CSBODISFEVY
3FEVY "DUJPOT"DUJPO$SFBUPS 3FEVDFST "DUJPOΛड͚ͯ࣍ͷঢ়ଶΛฦ͢ 4UPSF TUBUFঢ়ଶͷอ࣋ 73
3FEVY $POOFDU 3FBDUͱͷͭͳ͗ TUBUFΛQSPQTͰ͢ "DUJPO EJTQBUDI ΛQSPQTͰ͢ .JEEMFXBSF SFEVYͷ֦ு"1*௨৴ɺϩάɾɾɾ 74
3FEVYσΟϨΫτϦʔ BDUJPOTBDUJPO BDUJPO$SFBUPS DPNQPOFOUT3FBDUίϯϙʔωϯτ DPOUBJOFST3FEVYʹܨ͕Δίϯϙʔ ωϯτ SFEVDFSTSFEVDFS TUPSFTUPSF NJEEMFXBSFఆٛ 75
3FEVYࢲݟ ྑ͍ 3FBDU͔Β.PEFM$POUSPMMFSཁૉ͕ͳ ͘ͳΔ ॻ͖ํ͕౷Ұ͞ΕΔͷͰɺେنɾେ ਓͷ։ൃ͖ʁ ίϯύΫτͳ࡞Γ 3FBDUͱૄ݁߹ 76
3FEVYࢲݟ ෆຬͳ ΊΜͲ͏ "1*ݺͼग़͕͠εϚʔτͰͳ͍ ຊʹܾఆଧ͔ʁ 77
Ϟμϯ+4։ൃڥ
Ϟμϯ+4։ൃڥ 79
Ϟμϯ+4։ൃڥ DTT KTΛҰͭͷϑΝΠϧʹ·ͱΊͨ Γɺѹॖͨ͠Γ &4 5ZQF4DSJQUΛ&4ʹม͢Δ 4BTTΛ$44ʹม͢Δ +BWB4DSJQUʹϞδϡʔϧΛఏڙ /PEFKTͷϥΠϒϥϦʔΛ8FCͰ͑ ΔΑ͏ʹ͢Δ
80
Ϟμϯ+4։ൃڥ ͨ͘͞Μ͋Γ͗͢ɺԿΛ͑ྑ͍ ͷ͔͔Βͳ͍ʁʁ φͳπʔϧ͕සൟʹมΘΔʂ ಥવͷ։ൃఀ?? 81
มɹɹɹɹ ౷߹։ൃπʔϧ ϥΠϒϥϦʔ λεΫཧ Ϟμϯ+4։ൃڥ 82 ݴޠ ݄ݱࡏ νΣοΫ
OPEFKT (PPHMFͷ։ൃͨ͠ߴ+BWB4DSJQUΤ ϯδϯ7Λ֩ʹ࡞ΒΕͨ+4ίϚϯυ ϚϧνϓϥοτϑΥʔϜ ඇಉظ*0 +4πʔϧɺ+4Ͱॻ͔Ε͍ͯͯ OPEFKTͰಈ͘ 83
OQN OPEFKT༻ϥΠϒϥϦʔཧπʔϧ OPEFKT༻ϥΠϒϥϦʔͷϦϙδτ Ϧʔ ґଘϥΠϒϥϦʔͷόʔδϣϯͷௐ ఀΛߦͬͯ͘ΕΔ ͦͷଞɾɾɾ 84
OQN 85 http://www.modulecounts.com ʙ
8FCQBDL ݱࡏ ݄ ྲྀߦͷ։ൃπʔϧ ֤ॲཧMPBEFSͱݺΕΔϞδϡʔ ϧ͕ߦ͏ ϑΝΠϧͷґଘؔɺ࡞ۀΛهड़ Ұൠతͳ࡞ۀ؆୯ʹͰ͖Δ .BD 8JOEPXT
-JOVYΛαϙʔτ 86
&4-JOU +4 &4 &4 ͷจ๏νΣοΫ πʔϧ ಈ࡞ͤ͞Δલʹɺจ๏Τϥʔɺະఆٛ ͳͲ͕Γɺ։ൃͷੜ࢈ੑ͕͕͋Δ +4Λ͏ʹ΄΅ඞਢͳπʔϧ ಠࣗνΣοΫϧʔϧͷՃ༰қ
87
σϞͷ։ൃڥͷߏஙखॱ 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 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
8FCҎ֎Ͱͷ +BWB4DSJQUར༻
3FBDU/BUJWF +4 3FBDUͰεϚϑΥΞϓϦΛߏங ͢ΔͨΊͷϑϨʔϜϫʔΫ J04 "OESPJEʜରԠ σόΠε (14 Χϝϥʜ ར༻Ͱ͖Δ
IUNMͷເΑ͏Ұʁ 91
92 3FBDU/BUJWF ίʔυɿIUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO CSBODISFBDUOBUJWF σϞ
&MFDUSPO ϚϧνϓϥοτϑΥʔϜͷ(6*ΞϓϦΛ ࡞ΔͨΊͷϑϨʔϜϫʔΫ 8JOEPXT .BD -JOVY /PEFKT $ISPNJVNϕʔε ͱͱ"UPNΤσΟλʔͷҰ෦ͩͬͨ ࣮ࡍʹΘΕ͍ͯΔ
93
94 &MFDUSPO
95 &MFDUSPO ίʔυɿIUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO CSBODIFMFDUSPO σϞ
3FBDUKT͍͍Ͷʂ ͬͱ+BWB4DSJQUͷࣄΛΖ͏Α 96 ·ͱΊ ίʔυɿIUUQTHJUIVCDPNZVVNJSFBDU@KZBOLFO
͓Βͤ &:0⒏DFۙʑ3FBDUKTͷ ڭҭΛ։࢝͠·͢ʂ 97
2"