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.3k
キャリアの分岐点 / the intersection of my carrier
dex1t
3
260
コードを書きながらデザインする意味と効果 / The intersection of design & engineering
dex1t
7
2.6k
Cookpad Summer Internship 2018, 5 days Product Course
dex1t
3
7.4k
Machine Learning for Rapid Prototyping #CIIDSummerSchool
dex1t
8
4.8k
2018 Cookpad Spring Internship Service Develoment Course
dex1t
3
3.3k
体験を売るためのサービスづくり
dex1t
3
810
ユーザーと向き合いながらつくるSaaS #service_dev
dex1t
3
9.6k
Kibela meets Stripe - Stripeを使って新規SaaSを立ち上げた話 #JP_Stripes
dex1t
12
4.7k
Other Decks in Technology
See All in Technology
TypeScript 上達の道
ysknsid25
11
1.8k
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
220
エンジニアリングマネージャー“お悩み相談”パネルセッション
ar_tama
1
670
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
860
本当にわかりやすいAIエージェント入門
segavvy
10
6k
PHPでResult型やってみよう
higaki_program
0
190
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
3
580
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
140
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
220
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
6
1k
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
280
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.6k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Faster Mobile Websites
deanohume
308
31k
Practical Orchestrator
shlominoach
189
11k
Embracing the Ebb and Flow
colly
86
4.8k
Code Review Best Practice
trishagee
69
19k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Language of Interfaces
destraynor
158
25k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
4 Signs Your Business is Dying
shpigford
184
22k
Designing for humans not robots
tammielis
253
25k
The World Runs on Bad Software
bkeepers
PRO
70
11k
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