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
新規Railsアプリに小さく導入するReact
Search
Takaya Deguchi
September 05, 2016
Technology
48
18k
新規Railsアプリに小さく導入するReact
dotsで開催されたReactの導入を検討されてる方向けの勉強会でお話しました
https://eventdots.jp/event/597088
Takaya Deguchi
September 05, 2016
Tweet
Share
More Decks by Takaya Deguchi
See All by Takaya Deguchi
Figmaでデザインを"ひらく" / Design for Everyone by Figma
dex1t
1
1.2k
キャリアの分岐点 / the intersection of my carrier
dex1t
3
220
コードを書きながらデザインする意味と効果 / The intersection of design & engineering
dex1t
7
2.4k
Cookpad Summer Internship 2018, 5 days Product Course
dex1t
3
7.2k
Machine Learning for Rapid Prototyping #CIIDSummerSchool
dex1t
8
4.8k
2018 Cookpad Spring Internship Service Develoment Course
dex1t
3
3.3k
体験を売るためのサービスづくり
dex1t
3
750
ユーザーと向き合いながらつくるSaaS #service_dev
dex1t
3
9.5k
Kibela meets Stripe - Stripeを使って新規SaaSを立ち上げた話 #JP_Stripes
dex1t
12
4.6k
Other Decks in Technology
See All in Technology
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
複雑なState管理からの脱却
sansantech
PRO
1
150
Platform Engineering for Software Developers and Architects
syntasso
1
520
社内で最大の技術的負債のリファクタリングに取り組んだお話し
kidooonn
1
550
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
460
信頼性に挑む中で拡張できる・得られる1人のスキルセットとは?
ken5scal
2
530
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
130
RubyのWebアプリケーションを50倍速くする方法 / How to Make a Ruby Web Application 50 Times Faster
hogelog
3
940
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
310
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.8k
SREによる隣接領域への越境とその先の信頼性
shonansurvivors
2
520
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Agile that works and the tools we love
rasmusluckow
327
21k
Docker and Python
trallard
40
3.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
A Tale of Four Properties
chriscoyier
156
23k
Teambox: Starting and Learning
jrom
133
8.8k
Embracing the Ebb and Flow
colly
84
4.5k
The Invisible Side of Design
smashingmag
298
50k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Building Applications with DynamoDB
mza
90
6.1k
The Language of Interfaces
destraynor
154
24k
Transcript
倜鋉3BJMT،فٔח㼭ֻׁ㼪Ⰵׅ EPUT3FBDU⹈䓼⠓ React !EFYU#JU+PVSOFZ *OD
כׄת׃ג ⳿〡顜⛲ UX Engineer / Product Manager 吳䒭⠓爡ؽحزآٍ٦ص٦ (@dex1t) 俱椚؝ىُصذ؍
爡ⰻ䞔㜠Ⱏ剣خ٦ٕ,JCFMB _ _ فٗتؙزوطآًٝزװِ٦ؠ٦⡤꿀ך鏣鎘ָ⚺ז䕵ⶴկ ؎ٝؿַٓؿٗٝزؒٝسתד䗳銲ח䘔ׄג⡦דװתׅկ
荈爡؟٦ؽأ✲噟 䪮遭곁㉏噟 䪮遭欰ַ׃穈籼בֻ 佄䴂׃גְתׅ 8FˏSFIJSJOH IUUQTCJUKPVSOFZDPN
荈爡؟٦ؽأ✲噟 䪮遭곁㉏噟 䪮遭欰ַ׃穈籼בֻ 佄䴂׃גְתׅ ⯋$爡䪮遭鿇ꞿ $爡倜⼼劍欰 ⯋$爡ꟼ鸬⠓爡 ⯋$爡涪㛇湍 ⯋$爡رؠ؎ش٦
8FˏSFIJSJOH IUUQTCJUKPVSOFZDPN
⯓剢ذ؍ؠ٦؟؎زⰕ׃ת׃ IUUQTLJCFMB
,JCFMBה3FBDU 'FFEװ5SFF6*ծ&EJUPSזו㼭⚥鋉垷ך3FBDU$PNQPOFOUך꧊さ⡤
,JCFMBך䪮遭أةحؙ ˖ 3BJMT3FBDUך䎃㢙ך㹀殢䠬֮圓䧭 ˖ &4 #BCFM 8FCQBDL OQN ˖ ꬊ41"
4JOHMF1BHF"QQMJDBUJPO ךסאֲך3BJMT،فٔ ˖ K2VFSZ欽岀欽ꆀ㸚ג⢘欽
ֶַֿ鑧ֿׅה ˖ 倜鋉فٗتؙزך甧♳־ה䎂遤׃גծ3FBDU וך״ֲח㼪Ⰵ׃גְַ ˖ 剑ⴱַ㸣樴湡䭷ׁזְ ˖ 饥זָ䖚ղח葺ֻׅ
黈ֿה䎃㢙˘
䎃㢙 ˖ ,JCFMBך涪ָ劤呓⻉ ˖ 䔲儗ծؒٝآص،כせ 荈ⴓה爡ꞿ ˖ 3BJMTךאְדח$PFF4DSJQU剅ֻ玎䏝ך穗꿀⦼ ؿٗٝزؒٝس✲䞔ח毙ַ
˖ ؟٦ؽأ涸חؒر؍ةך⡲鴥כ䗳荚 ˖ 3FBDU㼪Ⰵך堣麊넝ת
3BJMT8BZWT.PEFSO+48BZ SBJMTBTTFUT 4QSPDLFUT SBLF (VMQ #PXFS XFCQBDL
鼅䫛肇ֺׅ֮鳞ְ㉏겗 SBJMTBTTFUT 4QSPDLFUT SBLF (VMQ #PXFS XFCQBDL
1IBTFת׆כ3FBDU⢪ְ㨣
1IBTFך湡涸 ˖ ⡦כה֮3FBDU⢪ג ˖ ٌتٝ+4涸זكأزז圓䧭כ湡䭷ׁזְ ˖ הִ֮׆⢪ֲֽ
ֿֿדװֿה ˖ SFBDUSBJMT㼪Ⰵׅ ˖ 3BJMT،فٔד3FBDU⢪ֲֽז馄ֶ䩛鯪 ˖ SFBDU@VKTָ㖑ח⤑ⵃ ˖ &4כת⢪זְ׃ծٓ؎ـٓٔ盖椚#VOEMFS ˖
3FBDUDSFBUF$MBTTךⵃ欽 3FBDU涸חכꬊ䱿㤺ך崧 var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> Hello, world! </div> ); } });
1IBTFך穠卓 ˖ 3FBDUװגְֲֽז孡ָׅ ˖ 爡ⰻד㉔褏׃ծⰅ3FBDU铣 ˖ 如ך妜実ָ欰ת ˖ չSBJMTBTTFUT䰍גְպչ&4אְְַպ
1IBTF.PEFSO+4PO3BJMT
1IBTFך湡涸 ˖ 3BJMT8BZ ⚺ח4QSPDLFUT ח⛦תתٌتٝ+4圓䧭ח 鵚בֽ ˖ OQNח״ٓ؎ـٓٔ盖椚 ˖ &4ךⵃ欽
˖ &4.PEVMFT JNQPSUFYQPSU ח״⣛㶷鍑寸
ֿֿדװֿה ˖ CSPXTFSJGZSBJMT㼪Ⰵ ˖ TQSPDLFUTךفؚٓ؎ٝזךד㼪Ⰵָ䩛鯪 ˖ SBJMTTFSWFS⟃㢩ךفٗإأ饯⹛ָ♶銲 ˖ ؽٕسח儗ַַָرًٔحزכ鏩㺁 ˖
#BCFM #BCFMJGZ ך㼪Ⰵ ˖ ؿٗٝزؒٝسךٓ؎ـٓٔ盖椚כCVOEMFSַ OQNח㸣Ⰻ獳遤
1IBTFך穠卓 ˖ 3FBDUؒ؝ءأذيך䛷䜋ָ「ֽ ˖ 傀㶷ך3FBDU$PNQPOFOU崞欽׃גفٗتؙز 涪ךأؾ٦س،حف ˖ .PEBM 5PPMUJQ 5PBTU
1BHJOBUJPOזו״ֻ֮ 6*ػة٦ٝכ$PNQPOFOUָⰕׁגְ ˖ IUUQTKTDPBDISFBDU
1IBTF駈㜥㔿
1IBTFך湡涸 ˖ ث٦يח3FBDUָ嵴鷲׃גֹךד駈⚛䲧ִ ˖ ֿךة؎ىؚٝדث٦يًٝغ٦㟓ִ㨣
ֿֿדװֿה ˖ &4-JOU㼪Ⰵ ˖ أة؎ٕ窟♧הְֲ״&4ך嵴鷲湡涸 ˖ FTMJOUQMVHJOSFBDU ˖ 1SPQ5ZQFTך鎸鶢䗳갭ח ˖
㹀劍涸ז荈⹛OQNVQEBUF ˖ 剑鵚ך3FBDUכ 鹈ח♧䏝و؎ش٦ٔٔ٦أ
<⡭锑>CJUKPVSOFZDJOQNVQEBUF ˖ !HGY⡲ ˖ 荈⹛דOQNVQEBUF׃גفؙٕٔؒأز鷏 ˖ OQNTISJOLXSBQ㼎䘔 ˖ DSPOד$JSDMF$*ך/JHIUMZ#VJMET㹀劍㹋遤 ˖
➭ך$*؟٦ؽأד㼎䘔〳腉
1IBTFך穠卓 ˖ ث٦يⰋ㆞ָ3FBDU剅ֹכׄ ˖ رؠ؎ش٦3FBDU剅ֻ ˖ فٗتؙز涪ָ鹌חאծכׄכ㼭ַׁ 3FBDU$PNQPOFOUָ肪גֻ ˖ غ؛خٖٔ٦ח气כׄ
غ؛خٖٔ٦气 ˖ 4UBUFכ鋵ָ♧⯋盖椚ׅךָ⾱ ˖ 4UBUFָ$PNQPOFOUⰻח㸣Ⰻחꟗׄ㜥さכ㶨ָ䭯א ֿה ⢽%SPQEPXO6*ךꟗ ˖ 鋵כ4UBUFה)BOEMFS1SPQTה׃ג㶨ח床׃ծ㶨כ
⢪ֲ ˖ $PNQPOFOUָ㣐ֹֻזהך「ֽ床׃ָ醱꧟⻉ 鋵 㶨 㷝 props props event handlerͰevent͠stateΛߋ৽ state
1IBTF㼭ֻׁ'MVY׃ג
1IBTFך湡涸 ˖ غ؛خٖٔ٦气鯪幾ׅ ˖ SFEVYכ⢪זְ ˖ ꬊ41"חכװ麓ֺז䠬ׄ ˖ $PNQPOFOUָ״㣐ֹֻזגֹת 罋ִ
ֿֿדװֿה ˖ IPLBDDIBSFBDUNJDSPDPOUBJOFSך㼪Ⰵ ˖ DPOUBJOFS 鋵 ח醱꧟ׁ㺔ׇ ˖ 㶨כEJTQBUDI鸐׃גFWFOU⠗乄 ˖
IUUQRJJUBDPNIPLBDDIBJUFNT FD 鋵 㶨 㷝 props props event dispatch state
1IBTFך穠卓 ˖ 醱꧟⻉׃גְ♧鿇$PNQPFOUך㹋鄲ַָזأح ؗٔ׃ ˖ ➙䏝כؽٕس儗ָ孡חזכׄ ˖ 涪橆㞮ד#SPXTFSJGZךٍؗحءָُ⸬ַזְ朐 䡾ה_猱ך䖉ָ涪欰׃גְ
1IBTFؽٕس儗ך瀉簭
1IBTFך湡涸 ˖ 涪橆㞮דךؽٕس儗瀉簭ׅ ˖ 3BJMT8BZ㢩ֿהכ鏩㺁ׅ ˖ 4QSPDLFUTח劍䖉׃אא
ֿֿדװֿה ˖ CSPXTFSJGZSBJMTַXFCQBDLSBJMTח獳遤 ˖ KTך؝٦سBQQBTTFUTKBWBTDSJQUַ DMJFOUח獳⹛׃TQSPDLFUT鸐ׁזְ ˖ EFWFMPQNFOUדכXFCQBDLEFWTFSWFS饯⹛ ˖ QSPEVDUJPOדכؽٕس䖓חEJHFTU➰♷
1IBTFך穠卓 ˖ 涪橆㞮דךؽٕسָ旗鸞ח ˖ ؽٕس䖉ךח5XJUUFS鋅זֻג幥 ˖ 如ך铬겗 ˖ 6OJU5FTU橆㞮 ˖
KTךؿ؋؎ٕ؟؎ؤ肍㣐⻉
תה
תה ˖ 1IBTF_1IBTFתדְְ٠剢玎䏝 ˖ أة٦ز،حفכفٗتؙز涪ָ⮚⯓חזָ ˖ 㼭ֻׁכׄגծ饥זָكأزח鵚בֽ 8FˏSFIJSJOH IUUQTCJUKPVSOFZDPN