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
140
wacker#17-wreact
和歌山のエンジニアコミュニティ Wackerの勉強会で使用したスライドです。
KamataRyo
July 16, 2017
Tweet
Share
More Decks by KamataRyo
See All by KamataRyo
TileCloud の開発を支える技術
kamataryo
2
390
NPX-shell-hacking
kamataryo
0
51
frontend-shikoku#1
kamataryo
1
710
Introducing of Map Warper
kamataryo
0
1.4k
wp-rest-api-and-amazon-polly
kamataryo
0
980
how-to-deploy-from-travis-ci
kamataryo
1
800
IoT with React
kamataryo
1
280
wakayamarb#37
kamataryo
1
96
Why have I preferred open source after leaving a public office?
kamataryo
1
6k
Other Decks in Technology
See All in Technology
Figma Dev Mode MCP Serverを用いたUI開発
zoothezoo
0
230
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
270
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
240
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
750
セキュアなAI活用のためのLiteLLMの可能性
tk3fftk
1
330
Autify Company Deck
autifyhq
2
44k
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
160
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
270
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Git: the NoSQL Database
bkeepers
PRO
430
65k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
A Modern Web Designer's Workflow
chriscoyier
695
190k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing Experiences People Love
moore
142
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
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