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
380
NPX-shell-hacking
kamataryo
0
48
frontend-shikoku#1
kamataryo
1
700
Introducing of Map Warper
kamataryo
0
1.3k
wp-rest-api-and-amazon-polly
kamataryo
0
960
how-to-deploy-from-travis-ci
kamataryo
1
780
IoT with React
kamataryo
1
280
wakayamarb#37
kamataryo
1
92
Why have I preferred open source after leaving a public office?
kamataryo
1
5.9k
Other Decks in Technology
See All in Technology
時間がないなら、つくればいい 〜数十人規模のチームが自律性を発揮するために試しているいくつかのこと〜
kakehashi
PRO
21
4.4k
問 1:以下のコンパイラを証明せよ(予告編) #kernelvm / Kernel VM Study Kansai 11th
ytaka23
2
320
Twelve-Factor-Appから学ぶECS設計プラクティス/ECS practice for Twelve-Factor-App
ozawa
3
160
DynamoDB のデータを QuickSight で可視化する際につまづいたこと/stumbling-blocks-when-visualising-dynamodb-with-quicksight
emiki
0
130
Oracle Cloud Infrastructure:2025年4月度サービス・アップデート
oracle4engineer
PRO
0
380
ビジネスとデザインとエンジニアリングを繋ぐために 一人のエンジニアは何ができるか / What can a single engineer do to connect business, design, and engineering?
kaminashi
2
880
AIによるコードレビューで開発体験を向上させよう!
moongift
PRO
0
400
非root化Androidスマホでも動く仮想マシンアプリを試してみた
arkw
0
110
更新系と状態
uhyo
8
2.2k
MCPが変えるAIとの協働
knishioka
1
140
AIと共に乗り越える、 入社後2ヶ月の苦労と学習の軌跡
sai_kaneko
1
200
2025-04-24 "Manga AI Understanding & Localization" Furukawa Arata (CyberAgent, Inc)
ornew
2
340
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.7k
The Language of Interfaces
destraynor
158
25k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
How to Ace a Technical Interview
jacobian
276
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Build your cross-platform service in a week with App Engine
jlugia
230
18k
Agile that works and the tools we love
rasmusluckow
329
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
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