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
830
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
520
iOS 開発者のためのバックエンド入門 (2)
yuumi3
1
4.1k
iOS 開発者のためのバックエンド入門 (1)
yuumi3
15
8.7k
LoopBackに付いて少し
yuumi3
0
1.7k
Ruby開発者を増やすための教育について (8年間のRuby教育で得た知見)
yuumi3
7
4k
クラウドxスマフォ時代のRuby on Rails入門
yuumi3
2
240
真のWebプログラマー向け RubyMotion フレームワーク
yuumi3
4
1.5k
CLandMK
yuumi3
1
130
Other Decks in Technology
See All in Technology
S3アクセス制御の設計ポイント
tommy0124
3
200
AI時代を生き抜くエンジニアキャリアの築き方 (AI-Native 時代、エンジニアという道は 「最大の挑戦の場」となる) / Building an Engineering Career to Thrive in the Age of AI (In the AI-Native Era, the Path of Engineering Becomes the Ultimate Arena of Challenge)
jeongjaesoon
0
190
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
430
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
300
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
230
Modern Linux
oracle4engineer
PRO
0
100
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
190
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
180
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Bash Introduction
62gerente
615
210k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
GitHub's CSS Performance
jonrohan
1032
460k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
GraphQLとの向き合い方2022年版
quramy
49
14k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Six Lessons from altMBA
skipperchong
28
4k
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"