新規Railsアプリに小さく導入するReact

倜鋉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ךאְדח$PFF4DSJQU׾剅ֻ玎䏝ך穗꿀⦼ ؿٗٝزؒٝس✲䞔ח毙ַ׏׋
˖ ؟٦ؽأ涸חؒر؍ةך⡲׶鴥׫כ䗳荚 ˖ 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ה)BOEMFS׾1SPQTה׃ג㶨ח床׃ծ㶨כ׉׸
׾⢪ֲ ˖ $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

新規Railsアプリに小さく導入するReact

新規Railsアプリに小さく導入するReact

More Decks by Takaya Deguchi

Other Decks in Technology

Featured

Transcript