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.1k
キャリアの分岐点 / the intersection of my carrier
dex1t
3
210
コードを書きながらデザインする意味と効果 / The intersection of design & engineering
dex1t
7
2.3k
Cookpad Summer Internship 2018, 5 days Product Course
dex1t
3
7k
Machine Learning for Rapid Prototyping #CIIDSummerSchool
dex1t
8
4.6k
2018 Cookpad Spring Internship Service Develoment Course
dex1t
3
3.2k
体験を売るためのサービスづくり
dex1t
3
690
ユーザーと向き合いながらつくるSaaS #service_dev
dex1t
3
9.4k
Kibela meets Stripe - Stripeを使って新規SaaSを立ち上げた話 #JP_Stripes
dex1t
12
4.4k
Other Decks in Technology
See All in Technology
現実世界の事象から学ぶSOLID原則
h0r15h0
24
10k
サービス成長と共に肥大化するモノレポ、長くなるCI時間 / As services grow, monorepos get bigger and CI time gets longer
kohbis
5
2.1k
沒想過的前端錯誤處理可能比你有做的還多
line_developers_tw
PRO
0
2k
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
16
3.2k
ビジネスとコード品質の接合点 そしてコード品質がそこに及ぼす影響 / The Intersections of Business and Engineering, and The Impact of Code Quality There
mtx2s
10
1k
データ品質をコード化! LINEヤフーのMLOpsを最適化する "ACP Data Quality" の紹介
lycorptech_jp
PRO
2
150
「XX試験の環境作ってよ」と言われた時によく使うAWSのソリューションについて
bun913
0
120
Oracle Database で機械学習を始めよう! Oracle Machine Learning
oracle4engineer
PRO
1
140
.NETの非同期戦略とUnityとの相互運用
neuecc
2
2.4k
技術イベントはなんとかひねり出す 日経の技術広報の取り組み/techpr3
nishiuma
0
220
実務への応用例から考える 変更に強いオブジェクト指向設計 / 20240324-ooc2024
bengo4com
7
5.2k
チーム単位で保守性を高める:独自指標と向上にむけた実践
tarappo
0
300
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Automating Front-end Workflow
addyosmani
1353
200k
Fantastic passwords and where to find them - at NoRuKo
philnash
35
2.4k
The Pragmatic Product Professional
lauravandoore
24
5.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Side Projects
sachag
451
41k
What the flash - Photography Introduction
edds
64
11k
We Have a Design System, Now What?
morganepeng
42
6.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Infographics Made Easy
chrislema
237
18k
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