非SPAなRailsアプリでレールに乗りつつReactを使う話

ඇ41"ͳ3BJMTΞϓϦͰ Ϩʔϧʹ৐Γͭͭ3FBDUΛ ࢖͏࿩ 3FBDU൓লձ!8BOUFEMZ !TV[BOHP

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ࣗݾ঺հ ླ໦݈ଠʢ!TV[BOHPʣ ͜Ε·Ͱ͸ओʹ৽نࣄۀͷ্ཱͪ͛ʹؔΘ͖ͬͯ·ͨ͠ɻ  ͲͪΒ͔ͱ͍͏ͱαʔόʔαΠυΤϯδχΞɻ  3BJMTΤϯδχΞͷཱ৔͔Β3FBDUʹ͍͓ͭͯ࿩͍͖ͤͯͨͩ͞·͢ɻ גࣜձࣾΫϥ΢υϫʔΫεΫϥΠΞϯταϙʔτγοϓ
ΤϯδχΞ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP $SPXE8PSLTͬͯ 3FBDU࢖ͬͯͨͷʁ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ࢖ͬͯ·͢ ʢ˞ͨͩ͠DSPXEXPSLTKQΛআ͘ʣ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ·ͩ·ͩ$P⒎FF4DSJQU͕ࢧ഑త  Ұ෦ͷը໘Ͱ7VFKTΛ࢖͍ͬͯΔ +4͸શͯ8FCQBDLͰίϯύΠϧ  $44͸4QSPDLFUTͰίϯύΠϧ +4$44Λ8FCQBDLͰ؅ཧ  $44͸Ұ෦4QSPDLFUTΛར༻
8FCQBDLͰ$44+4Λ શͯ؅ཧ͍ͯ͠Δ $SPXE8PSLTͷϑϩϯτΤϯυݱঢ়

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP w 41"ʹ͢Δඞཁੑ͸ߴ͘ͳ͔ͬͨɻ w ৽نࣄۀΛ"1*ϑϩϯτΤϯυ׬શʹ෼͚ͯ։ൃ͢ΔϦιʔε ͕ͳ͔ͬͨɻ w
ͱ͸͍͑6*͕ॏཁͳϖʔδͰ͸ෳࡶͳը໘੍ޚΛK2VFSZͰॻ͖ ͨ͘ͳ͍ɾɾɾ 3FBDUΛ࢖͍͍ͨϞνϕʔγϣϯ w 41"ʹ஌ݟͷ͋Δϝϯόʔ΋গͳ͔ͬͨͷͰɺ෦෼తʹಋೖΛ࢝ Ίͨ 3FBDUͷίϯϙʔωϯτΛ 3BJMTͷ7JFXʹຒΊࠐΉ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ࠓ೔ͷ͓࿩ ඇ41"ͳ3BJMTΞϓϦͰ 3FBDUΛͲ͏ѻͬͨͷ͔ ͦͯͦ͠ͷਏΈ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ·ͣ͸ ্ख͍ͬͨ͘ͱ͜Ζ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ࢖༻͍ͯ͠Δٕज़ελοΫ w 3FBDU w 3FEVY w
&4 w ZBSO w #BCFM w 8FCQBDL w SFBDU@PO@SBJMTSFBDUSBJMT 3FBDUͷߏ੒ͱͯ͠͸ ͘͘͝͝Ұൠతͳ΋ͷΛར༻͍ͯ͠·͢

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP w Ϟμϯ+4 &$."4DSJQUOQN ZBSO Λѻ͏ͨΊ3BJMTඪ४ͷ4QSPDLFUT Ͱ͸ͳ͘8FCQBDLͰϏϧυ͢Δ
w 8FCQBDL͸ QVCMJD ʹϏϧυͨ͠+4$44*NBHFɺٴͼϚχϑΣετ ϑΝΠϧΛ࡞੒͠·͢ɻ w 8FCQBDLͱ3BJMTͱͷΠϯςάϨʔγϣϯ͸ಠࣗͷϔϧύʔΛॻ͍ͯରԠ͠ ͍ͯ·͢ɻৄࡉ͸ͪ͜ΒͷϒϩάΛ֬͝ೝ͍ͩ͘͞ɻ IUUQFOHJOFFSDSPXEXPSLTKQFOUSZ 4QSPDLFUT8FCQBDL΁ͷҠߦ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP 3BJMT͔Β3FBDUΛ࢖͏ w 3BJMT͔Β3FBDUΛѻ͑ΔΑ͏ʹ͢Δ(FNΛར༻  ҎԼͷͲͪΒ͔Λ࢖༻͍ͯ͠·͢

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP w SFBDUSBJMT͸4QSPDLFUT͕લఏͷ࡞Γʹͳ͍ͬͯΔ  ˞࠷ۙ8FCQBDLFSͷαϙʔτ͕ೖΓ·ͨ͠ w SFBDUSBJMT͸ίϯϙʔωϯτΛάϩʔόϧʹ഑ஔ͢Δඞཁ͕͋Δ 
˞8FCQBDLFSΛར༻͢Δ৔߹͸͜ͷݶΓͰ͸ͳ͍Α͏Ͱ͢ w SFBDU@PO@SBJMT͸SFBDU@VKTతͳ+4͕ɺOQNύοέʔδͱͯ͠ఏڙ͞Ε͍ͯͯ JNQPSUͯ͠࢖͑Δ SFBDU@PO@SBJMTWTSFBDUSBJMT 5-%3 8FCQBDLΛ࢖͏৔߹͸SFBDU@PO@SBJMTͷํ͕Αͦ͞͏

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP 3BJMTΞϓϦͷϓϩδΣΫτSPPUʹɺDMJFOUσΟϨΫτϦΛ࡞Δ  ˞ϓϩδΣΫτʹΑΓඍົʹҟͳΓ·͢ 3FBDUͷίϯϙʔωϯτΛ  ഑ஔ͢ΔσΟϨΫτϦ 443༻ͷ+4ΤϯυϙΠϯτ 
3FBDUͷίϯϙʔωϯτ͚ͩ 3FBDUҎ֎ͷ+4Λ֨ೲ͢Δ σΟϨΫτϦ K2VFSZͱ͔͸͜͜ ϒϥ΢βʔͰ࢖༻͢Δ+4ͷ ΤϯυϙΠϯτ ϑΥϧμߏ੒

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP SFBDU@PO@SBJMTͰ3FBDUΛѻ͏ w 3FBDUͷίϯϙʔωϯτ͸SFBDU@DPNQPOFOUϔϧύʔΛ࢖ͬͯ3BJMT͔ΒSFOEFS͢Δ w 3BJMTͷ7JFX͔Β3FBDU΁σʔλΛ౉͢෦෼Ͱ໎Θͳͯ͘͢Ή w
443͕ΦϓγϣϯΛ଍͚ͩ͢Ͱ࣮ݱͰ͖Δ w +4ଆ͔Β͸3FBDU0O3BJMTSFHJTUFSͰίϯϙʔωϯτొ࿥

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP SFBDU@PO@SBJMTͰ$43'Λѻ͏ w 3FBDUͰϑΥʔϜΛѻ͏৔߹ɺ3BJMT͕Α͠ͳʹ΍ͬͯ͘Εͯͨ$43'ΛͲ͏ѻ͏ ͕໰୊ʹͳΔ w 3FBDU0O3BJMTʹ͸$43'τʔΫϯΛऔಘ͢Δϝιου͕༻ҙ͞Ε͍ͯΔ
w TVQFSBHFOUͷϥούʔΛ࡞ͬͯɺ1045͢Δͱ͖ʹ$43'τʔΫϯΛؾʹͤͣʹ ࡁΉΑ͏ʹͨ͠Γ͠·ͨ͠

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP SFBDU@PO@SBJMTͰJOΛѻ͏ w ࣗ෼͸࢖ͬͯͳ͍Ͱ͕͢࠷ۙ௥Ճ͞ΕͨΑ͏ͳͷͰ঺հ͠·͢

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP 3FBDUPO3BJMTPO5VSCPMJOLT w 5VSCPMJOLTͱ͸ Ҿ༻ݩIUUQLSBZKQCMPHNVTULOPXBCPVUUVSCPMJOLT

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP 3FBDUPO3BJMTPO5VSCPMJOLT

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP 3FBDUPO3BJMTPO5VSCPMJOLT w 41"Ͱͳͯ͘΋ٙࣅ41"ͳಈ͖ʹͳͬͯαΠτ͕ૣ͘ͳΔ w ҋͬΆ͍͕3FBDUͱ5VSCPMJOLT͸ڞଘͰ͖Δ  5VSCPMJOLTͷΠϕϯτʹ߹Θͤͯ3FBDUͷίϯϙʔωϯτ͕SFOEFS͞ΕΔΑ͏
ʹαϙʔτ͞Ε͍ͯΔʣ w ͨͩ͠SFBDUSPVUFSͱͷڞଘ͸Ͱ͖ͳ͍ͷͰ஫ҙ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ͦͷଞ΍ͬͯΑ͔ͬͨ͜ͱ w FTMJOU4JEF$*ͰϞμϯͳ+4ʹͳΔΑ͏ʹ(JU)VCͰࢦఠ w Ұʑෳ਺ϓϩηεΛ্ཱͪ͛ͳͯ͘Α͍Α͏Α͏ʹ͢Δɻ GPSFNBOΛܦͯɺEPDLFSDPNQPTFVQͰશ্ཱ͕͕ͯͪΔΑ
͏ʹͨ͠ɻ w &&ςετ࣌ʹ΋ɺGFBUVSFTͷςετʹϑοΫͯࣗ͠ಈͰ XFCQBDLʹΑΔϏϧυ͕૸ΔΑ͏ʹͨ͠ɻ ɹFUDʜ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ෳࡶͳ6*ͷඞཁͳ͍ը໘Ͱ͸ 3BJMTͷϨʔϧʹͷΓ ϔομʔ 3BJMTͷ7JFX ίϯςϯπ 3BJMTͷ7JFX

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ෳࡶͳ6*͕ඞཁͳը໘Ͱ͸ 3FBDUΛ࢖ͬͯهड़͢Δ ϔομʔ 3BJMTͷ7JFX 3FBDUͷ ίϯϙʔωϯτ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP 3BJMTͷϨʔϧʹ৐Γͭͭ 3FBDUΛ࢖͏͜ͱ͕Ͱͨ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ׬

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ࠓ೔͸൓লձͳͷͰ ࣦഊͯ͠͠·ͬͨͱ͜Ζ ൓ল఺΋ڞ༗͠·͢

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP 3FBDUͷίϯϙʔωϯτͱ 3BJMTͷ7JFXΛࠞͥͯ͠·ͬͨ ൓ল

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP Ұ෦ͷίϯϙʔωϯτ͕ 3FBDUԽ͞Εͨϖʔδ ϔομʔ 3BJMTͷ7JFX ίϯςϯπ 3BJMTͷ7JFX
3FBDUͷ ίϯϙʔωϯτ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP Ұ෦ͷίϯϙʔωϯτ͕ 3FBDUԽ͞Εͨϖʔδ ϔομʔ 3BJMTͷ7JFX ίϯςϯπ 3BJMTͷ7JFX
3FBDUͷ ίϯϙʔωϯτ Ϙλϯ ϘλϯΛԡͨ͠Β3FBDUͷ ίϯϙʔωϯτΛߋ৽͍ͨ͠

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP Ұ෦ͷίϯϙʔωϯτ͕ 3FBDUԽ͞Εͨϖʔδ ͋͋͋͋͋ ϔομʔ 3BJMTͷ7JFX ίϯςϯπ
3BJMTͷ7JFX 3FBDUͷ ίϯϙʔωϯτ Ϙλϯ ϘλϯΛԡͨ͠Β 3BJMTͷ7JFXʹߋ৽Λ͔͚͍ͨ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ਖ਼߈๏Ͱ΍ΔͳΒ͜͏ ϔομʔ 3BJMTͷ7JFX શͯΛReactͷίϯϙʔωϯτʹ͢Δ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ࣮ࡍʹ͸ɾɾɾ ϔομʔ 3BJMTͷ7JFX 3FBDUͷ ίϯϙʔωϯτ RailsͷԿ͔ෳࡶͳϔϧύʔ
RailsͷԿ͔ifจ ඇReactͳJSͷΠϕϯτόΠϯυ ೲظ etc….

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ͜͏͍͏ͷ΋ ϔομʔ 3BJMTͷ7JFX ϔομʔ 3BJMTͷ7JFX 3FBDUͷ
ίϯϙʔωϯτ ΄΅ಉ͡ϚʔΫΞοϓ ΄΅ಉ͡ϚʔΫΞοϓ RailsͷԿ͔ෳࡶͳϔϧύʔ RailsͷԿ͔ifจ ඇReactͳJSͷΠϕϯτόΠϯυ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP 3BJMTͷϩδοΫ͕ೖͬͨ7JFXͱ 3FBDUίϯϙʔωϯτͷೋॏ؅ཧͷਏΈ w طଘͷΞϓϦͷ৔߹খ࢝͘͞ΊΔϝϦοτ͋Γ·͕͢ɺ৽نͷΞ ϓϦͳΒ41"Ͱͳͯ͘΋7JFX͸શͯ3FBDUʹ೚ͤΔܗʹ͢Δ΂ ͖ͩͬͨ
w $44JO+4ɺ$44ϞδϡʔϧͳͲ΍Γͨͯ͘΋ɺ%0.͚ͩͰͳ ͘ελΠϧγʔτ΋ೋॏ؅ཧʹͳͬͯ͠·ͬͯ͏ʔΜɾɾɾͱ͍ͬ ͨ͜ͱʹͳͬͨ w 3FBDUΛ+4ͷϥΠϒϥϦͱଊ͑ΔΑΓϨϯμϦϯάΤϯδϯͱଊ ͑Δ΂͖ͩͬͨ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͍͔ͨͬͨ࿩ᴺ!TV[BOHP ൓ল 3BJMT͔Β3FBDUʹͲ͏ σʔλΛ౉͔͢ͷઃܭ͕؁͔ͬͨ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP SFBDUSBJMTܥͷ(FNΛ࢖ͬͯ 3FBDUʹσʔλΛ౉͢ w SFBDUSBJMTͳͲͷ(FNΛ࢖͏ͱɺ3FBDUͷίϯϙʔωϯτʹ؆୯ʹ1SPQTΛ౉ ͍ͯ͘͜͠ͱ͕Ͱ͖Δ w
QSFSFOEFSΦϓγϣϯͰ443·Ͱ࣮ݱͰ͖Δ w ίϯϙʔωϯτ͕খ͘͞ɺͨͩσʔλΛड͚औͬͯදࣔ͢Δ͚ͩͰΑ͚Ε͹͜Ε Ͱࣄ଍ΓΔ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ίϯϙʔωϯτΛ443ͭͭ͠"1* Ͱ΋ߋ৽͍ͨ͠ ϔομʔ 3BJMTͷ7JFX ΋ͬͱݟΔ ϘλϯΛԡ͢ͱ
Ϧετཁૉ͕௥Ճ͞ΕΔ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP )5.-ΛϨϯμʔ͢Δίϯτϩʔϥ 443༻ ͱ+40/Λฦ͢ίϯτϩʔϥ "1* ͰϩδοΫ͕ೋॏʹͳΔ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ϑϩϯτ͔Β+40/Λऔಘ͢Δ৔߹͕ ૿͑Δͱɺ͖ͪΜͱͨ͠"1*ઃܭ͕ඞ ཁʹͳͬͯ͘Δ w ϑϩϯτͷ+4͕খ͍͞͏ͪ͸AGPSNBUKTPOAͱ͔ͰϨϯμϦϯ άΛ෼͚͍ͯͯ΋·͋ͦΜͳʹࠔΒͳ͍͔΋͠Εͳ͍͚Ͳɾɾɾ
w ϑϩϯτͷ+4͕େ͖͘ͳΔͱɺαʔόʔଆͷΤϥʔϋϯυϦϯά IUNM͸ฦ͞ͳ͍Ͱ͠ΐ͏ ͱ͔ɺඇϩάΠϯ࣌ʹ"1*ୟ͔Ε ͨΒԿฦ͢ͷͱ͔ɺ৭ʑͱߟ͑Δඞཁ͕ग़ͯ͘Δ w εϚϗΞϓϦ༻ͷ"1*ͷΑ͏ʹ͖ͪΜͱઃܭ͍ͯ͘͠ඞཁ͕Ͱͯ ͘Δ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP 3BJMT͔Β3FBDUʹͲ͏σʔλΛ ౉͔͢ w 3BJMT͔Β3FBDUʹͲ͏σʔλΛ౉͢ͷ͔͸Α͘ઃܭ͓͔ͯ͠ͳ ͍ͱ3FBDUͷίϯϙʔωϯτ͕େ͖͘ͳ͖ͬͯͨͱ͖ʹɺϩδο Ϋ͕αʔόʔαΠυͰ෼ࢄ͢Δ͜ͱʹͳΔ
͜ͱ΋͋Δ w ίϯϙʔωϯτ͕খ͍͞͏ͪ͸ͦΕ΄Ͳ໰୊ʹͳΒͳ͍͕ɺϑϩ ϯτΤϯυଆͰ+40/Λऔಘ͢Δ͜ͱ͕ଟ͘ͳΔͱɺεϚϗΞϓ ϦΛ࡞Δͱ͖ͷΑ͏ʹ"1*ઃܭΛͪΌΜͱ΍Δඞཁ͕ग़ͯ͘Δɻ w 3BJMT͔ΒͲ͏3FBDUʹσʔλΛ౉͍ͯ͘͠ͷ͔ɺSLBNVSB͞ Μͷ΍Γํ͸ΊͬͪΌࢀߟʹͳͬͨɻ 3VCZPO3BJMTPO3FBDUPO443PO41"

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP w 3BJMTΞϓϦͰখ͘͞3FBDUΛ࢝ΊΔͷ͸7JFXʹ3FBDU ͷίϯϙʔωϯτΛຒΊࠐΉܗͰ͋Ε͹؆୯ʹ࣮ݱͰ͖Δ w 41"ʹͨ͠ͱ͖ʹߟ͑ͳ͚Ε͹͍͚ͳ͍/ݸͷ͜ͱʜΛߟ ͑ͣʹ3FBDUΛಋೖͰ͖Δɻ
w K2VFSZʹΑΔΠϕϯτۦಈϐλΰϥεΠονʹͳΓ͕ͪ ͳෳࡶͳڍಈͷը໘Λ3FBDUͰએݴతʹ͔͚Δɻ w ෳࡶͳ6*ͷඞཁͳ͍ը໘Ͱ͸͜Ε·Ͱ௨Γ3BJMTͷϨʔϧ ʹ৐ΕΔɻ ·ͱΊʙྑ͔ͬͨ఺ʙ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ·ͱΊʙ൓ল఺ʙ w 3BJMTͷ7JFXͷҰ෦ʹখ͞ͳ3FBDUͷίϯϙʔωϯτΛຒ ΊࠐΉͷ͸؆୯͚ͩͲɺͦΜͳʹεέʔϧ͠ͳͦ͞͏ ˞ݸਓ ͷײ૝Ͱ͢
ɻΞϓϦέʔγϣϯʹ΋ΑΓ·͕͢ɺਐԽͱͱ΋ ʹ݁ہͦͷϖʔδ୯ମͰ͸41"Έ͍ͨͳ࡞ΓʹਐԽ͍ͯ͠ ͘ؾ͕͢Δɻ w 7JFXΛͲͪΒ͕ϨϯμϦϯά͢Δͷ͔ɺ1SPQTΛͲ͏౉͢ ͔ͳͲɺ3FBDUͱ3BJMTͷ੹຿ΛͲ͜Ͱ੾Γ෼͚Δ͔Α͘ߟ ͑ͳ͍ͱɺͲͬͪͷΤίγεςϜʹ΋৐Εͯͳ͍ײ͕ग़ͯ དྷΔ͠ɺγεςϜͷෳࡶੑ͕͕͋Δɻ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ࣍ʹ৽نͰ 3BJMTͱ3FBDUΛ࢖͏ͳΒ ͜͏͢Δ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP 3FBDUΛ࢖͏ϖʔδͰ͸ɺ 3BJMT͸جຊతʹ"1*ʹపͯ͠ 41"తͳ࡞Γʹ͢Δ w 3FBDUΛ࢖͏ϖʔδ PS͋Δ63-഑Լ
Ͱ͸7JFX͸શͯ3FBDUͷίϯ ϙʔωϯτͰهड़͢ΔΑ͏ʹ͢Δ w 3FBDU΍ͦͷपลϥΠϒϥϦ͸41"Λલఏʹ͍ͯ͠Δ ͱײ͡Δ ͷͰɺ 3BJMT͸"1* 7JFX͸શͯ3FBDUʹ೚ͤΔͱ͍͏ελϯεΛऔͬͨ΄ ͏͕ɺ݁Ռͱͯ͠͸ͲͪΒͷΤίγεςϜͷԸܙΛड͚ΒΕͦ͏ɻ w શ෦41"ʹ͢ΔʹͤΑ͠ͳ͍ʹͤΑɺASFBDU@DPNQPOFOUAʹΑΔ 3BJMTͱ3FBDUͷεϜʔζͳΠϯςάϨʔγϣϯͱ͔ٻΊͣʹɺ໌֬ ʹ੹຿Λ੾Γ෼͚ΔΑ͏ʹ͍ͨ͠ʂ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP ऴΘΓ

DPQZSJHIU D $SPXE8PSLTBMMSJHIUTSFTFSWFE 3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP

非SPAなRailsアプリでレールに乗りつつReactを使う話

非SPAなRailsアプリでレールに乗りつつReactを使う話

More Decks by Kenta Suzuki

Other Decks in Programming

Featured

Transcript