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

既存 Web アプリケーションへの React.js 適用/react for web application

A1
February 19, 2019

既存 Web アプリケーションへの React.js 適用/react for web application

2019.2.19 Rakus Meetup Tokyo #2 フロントエンドNight発表資料

A1

February 19, 2019
Tweet

More Decks by A1

Other Decks in Programming

Transcript

  1. طଘ8FCΞϓϦέʔγϣϯ
    ΁ͷ3FBDUKTద༻
    3BLVT.FFUVQ5PLZPϑϩϯτΤϯυ/JHIU
    &JJDIJ.JUB

    View Slide

  2. w&JJDIJ.JUB
    w" !FJDIJTBOEFO

    wָָ໌ࡉ։ൃ՝ϦʔυΤϯδχΞೖࣾ೥໨
    w#MPHIUUQTHZP[BCFFS
    wEFWυϝΠϯങ͍͍ͨ
    ࣗݾ঺հ

    View Slide

  3. ୲౰αʔϏεͷ͝঺հ

    View Slide

  4. w ։ൃͨ͠ͷ͸೥ޙ൒Ͱ͢
    w ࠷৽ͷػೳʢIPPLTͳͲʣͷ࿩͸ग़͖ͯ·ͤΜ
    ͸͡Ίʹ

    View Slide

  5. w ๻ʢ๻Ͱ͢ɻνʔϜϦʔμʔʣ
    w 0͞ΜʢϚϚ͞ΜΤϯδχΞ
    ɻࠓճͷओ໾ʣ
    w 4͞Μʢࠓճಛʹग़൪ͳ͠ʣ
    ˠͭ·Γখن໛ͳνʔϜ
    ౰࣌ͷνʔϜମ੍

    View Slide

  6. ாථͷϨΠΞ΢τΛϢʔβ͕ઃఆग़དྷΔͱ͍͏ɺ6*͕
    ͪΐͬͱෳࡶͳػೳཁ͕݅෣͍ࠐΜͰ͖·ͨ͠ɻ
    ֎෦ઃܭΛແࣄऴ͑ɺৄࡉઃܭϨϏϡʔΛ͍ͯͨ͠
    ͋Δ೔ͷग़དྷࣄʜ
    ಋೖʹࢸͬͨܦҢ

    View Slide

  7. 0͞Μɿ
    ಋೖʹࢸͬͨܦҢ
    ͜ͷ஋͸IJEEFOʹอଘ͓͖ͯ͠·͢ɻ

    View Slide

  8. 0͞Μɿ
    0͞Μɿ
    ಋೖʹࢸͬͨܦҢ
    ͜ͷ஋͸IJEEFOʹอଘ͓͖ͯ͠·͢ɻ
    ͜ͷ஋΋IJEEFOʹอଘ͓͖ͯ͠·͢ɻ

    View Slide

  9. 0͞Μɿ
    0͞Μɿ
    ๻ɿ
    ಋೖʹࢸͬͨܦҢ
    ͜ͷ஋͸IJEEFOʹอଘ͓͖ͯ͠·͢ɻ
    ͜ͷ஋΋IJEEFOʹอଘ͓͖ͯ͠·͢ɻ
    ͑ͬʂʁ

    View Slide

  10. 0͞Μɿ
    0͞Μɿ
    ๻ɿ
    0͞Μɿ
    ಋೖʹࢸͬͨܦҢ
    ͜ͷ஋͸IJEEFOʹอଘ͓͖ͯ͠·͢ɻ
    ͜ͷ஋΋IJEEFOʹอଘ͓͖ͯ͠·͢ɻ
    ͜ͷ஋΋IJEEFOʹอଘ͓͖ͯ͠·͢ɻ
    ͑ͬʂʁ

    View Slide

  11. 0͞Μɿ
    0͞Μɿ
    ๻ɿ
    0͞Μɿ
    ๻ɿ
    ಋೖʹࢸͬͨܦҢ
    ͜ͷ஋͸IJEEFOʹอଘ͓͖ͯ͠·͢ɻ
    ͜ͷ஋΋IJEEFOʹอଘ͓͖ͯ͠·͢ɻ
    ͜ͷ஋΋IJEEFOʹอଘ͓͖ͯ͠·͢ɻ
    ͪΐͪΐͪΐʂʁ
    ͑ͬʂʁ

    View Slide

  12. ͭΒ͍ʢԕ͍໨ʣ

    View Slide

  13. ࠓ·Ͱͱಉ͡Α͏ʹK2VFSZͰ࣮૷ͨ͠Β΍͹͍༧ײ͔͠
    ͠ͳ͍ɻ
    ͕ͩͦΕ͸K2VFSZ͕ѱ͍༁Ͱ͸ͳ͍ɻ
    ෳࡶͳσʔλΛ%0.ʹ࣋ͨͤΔͷ͸ਏ͍͠ɺෳࡶͳ%0.
    Λૢ࡞͢Δͷ͸೉͍͠ʜ
    ಋೖʹࢸͬͨܦҢ

    View Slide

  14. ਓྨʹ%0.Λѻ͏ͷ͸೉͗͢͠Δ

    View Slide

  15. ˞ݸਓͷײ૝Ͱ͢
    3FBDUKT͸ී௨ʹྲྀߦ͍ͬͯͨɻ
    "OHVMBSKT͸ͱޓ׵ੑ͕ͳ͍͕ग़ͯͪΐͬͱख͕ग़͠ʹ͍͘ঢ়گ
    7VFKT͸ࠓޙྲྀߦΓͦ͏ͳײͩͬͨ͡ʢ͜͜·ͰྲྀߦΔͱ͸ࢥͬͯͳ
    ͔͕ͬͨʣ
    ˠݸਓతʹ͸3FBUKTͷ୒ͩͬͨɻ
    ౰࣌ͷτϨϯυΛৼΓฦΔͱ
    ͜ͷࠒ

    View Slide

  16. ֮͑Δ͜ͱ͕গͳͯ͘γϯϓϧ
    +49ͷݟͨ໨ͷΠϯύΫτͱ͸ཪෲʹɺ
    ͓֮͑ͯ͘΂͖ه๏ͳͲ͸͔ͳΓগͳ͍ɻ
    ˠطଘͷ+BWB4DSJQUͷ஌͕ࣝ࠷େݶ׆͔ͤΔɻ
    3FBDUKTΛબ୒ͨ͠ཧ༝
    class App extends Component {
    render() {
    return (

    Hello World

    )
    }
    }

    View Slide

  17. ϚʔΫΞοϓΛγϯϓϧʹอͯΔ
    ͨͩͰ͑͞ΰνϟ͍͍ͭͯΔKTQʹϑϩϯτΤϯυϥΠϒ
    ϥϦಠࣗͷه๏Λࠞࡏͤͨ͘͞ͳ͔ͬͨ
    ˞ίʔυ͸งғؾͰ͢ɻ
    3FBDUKTΛબ୒ͨ͠ཧ༝







    Name:

    Hello {{yourName}}!




    View Slide

  18. ྲྀߦ͍ͬͯͨ
    ϒϩάهࣄͳͲ৘ใʹ͸ࠔΒͳ͍ɻ
    ҆௚ͳཧ༝Ͱ͕͢ɺྲྀߦ͍ͬͯΔ΋ͷʹ͸ཧ༝͕͋Δɻ
    ྑ͍ͱࢥ͑Δ΋ͷͳΒ͋͑ͯٯΒ͏ඞཁ͸ͳ͍ɻ
    ؾܰʹ࡞Γ௚͠Ͱ͖ͳ͍ͷͰʢಛʹUP#ͷαʔϏεͳͷͰʣ
    ͙͢ഇΕΔ΋ͷΛ࠾༻͢Δͷ͸ਏ͍
    3FBDUKTΛબ୒ͨ͠ཧ༝

    View Slide

  19. 3FBDUKTΛ࠾༻͢Δʹ͋ͨͬͯ؆୯ͳνʔϜ಺πʔϧΛ࡞ͬ
    ͯΈ·ͨ͠ɻ
    3FBDUKT͚ͩͩͱ਌ࢠͷ$PNQPOFOUؒͷTUBUFͱQSPQTͷ
    ؅ཧ͕͘͢͝େมͩͬͨͷͰ࠷ॳ͔ΒSFBDUSFEVYΛ࢖͏
    ͜ͱΛબ୒ɻ
    ˠখ͘͞࡞ͬͯࢼ͢ͷॏཁ
    3FEVYΛબ୒ͨ͠ཧ༝

    View Slide

  20. 3FBDU3FEVYͰߦͧ͘ʂ

    View Slide

  21. 3FBDUͷαϯϓϧίʔυ͸&4͕࢖ΘΕ͍ͯΔ͜ͱ͕ଟ͍Ͱ
    ͕͢ɺݩʑ&4ͳݱ৔ͳͷͰମܥతʹֶΜͰ͓͍ͨํ͕ޮ཰͕
    ྑ͍ͱߟ͑·ͨ͠ɻ
    ࣗ෼͸झຯͰ͍֮͑ͯͨͷͰߨࢣͱͳΓɺ&4ษڧձΛ։࠵ɻ
    ࣄલ४උʢ&4ͷֶशʣ
    ӳޠ͕ۤͰͳ͚Ε͹ɺ#BCFMͷެࣜυΩϡϝϯτ΋ྑ͍͔ͱࢥ͍·͢
    -FBSO&4
    IUUQTCBCFMKTJPEPDTFOMFBSO
    ڭࡐʹ͸8FC%#13&447PMΛ࢖༻

    View Slide

  22. &OIBODFE0CKFDU-JUFSBMT
    ࣄલʹ͓͍֮͑ͯͨํ͕ྑ͍ϕετ̏
    var foo = 0;
    var obj = {foo};
    // {foo: foo} ͱઃఆͨ͠ͷͱಉ͡
    // Computed (dynamic) property names
    var key = "foo";
    var obj = {
    [key]: 0,
    [key + "_bar"]: 1
    };

    View Slide

  23. 4QSFBE0QFSBUPS
    ࣄલʹ͓͍֮͑ͯͨํ͕ྑ͍ϕετ̏
    var obj = {a:1, b:2};
    var obj2 = {
    ...obj,
    c: 3
    };
    // { a:1, b:2, c:3 }
    var [one, two, three] = [1, 2, 3]
    %FTUSVDUVSJOH
    TUBUFΛߋ৽͢Δͱ͖ʹΑ͘࢖ΘΕΔ

    View Slide

  24. 0SFJMMZͷʮೖ໳3FBDUʯΛճ͠ಡΈ͠·ͨ͠ɻ
    ˞ࠓͱͳͬͯ͸಺༰ݹ͍Ͱ͢ɻ౰࣌͸͜ͷຊ͔͠ͳ͔ͬͨͱهԱɻ
    ࣄલ४උʢ3FBDUKTͷֶशʣ
    ެࣜαΠτ͔ɺ8FCͷهࣄͰ΋ྑ͍ͱࢥ͍·͢ɻ

    View Slide

  25. 2JJUBͷهࣄΛݟͳ͕Βֶश͠·ͨ͠
    3FEVYೖ໳ʲμΠδΣετ൛ʳ෼Ͱཧղ͢Δ3FEVYͷجૅ
    IUUQTRJJUBDPNLJJUBJUFNTBGCDGC
    ࣄલ४උʢ3FEVYͷֶशʣ

    View Slide

  26. ͦͷޙ͸ɺͻͨ͢Βάάͬͯௐ΂ͨɻ
    ʢଟ෼ɺҰ೔ճۙ͘͸άά͍ͬͯͨʣ
    ˠมԽ͕ܹ͘͠ݹ͍৘ใ΋ଟ͔ͬͨͷͰෳ਺αΠτͰ֬
    ೝ͢Δඞཁ͕͋ΓɺͦΕ͕େมͩͬͨɻ
    ࣮ࡍʹίʔυΛॻ͖࢝ΊΔ

    View Slide

  27. ࣮ࡍ΍ͬͯΈͯ

    View Slide

  28. SFOEFS͞Εͳ͍໰୊
    ɾ$PNQPOFOUͷίϯετϥΫλ͕ຖճݺ͹ΕΔͱצҧ͍͍ͯͨ͠ɻ
    ɾTUBUFΛ௚઀ॻ͖׵͍͑ͯͨͨΊ࠶SFEOFS͞Εͳ͔ͬͨ
    ϋϚͬͨ͜ͱ
    class App extends Component {
    constructor() {
    super();
    this.state = {
    input: “͜ΜʹͪΘ”
    };
    }
    componentWillRecieveProps(nextProps) {
    this.setState({
    input : nextProps.input
    })
    }
    }
    ίϯετϥΫλ͸Ұ౓͔͠ݺ͹Εͳ͍ͷͰɺ
    ຖճॲཧ͍ͨ͠΋ͷ͸ϥΠϑαΠΫϧϝιου
    ʹॻ͔ͳ͍ͱμϝ
    4UBUFͷߋ৽͸TFU4UBUF
    Λ࢖Θͳ͍ͱμϝ

    View Slide

  29. όάͷ੾Γ෼͚͕೉͔ͬͨ͠
    ɹಉ͡ඇಉظॲཧ͕̎ճಈ͍ͯ͠·͏໰୊͕ൃੜɻ
    3FBDU3FEVYͷόάͩͱࢥ͍ͬͯͨΒɺ+BWBଆͷόάͩͬ
    ͨͱɻ݁ہαʔόαΠυͷॲཧʹ໰୊͕͕͋ͬͨɺ
    1SPNJTFपΓͷॲཧΛࢄʑٙͬͯ͠·ͬͨɻ
    ϋϚͬͨ͜ͱ

    View Slide

  30. *&Ͱಈ͔ͳ͍໰୊
    ͣͬͱ$ISPNFͰσόοά͓ͯ͠Γɺ։ൃޙ൒ʹ*&Ͱς
    ετΛ࢝ΊͨΒಈ͔ͳͯ͘ྦ໨
    ˠOPEFMJTUGPS&BDI΍1SPNJTF͕ରԠ͍ͯ͠ͳ͍໰୊
    ɹCBCFMQPMZpMMͰࣄͳ͖ΛಘΔɻ
    ϋϚͬͨ͜ͱ

    View Slide

  31. ηογϣϯ͕੾ΕΔ
    αʔόʔଆʹॲཧ͕ඈ͹ͳ͍͕࣌ؒ௕͍ͨΊɺηογϣ
    ϯ੾ΕʹͳΓ΍͘͢ฤू಺༰͕ඈΜͩͱϢʔβ͔Βۤ৘
    ͕ʜ 3FBDUͷ໰୊Ͱ͸ͳ͍Ͱ͕͢ʣ
    ࣗಈอଘػೳΛ૊ΈࠐΈ·ͨ͠ɻ
    ϋϚͬͨ͜ͱ

    View Slide

  32. ✨K2VFSZͱͷڞଘ
    K2VFSZͷ΄͏͕ศརͳͱ͜Ζ͸࢖ͬͨɻ
    K26FSZ6*ͷ%% ϦαΠζ αϜωΠϧͳͲ
    ޻෉ͨ͜͠ͱ

    View Slide

  33. ✨ඈͼඈͼʹSFOEFS͍ͨ͠
    طଘKTQ෦඼ͷҰ෦Λ࢖͍͔ͨͬͨͷͰɺϧʔτ͸Ϩϯμ
    Ϧϯάͤͣ
    ɺαϒπϦʔΛ޷͖ͳͱ͜ʹϨϯμϦϯά͢
    Δ3FBDUίϯϙʔωϯτΛ࡞੒͠·ͨ͠ɻ
    طଘͷ+41ͷλά෦඼ͳͲΛ࢖͏ඞཁ͕͋ͬͨͨΊɻ
    ͪΐͬͱτϦοΩʔͳ͜ͱΛ͍ͯ͠Δɻ
    ࢀߟ63-IUUQTRJJUBDPNULSLUJUFNTDFBBGFBG

    ޻෉ͨ͜͠ͱ

    ͜͜Λrender

    ADD

    ͜͜Λrender

    View Slide

  34. σʔλ؅ཧͷҰݩԽ͕ग़དྷͨ
    TUBUFʹΑΓσʔλΛҰݩ؅ཧͰ͖ͨ͜ͱͰɺՄಡੑɾอ
    कੑ্͕͕ͬͨ
    ΍ͬͯΈͯΑ͔ͬͨ͜ͱ

    View Slide

  35. ίϯϙʔωϯτ୯ҐͷઃܭʹϝϦοτ͕͋ͬͨ
    w ઃܭ͠΍͍͢
    w ίʔυ΋ಡΈ΍͍͢
    w ྲྀ༻͠΍͍͢
    w ໰୊͕͋ͬͨͱ͖ͷӨڹൣғ΋গͳ͍
    ΍ͬͯΈͯΑ͔ͬͨ͜ͱ

    View Slide

  36. όά͕গͳ͔ͬͨ
    3FBDUىҼͷຊ൪όά͸ग़͍ͯͳ͍
    ΍ͬͯΈͯΑ͔ͬͨ͜ͱ

    View Slide

  37. 3FBDUKTͷόʔδϣϯΞοϓ΁ͷ௥ਵ
    ࣮͸·ͩWܥΛ࢖͓ͬͯΓɺ
    ݱࡏɺWܥ΁ͷόʔδϣϯΞοϓରԠதɻ
    ʢDPNQPOFOU8JMM3FDFJWF1SPQTͳ͘ͳͬͨΓഁյతͳม
    ߋ͕͋ͬͯগͭ͠Β͍ʣ
    ࠓޙͷ՝୊

    View Slide

  38. ଞػೳ΁ͷల։
    ৽ػೳʹ͍ͭͯ͸3FBDUΛ࢖͏΂͖͔೰ΜͰ͍Δɻ
    ͦͷޙɺ͞΄ͲෳࡶͰ͸ͳ͍ը໘Λ3FBDUΛ࢖Θͣʹ࡞ͬ
    ͕ͨɺऴΘͬͯΈΔͱ3FBDU࢖ͬͨํ͕ྑ͔ͬͨͱͷ੠΋
    ࠓޙͷ՝୊

    View Slide

  39. σ
    ΟϨΫτϦߏ੒΍ϑΝΠϧߏ੒
    ݱঢ়ɺDPNQPOFOU΋BDUJPO΋SFEVDFS΋̍ͭͷKTYϑΝΠϧ
    ʹॻ͍͍ͯ·͕͢ɺଞػೳʹ΋ల։͢ΔͳΒϑΝΠϧΛ
    ෼͚ͳ͍ͱ͍͚ͳ͍
    ࠓޙͷ՝୊

    View Slide

  40. ࣗಈςετ
    3FBDU$PNQPOFOU΋ࣗಈςετ͍͕ͨ͠ग़དྷ͍ͯͳ͍
    ࠓޙͷ՝୊

    View Slide

  41. ɾࣄલ४උ͸͋·Γ͍Βͳ͍͕ɺϧʔϧΛ֮͑Δ·Ͱ͸
    ͦΕͳΓʹେมͩͬͨ
    ɾ΍ͬͨϝϦοτ͸े෼͋ͬͨɻ
    ɾݹ͍γεςϜΛ࡮৽͍ͯ͘͠Ξϓϩʔνͱͯ͠ঃʑʹ
    3FBDUʹஔ͖׵͍͑ͯ͘ͷ͸ྑ͍͔΋͠Ε·ͤΜ
    ·ͱΊ

    View Slide

  42. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide