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

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

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