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
120
wacker#17-wreact
和歌山のエンジニアコミュニティ Wackerの勉強会で使用したスライドです。
KamataRyo
July 16, 2017
Tweet
Share
More Decks by KamataRyo
See All by KamataRyo
TileCloud の開発を支える技術
kamataryo
2
330
NPX-shell-hacking
kamataryo
0
38
frontend-shikoku#1
kamataryo
1
640
Introducing of Map Warper
kamataryo
0
1.2k
wp-rest-api-and-amazon-polly
kamataryo
0
860
how-to-deploy-from-travis-ci
kamataryo
1
710
IoT with React
kamataryo
1
270
wakayamarb#37
kamataryo
1
80
Why have I preferred open source after leaving a public office?
kamataryo
1
5.8k
Other Decks in Technology
See All in Technology
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
380
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
130
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
Classmethod Odyssey 登壇資料
yamahiro
0
390
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
VPoEの視点から見た、ヘンリーがサーバーサイドKotlinを使う理由 / Why Server-side Kotlin 2024
cho0o0
1
420
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
750
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Music & Morning Musume
bryan
43
5.9k
How STYLIGHT went responsive
nonsquared
93
5k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
4 Signs Your Business is Dying
shpigford
178
21k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Infographics Made Easy
chrislema
238
18k
Building an army of robots
kneath
301
42k
Become a Pro
speakerdeck
PRO
15
4.8k
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