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.7k
2018 Cookpad Spring Internship Service Develoment Course
dex1t
3
3.2k
体験を売るためのサービスづくり
dex1t
3
700
ユーザーと向き合いながらつくるSaaS #service_dev
dex1t
3
9.5k
Kibela meets Stripe - Stripeを使って新規SaaSを立ち上げた話 #JP_Stripes
dex1t
12
4.4k
Other Decks in Technology
See All in Technology
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
JSON攻略法.pdf
miyakemito
8
5.1k
反実仮想機械学習とは何か
usaito
PRO
11
4.7k
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
280
FrontDoorとWebAppsを組み合わせた際のリダイレクト処理の注意点
kenichirokimura
1
530
Gitlab本から学んだこと - そーだいなるプレイバック / gitlab-book
soudai
4
430
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
310
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
240
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
4
16k
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
200
Cracking the KubeCon CfP
inductor
2
250
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
130
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
The Pragmatic Product Professional
lauravandoore
25
5.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Automating Front-end Workflow
addyosmani
1356
200k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
Music & Morning Musume
bryan
41
5.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Unsuck your backbone
ammeep
663
57k
Designing the Hi-DPI Web
ddemaree
276
33k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
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