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.1k
Machine Learning for Rapid Prototyping #CIIDSummerSchool
dex1t
8
4.7k
2018 Cookpad Spring Internship Service Develoment Course
dex1t
3
3.2k
体験を売るためのサービスづくり
dex1t
3
730
ユーザーと向き合いながらつくるSaaS #service_dev
dex1t
3
9.5k
Kibela meets Stripe - Stripeを使って新規SaaSを立ち上げた話 #JP_Stripes
dex1t
12
4.5k
Other Decks in Technology
See All in Technology
waitany と waitall を作った話
mrkn
0
110
標準最高!標準はださくないぞ! at fukuoka.ts #1
yoiwamoto
0
150
AWSを始めた頃に陥りがちなポイントをまとめてみた
oshanqq
1
2.5k
contenteditableと向き合う
kikuchikakeru
2
200
ことばをそろえる / Bridging the Terminology Gap
amaotone
5
1k
すぐに始めるAWSコスト削減。短期でできる改善策と長期的な運用負荷軽減への取り組み方を解説
ncdc
1
470
APIのドキュメント化何使ってますか?
miu_crescent
2
160
2024年版 運用者たちのLLM
nwiizo
3
360
The XZ Backdoor Story
fr0gger
0
670
四国のあのイベントの〇〇システムを45日間で構築した話 / cloudohenro2024_tachibana
biatunky
0
220
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
250
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
1
110
Featured
See All Featured
Web development in the modern age
philhawksworth
204
10k
Documentation Writing (for coders)
carmenintech
65
4.3k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Designing for Performance
lara
604
68k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
The Cult of Friendly URLs
andyhume
76
5.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Optimising Largest Contentful Paint
csswizardry
28
2.7k
Thoughts on Productivity
jonyablonski
65
4.2k
The Cost Of JavaScript in 2023
addyosmani
39
5.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
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