Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

React反省会@Wantedlyさん

Kenta Suzuki

May 10, 2017
Tweet

More Decks by Kenta Suzuki

Other Decks in Programming

Transcript

  1. ඇ41"ͳ3BJMTΞϓϦͰ
    Ϩʔϧʹ৐Γͭͭ3FBDUΛ
    ࢖͏࿩

    3FBDU൓লձ!8BOUFEMZ
    !TV[BOHP

    View full-size slide

  2. DPQZSJHIU D
    $SPXE8PSLTBMMSJHIUTSFTFSWFE
    3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP
    ࣗݾ঺հ
    ླ໦݈ଠʢ!TV[BOHPʣ
    ͜Ε·Ͱ͸ओʹ৽نࣄۀͷ্ཱͪ͛ʹؔΘ͖ͬͯ·ͨ͠ɻ

    ͲͪΒ͔ͱ͍͏ͱαʔόʔαΠυΤϯδχΞɻ

    3BJMTΤϯδχΞͷཱ৔͔Β3FBDUʹ͍͓ͭͯ࿩͍͖ͤͯͨͩ͞·͢ɻ
    גࣜձࣾΫϥ΢υϫʔΫεΫϥΠΞϯταϙʔτγοϓ
    ΤϯδχΞ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 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ͷϑϩϯτΤϯυݱঢ়

    View full-size slide

  6. DPQZSJHIU D
    $SPXE8PSLTBMMSJHIUTSFTFSWFE
    3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP
    w 41"ʹ͢Δඞཁੑ͸ߴ͘ͳ͔ͬͨɻ
    w ৽نࣄۀΛ"1*ϑϩϯτΤϯυ׬શʹ෼͚ͯ։ൃ͢ΔϦιʔε
    ͕ͳ͔ͬͨɻ
    w ͱ͸͍͑6*͕ॏཁͳϖʔδͰ͸ෳࡶͳը໘੍ޚΛK2VFSZͰॻ͖
    ͨ͘ͳ͍ɾɾɾ 3FBDUΛ࢖͍͍ͨϞνϕʔγϣϯ

    w 41"ʹ஌ݟͷ͋Δϝϯόʔ΋গͳ͔ͬͨͷͰɺ෦෼తʹಋೖΛ࢝
    Ίͨ
    3FBDUͷίϯϙʔωϯτΛ
    3BJMTͷ7JFXʹຒΊࠐΉ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 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ͷߏ੒ͱͯ͠͸
    ͘͘͝͝Ұൠతͳ΋ͷΛར༻͍ͯ͠·͢

    View full-size slide

  12. 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΁ͷҠߦ

    View full-size slide

  13. DPQZSJHIU D
    $SPXE8PSLTBMMSJHIUTSFTFSWFE
    3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP
    3BJMT͔Β3FBDUΛ࢖͏
    w 3BJMT͔Β3FBDUΛѻ͑ΔΑ͏ʹ͢Δ(FNΛར༻

    ҎԼͷͲͪΒ͔Λ࢖༻͍ͯ͠·͢

    View full-size slide

  14. 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ͷํ͕Αͦ͞͏

    View full-size slide

  15. DPQZSJHIU D
    $SPXE8PSLTBMMSJHIUTSFTFSWFE
    3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP
    3BJMTΞϓϦͷϓϩδΣΫτSPPUʹɺDMJFOUσΟϨΫτϦΛ࡞Δ

    ˞ϓϩδΣΫτʹΑΓඍົʹҟͳΓ·͢
    3FBDUͷίϯϙʔωϯτΛ

    ഑ஔ͢ΔσΟϨΫτϦ
    443༻ͷ+4ΤϯυϙΠϯτ

    3FBDUͷίϯϙʔωϯτ͚ͩ

    3FBDUҎ֎ͷ+4Λ֨ೲ͢Δ
    σΟϨΫτϦ K2VFSZͱ͔͸͜͜

    ϒϥ΢βʔͰ࢖༻͢Δ+4ͷ
    ΤϯυϙΠϯτ
    ϑΥϧμߏ੒

    View full-size slide

  16. 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Ͱίϯϙʔωϯτొ࿥

    View full-size slide

  17. 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'τʔΫϯΛؾʹͤͣʹ
    ࡁΉΑ͏ʹͨ͠Γ͠·ͨ͠

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. DPQZSJHIU D
    $SPXE8PSLTBMMSJHIUTSFTFSWFE
    3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP
    3FBDUPO3BJMTPO5VSCPMJOLT
    w 41"Ͱͳͯ͘΋ٙࣅ41"ͳಈ͖ʹͳͬͯαΠτ͕ૣ͘ͳΔ
    w ҋͬΆ͍͕3FBDUͱ5VSCPMJOLT͸ڞଘͰ͖Δ

    5VSCPMJOLTͷΠϕϯτʹ߹Θͤͯ3FBDUͷίϯϙʔωϯτ͕SFOEFS͞ΕΔΑ͏
    ʹαϙʔτ͞Ε͍ͯΔʣ
    w ͨͩ͠SFBDUSPVUFSͱͷڞଘ͸Ͱ͖ͳ͍ͷͰ஫ҙ

    View full-size slide

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

    View full-size slide

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

    ίϯςϯπ 3BJMTͷ7JFX

    View full-size slide

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

    3FBDUͷ
    ίϯϙʔωϯτ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    ίϯςϯπ 3BJMTͷ7JFX

    3FBDUͷ
    ίϯϙʔωϯτ

    View full-size slide

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

    ίϯςϯπ 3BJMTͷ7JFX

    3FBDUͷ
    ίϯϙʔωϯτ
    Ϙλϯ
    ϘλϯΛԡͨ͠Β3FBDUͷ
    ίϯϙʔωϯτΛߋ৽͍ͨ͠

    View full-size slide

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

    ίϯςϯπ 3BJMTͷ7JFX

    3FBDUͷ
    ίϯϙʔωϯτ
    Ϙλϯ
    ϘλϯΛԡͨ͠Β
    3BJMTͷ7JFXʹߋ৽Λ͔͚͍ͨ

    View full-size slide

  32. DPQZSJHIU D
    $SPXE8PSLTBMMSJHIUTSFTFSWFE
    3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP
    ਖ਼߈๏Ͱ΍ΔͳΒ͜͏
    ϔομʔ 3BJMTͷ7JFX

    શͯΛReactͷίϯϙʔωϯτʹ͢Δ

    View full-size slide

  33. DPQZSJHIU D
    $SPXE8PSLTBMMSJHIUTSFTFSWFE
    3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP
    ࣮ࡍʹ͸ɾɾɾ
    ϔομʔ 3BJMTͷ7JFX

    3FBDUͷ
    ίϯϙʔωϯτ
    RailsͷԿ͔ෳࡶͳϔϧύʔ
    RailsͷԿ͔ifจ
    ඇReactͳJSͷΠϕϯτόΠϯυ
    ೲظ
    etc….

    View full-size slide

  34. DPQZSJHIU D
    $SPXE8PSLTBMMSJHIUTSFTFSWFE
    3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP
    ͜͏͍͏ͷ΋
    ϔομʔ 3BJMTͷ7JFX
    ϔομʔ 3BJMTͷ7JFX

    3FBDUͷ
    ίϯϙʔωϯτ
    ΄΅ಉ͡ϚʔΫΞοϓ ΄΅ಉ͡ϚʔΫΞοϓ
    RailsͷԿ͔ෳࡶͳϔϧύʔ
    RailsͷԿ͔ifจ
    ඇReactͳJSͷΠϕϯτόΠϯυ

    View full-size slide

  35. 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ͷϥΠϒϥϦͱଊ͑ΔΑΓϨϯμϦϯάΤϯδϯͱଊ
    ͑Δ΂͖ͩͬͨ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. DPQZSJHIU D
    $SPXE8PSLTBMMSJHIUTSFTFSWFE
    3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP
    ίϯϙʔωϯτΛ443ͭͭ͠"1*
    Ͱ΋ߋ৽͍ͨ͠
    ϔομʔ 3BJMTͷ7JFX

    ΋ͬͱݟΔ
    ϘλϯΛԡ͢ͱ
    Ϧετཁૉ͕௥Ճ͞ΕΔ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. DPQZSJHIU D
    $SPXE8PSLTBMMSJHIUTSFTFSWFE
    3FBDU൓লձ!8BOUFEMZᴺඇ41"ͳ3BJMTΞϓϦͰϨʔϧʹ৐Γͭͭ3FBDUΛ࢖͏࿩ᴺ!TV[BOHP
    3BJMT͔Β3FBDUʹͲ͏σʔλΛ
    ౉͔͢
    w 3BJMT͔Β3FBDUʹͲ͏σʔλΛ౉͢ͷ͔͸Α͘ઃܭ͓͔ͯ͠ͳ
    ͍ͱ3FBDUͷίϯϙʔωϯτ͕େ͖͘ͳ͖ͬͯͨͱ͖ʹɺϩδο
    Ϋ͕αʔόʔαΠυͰ෼ࢄ͢Δ͜ͱʹͳΔ ͜ͱ΋͋Δ

    w ίϯϙʔωϯτ͕খ͍͞͏ͪ͸ͦΕ΄Ͳ໰୊ʹͳΒͳ͍͕ɺϑϩ
    ϯτΤϯυଆͰ+40/Λऔಘ͢Δ͜ͱ͕ଟ͘ͳΔͱɺεϚϗΞϓ
    ϦΛ࡞Δͱ͖ͷΑ͏ʹ"1*ઃܭΛͪΌΜͱ΍Δඞཁ͕ग़ͯ͘Δɻ
    w 3BJMT͔ΒͲ͏3FBDUʹσʔλΛ౉͍ͯ͘͠ͷ͔ɺSLBNVSB͞
    Μͷ΍Γํ͸ΊͬͪΌࢀߟʹͳͬͨɻ
    3VCZPO3BJMTPO3FBDUPO443PO41"

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. 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ͷεϜʔζͳΠϯςάϨʔγϣϯͱ͔ٻΊͣʹɺ໌֬
    ʹ੹຿Λ੾Γ෼͚ΔΑ͏ʹ͍ͨ͠ʂ

    View full-size slide

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

    View full-size slide

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

    View full-size slide