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
wacker#17-wreact
Search
KamataRyo
July 16, 2017
Technology
0
130
wacker#17-wreact
和歌山のエンジニアコミュニティ Wackerの勉強会で使用したスライドです。
KamataRyo
July 16, 2017
Tweet
Share
More Decks by KamataRyo
See All by KamataRyo
TileCloud の開発を支える技術
kamataryo
2
340
NPX-shell-hacking
kamataryo
0
38
frontend-shikoku#1
kamataryo
1
660
Introducing of Map Warper
kamataryo
0
1.3k
wp-rest-api-and-amazon-polly
kamataryo
0
890
how-to-deploy-from-travis-ci
kamataryo
1
730
IoT with React
kamataryo
1
270
wakayamarb#37
kamataryo
1
85
Why have I preferred open source after leaving a public office?
kamataryo
1
5.8k
Other Decks in Technology
See All in Technology
RAGの性能を評価しよう
kurahara
1
300
AI時代のアジャイル開発(XP祭り2024版) / Agile Development in the AI Era in XPJUG
takaking22
13
3.5k
Hazard pointers with reference counter
ennael
PRO
0
110
UE5の雑多なテク
ryuichikawano
0
130
テストコードの品質を客観的な数値で担保しよう〜Mutation Testのすすめ〜
ysknsid25
9
2.7k
小さな勉強会の始め方、広げ方、あるいは友達の作り方 / How to Start, Grow, and Build Connections with Small Study Groups
ar_tama
4
2k
Efficient zero-copy networking using io_uring
ennael
PRO
0
310
リスクから学ぶKubernetesコンテナセキュリティ/k8s-risk-and-security
mochizuki875
1
290
これはPerl? それともRuby? クイズ〜〜〜〜〜!!!- Perl or Ruby Quiz
moznion
1
940
【shownet.conf_】トポロジ図の歩き方
shownet
PRO
0
430
Develop to Survive - YAPC::Hakodate 2024 Keynote
moznion
4
720
Causal Impactを用いたLINE Pay UIの効果検証とABテスト実施への貢献
lycorptech_jp
PRO
3
530
Featured
See All Featured
Faster Mobile Websites
deanohume
304
30k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Code Reviewing Like a Champion
maltzj
519
39k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Why Our Code Smells
bkeepers
PRO
334
57k
Documentation Writing (for coders)
carmenintech
65
4.3k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Thoughts on Productivity
jonyablonski
67
4.2k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Mobile First: as difficult as doing things right
swwweet
222
8.8k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Transcript
8BDLFSͭ·Έ͙͍3FBDU
8FC$PNQPOFOUT ᓺ)5.- IFBEFS VMSPMFtOBWJHBUJPODMBTTOBWJHBUJPO MJBISFGϯϸδBMJ MJBISFGϯϸδBMJ MJBISFGϯϸδBMJ VM IFBEFS NBJO
EJWDMBTTBSUJDMF IτΩύϰI EJWθϸϋϸωEJW EJW EJWDMBTTBSUJDMF IτΩύϰI EJWθϸϋϸωEJW EJW NBJO θϸϢ⑲ϒϸύΛͩ͟ᆚ IFBEFS /BWJHBUJPO IFBEFS NBJO "SUJDMF "SUJDMF NBJO ಠࣗλάʹΑΔཁૉͷΧϓηϧԽ ࠶ར༻ੑɾϞδϡʔϧੑͳͲͷ؍͔Βخ͍͠ΑͶ
ϑϨʔϜϫʔΫ React Angular IUUQTBOHVMBSJP IUUQTGBDFCPPLHJUIVCJPSFBDU IUUQSJPUKTDPN Riot IUUQTKQWVFKTPSH Vue.js
3FBDU$PNQPOFOU JNQPSU3FBDUGSPNSFBDU JNQPSU\SFOEFS^GSPNSFBDUEPN )FMMP$PNQPOFOU DMBTT)FMMPFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ SFUVSO EJWDMBTT/BNFIFMMP
Q\)FMMP UIJTQSPQTOBNF^Q EJW ^ ^ (0 SFOEFS )FMMPOBNFXBDLFS EPDVNFOUHFU&MFNFOU#Z*E BQQ ৭ʑॻ͖ํ͋Δ͕ɺ+49ͱ&$."4DSJQUͰهड़͢Δ͜ͱ͕Ұൠత τϥϯεύΠϧ͕ඞཁ ίϯϙʔωϯτࢦͷԸܙΛड͚ΔͨΊͷϞδϡʔϧ JNQPSUɾFYQPSU ϞδϡʔϧͷόϯυϦϯά͕ඞཁ
ϞδϡʔϧόϯυϦϯάɾτϥϯεύΠϧ อकੑΛอͪͭͭɺϒϥβ࣮ͱͷޓੑΛ֬อ͢Δɹ JavaScript (ES6 source) React Component (ES6 source, JSX)
JavaScript (ES6 module) JavaScript (CommonJS module) JavaScript (ES5 distribution) Bundler (webpackBrowserify) Transpiler (Babel)
3FBDUͷڊେͳγεςϜֶͿ͖ʁ &$."4DSJQU +49 τϥϯεύΠϥ Ϟδϡʔϧόϯυϥ 3FEVY 3FBDU3PVUFS #BCFM XFCQBDL 5ZQF4DSJQU
549 ʜ &O[ZNF +FTU TUPSZCPPL 3FBDU"1*
3FBDUͷڊେͳγεςϜֶͿ͖ʁ ޙʹԿ͕Ͳ͏มΘ͍ͬͯΔ͔༧Ͱ͖ͳ͍ɻ ͭ·Έ͙͍͓ͯ͘͜͠ͱɺগͳ͘ͱྑͦ͞͏ɻ
ϋϯζΦϯ IUUQTHJUIVCDPNXBLBZBNBIBDLFSXSFBDU WReact — Easy React Template HJUDMPOFHJU!HJUIVCDPNXBLBZBNBIBDLFSXSFBDUHJU DEXSFBDU OQNJOTUBMM
OQNTUBSU PQFOMPDBMIPTU IUUQTHJUIVCDPNXBLBZBNBIBDLFSXSFBDU
3FBDU$PNQPOFOUͷ࡞ ͭͷํ๏ΫϥεએݴɺQVSFSFOEFSGVODUJPO ᐙঢ়ᴋ TUBUF ΤᬤͶͥͺ͟͞Ν DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ SFUVSO
Q)FMMPQ ^ ^ ᐙঢ়ᴋ TUBUF ΤᬤͶͥͺ͟͞ͼ͖gQSPQTΤ᳃͝ΛᗀͣᲔΝͲͣ DPOTU&YBNQMF QSPQT \ SFUVSO Q)FMMP1 ^
+49 DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ SFUVSO EJWDMBTT/BNFIFMMP Q\)FMMP UIJTQSPQTOBNF^Q VM
\UIJTQSPQTMJTUTNBQ MJTU\ SFUVSO MJLFZ\MJTUJE^\MJTUWBMVF^MJ ^ ^ VM EJW ^ ^ )5.-λάΛهड़Ͱ͖Δ+BWB4DSJQU֦ு λάͷ෦Ͱ\^Λ͏ͱ+49ࣜΛೖΕࢠͰهड़Ͱ͖Δ DMBTTଐੑɺGPSଐੑͳͲɺ+BWB4DSJQUͷ༧ޠʹ͋Δଐੑ໊͕͑ͳ͘ͳΔ DMBTTDMBTT/BNFɺGPSIUNM'PS
4UBUF ෦ঢ়ଶ Λར༻͢Δ DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\ DPOTUSVDUPS QSPQT \ TVQFS QSPQT
UIJTTUBUF\ ᰮঢ়ᴋ ^ ^ SFOEFS \ DPOTUTFMGUIJT SFUVSO CVUUPOPO$MJDL\ TFMGTFU4UBUF \ ᙮͖ͩঢ়ᴋ ^ ^δϯψδCVUUPO ^ ^ ίϯετϥΫλͰॳظঢ়ଶUIJTTUBUFΛΦϒδΣΫτͱͯ͠ఆٛ ʢΦʔόʔϥΠυ͢Δͱ͖ʹඞͣϕʔεΫϥεͷίϯετϥΫλ TVQFS ΛݺͿʣ ΠϕϯτϋϯυϥͰTFU4UBUFؔΛͬͯ෦ঢ়ଶΛߋ৽͢Δ σʔλͷยํόΠϯσΟϯά TFU4UBUFSFOEFS<ػ><JOUFSBDUJPO>TFU4UBUF
1SPQTΛར༻͢Δ DMBTT$IJMEFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ DPOTUOBNFUIJTQSPQTOBNF SFUVSO Q*BN\OBNF^Q
^ ^ DPOTU1BSFOU QSPQT \ SFUVSO EJW$IJMEOBNF\GPP^EJW ^ ίϯϙʔωϯτͰΤϨϝϯτͷଐੑͱͯ͠هड़ GPPlCBS ࢠͷίϯϙʔωϯτͰɺUIJTQSPQTܦ༝ͰΞΫηε
*NNVUBCJMJUZ DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\ DPOTUSVDUPS QSPQT \ TVQFS QSPQT UIJTTUBUF\
ᰮঢ়ᴋ ^ ^ SFOEFS \ DPOTUTFMGUIJT SFUVSO CVUUPOPO$MJDL\ TFMGTUBUF\ ᙮͖ͩঢ়ᴋ ^^δϯψδCVUUPO ^ ^ UIJTTUBUFΛߋ৽͢ΔͱյΕ·͢ɻԿ͕ى͖Δ͔͔Γ·ͤΜ UIJTTUBUFMJTUTQMJDF /( ഁյతͳϝιου͕͑ͳ͍ 0CKFDUBTTJHOͳͲΛ׆༻ͯ͠JNNVUBCJMJUZ ෆมੑ ʹྀ͢Δ NG!
εϥΠυͰ৮Ε͍ͯͳ͍τϐοΫ XFCQBDLDPOpHKTͷઃఆ #BCFMͷઃఆ ϑΥʔϜΛ͏ ֤छͷϥΠϑαΠΫϧϝιου͕͋Γ·͢ ίϯϙʔωϯτͷNPVOUɺSFOEFSɺQSPQTͷड͚औΓͳͲͷλΠϛϯάʹϑοΫ ͯ͠ҙͷॲཧΛ࣮ߦͰ͖·͢ QSPQTͷࢠ͕ͭ͠Β͍3FEVY ΫϥΠΞϯταΠυϧʔςΟϯά3FBDU3PVUFS ݎ࿚ʹ࡞Γ͍ͨ߹5ZQF4DSJQUͰίϯϙʔωϯτΛهड़͢Δ
ίϯϙʔωϯτͷϢχοτςετ&O[ZNF FUD
ँࣙ 8BDLFSͭ·Έ͙͍3FBDUͷ։࠵ʹ͋ͨΓɺਖ਼ใαʔϏε༷ʹձΛ ఏڙ͍͖ͨͩ·ͨ͠ɻޚྱਃ্͛͠·͢ɻ 'BDFCPPLϖʔδ IUUQTXXXGBDFCPPLDPN4FJXB+PIP ΣϒαΠτ IUUQXXXTFJXBKPIPDPKQ