$30 off During Our Annual Pro Sale. View Details »

私が考えるReactのよさ #fukuokajs

私が考えるReactのよさ #fukuokajs

Hiroyuki ANAI

February 26, 2019
Tweet

More Decks by Hiroyuki ANAI

Other Decks in Programming

Transcript

  1. 'VLVPLB+4
    !QJSPTJLJDL
    5VF

    View Slide

  2. w ݀Ҫ޺޾
    w !QJSPTJLJDL
    w ϠϑʔגࣜձࣾΤϯδχΞ
    w "QFY-FHFOETʹڵຯ͕͋Γ·͢
    w 'BSDSZ/FX%BXOʹڵຯ͕͋Γ·͢
    w %BZT(POFʹʢҎԼུʣ

    View Slide

  3. 3FBDUೖ໳ʢᠳӭࣾʣ
    ڞஶ
    8%#13&44

    ࿈ࡌʮͲΜͱ͍͜ϑϩϯτΤϯυ։ൃʯ
    ࿈ࡌ࠷ऴճʂ

    View Slide

  4. ΑΖ͘͠
    ͓ئ͍க͠·͢

    View Slide

  5. View Slide

  6. ొஃऀͷํʑ͔Β͸ɺ

    ʮ˓˓͕޷͖ʂʯ

    ʮ˓˓͕ັྗʂʯ

    ʮ͕͜͜࠷ߴʂʯ

    ͳͲɺ

    ؾͷෝ͘··ʹ͓࿩͍ͯͨͩ͜͠͏ͱ

    ࢥ͍·͢ʂ

    View Slide

  7. ࢲ͕ߟ͑Δ3FBDUͷΑ͞
    w γϯϓϧ͞
    w %9ͷΑ͞
    w એݴతʹ6*ΛఆٛͰ͖Δ

    View Slide

  8. Α͞ᶃɿγϯϓϧ͞

    View Slide

  9. 3FBDUͷγϯϓϧ͞
    w ʮ"+BWB4DSJQUMJCSBSZGPSCVJMEJOHVTFSJOUFSGBDFTʯ
    w ͣͬͱมΘͬͯͳ͍
    w 3FBDU୯ମͰΞϓϦέʔγϣϯΛ࡞Δ͜ͱ͸ك
    w Կ͔ͱ૊Έ߹Θͤͯ։ൃ
    w 3FEVYɺίϯϙʔωϯτूFUD

    View Slide

  10. ݸਓͷ޷Έ͔΋͠Εͳ͍
    w ϞϊϦεͱൺ΂ΔͱϝϦσϝ͋Δͱࢥ͏
    w γϯϓϧͳύʔπΛ૊Έ߹ΘͤͯɺશମΛߏங͢Δ
    w ύʔπຖʹཧղ͢Ε͹Α͍ͷͰɺཧղ͠΍͍͢
    w ύʔπ୯ҐͰަ׵Մೳ
    w ։ൃπʔϧ͸ϞϊϦγοΫͰɺ

    ϥΠϒϥϦ͸γϯϓϧͳ΋ͷͷ૊Έ߹Θ͕ͤݸਓతͳ޷Έ

    View Slide

  11. Α͞ᶄɿ%9

    View Slide

  12. %9
    w %FWFMPQFS&YQFSJFODFʹ։ൃऀͷମݧ
    w %9%FWFMPQFS&YQFSJFODFʢ։ൃମݧʣ͸ॏཁͩ

    IUUQTHGYIBUFOBCMPHDPNFOUSZ
    w %9͸69ͷҰछͰ͋Δ
    w %9͕Α͍ͱ೔ʑͷ։ൃΛָ͠ΊΔΑ͏ʹͳΓɺ

    ؾ࣋ͪʹ༨༟͕Ͱ͖Δ
    w %9͕ѱ͍ͱ։ൃΛָ͠Ίͣɺ

    ʮఆΊΒΕͨλεΫʯҎ֎ͷ͜ͱΛͨ͘͠ͳ͘ͳΔ

    View Slide

  13. ϥΠϒϥϦɾϑϨʔϜϫʔΫ
    ͷ%9
    w υΩϡϝϯτ͕ἧ͍ͬͯΔ͔ɺ຋༁͞Ε͍ͯΔ͔
    w σόοάπʔϧ͕͋Δ͔
    w ΤίγεςϜͱ਌࿨ੑ͕͋Δ͔
    w FY
    &4-JOUɺ5ZQF4DSJQUʹରԠ͍ͯ͠Δ͔ʁ

    View Slide

  14. w &4-JOU 5ZQF4DSJQUͱͷ૬ੑ͸͔ͳΓ͍͍
    w ࢖͍࢝Ίͨࠒʢ೥ɺόʔδϣϯ͕͘Β͍ ʣ

    पลπʔϧͷରԠ͕Α͔ͬͨهԱ
    w &4-JOUͷ+49ରԠ͸೥݄ɺ

    #BCFMʢUPʣ΋೥݄ʹ͸+49αϙʔτ͍ͯͨ͠
    3FBDUͷ%9

    View Slide

  15. 3FBDUͷ%9
    w 3FBDU%FW5PPMTʢެࣜʣ
    w 6TFS5JNJOH"1*Λ࢖ͬͯͷϓϩϑΝΠϦϯά
    w $ISPNF%FW5PPMTͷύϑΥʔϚϯελϒʹදࣔ͞ΕΔ

    IUUQTSFBDUKTPSHEPDTPQUJNJ[JOHQFSGPSNBODFIUNMQSPpMJOHDPNQPOFOUTXJUIUIF
    DISPNFQFSGPSNBODFUBC

    View Slide

  16. 3FBDUͷ%9
    w ࠷ۙɺυΩϡϝϯτ΋຋༁͞Εͨ
    IUUQTKBSFBDUKTPSH

    View Slide

  17. Α͞ᶅɿ

    એݴతʹ6*Λهड़Ͱ͖Δ

    View Slide

  18. View Slide

  19. ໋ྩతɾએݴత
    w ݸਓతͳղऍ
    w ໋ྩతɿ

    ʢ໨తΛୡ੒͢ΔͨΊͷʣखॱɾखଓ͖Λॻ͘
    w એݴతɿ

    ໨తΛॻ͘ʢͱखॱɾखଓ͖͸উखʹ΍ͬͯ͘ΕΔʣ

    View Slide

  20. ໋ྩతɾએݴత
    w 3FBDUʹ౰ͯ͸ΊΔ
    w 6*ͷߏ଄Λએݴ͢Δ

    ʢͱɺखଓ͖ɾखॱ͸উखʹ΍ͬͯ͘ΕΔʣ
    w खଓ͖ɾखॱ

    σʔλͷ௥Ճɾมߋɾ࡟আʹର͢Δޮ཰తͳ%0.ͷߋ৽
    w Ծ૝%0.͕Χόʔ

    View Slide

  21. +49
    w +BWB4DSJQUͷதʹ)5.-λά͕هड़Ͱ͖Δߏจ
    w 6*Λએݴతʹهड़Ͱ͖Δ
    w ͨͩͷ3FBDUDSFBUF&MFNFOUͷ౶ҥߏจɺม׵ޙͷ༧ଌָ͕
    w એݴతʹهड़Ͱ͖Δ͕+4ͷ࿮Λେ͖͘֎Ε͍ͯͳ͍
    ͜Ε͕+49

    View Slide

  22. 3FBDU)PPLTͰ
    DMBTTίϯϙʔωϯτ΋એݴతʹ
    w 3FBDUʹ͸ɺίϯϙʔωϯτΛॻ͘ํ๏͕ͭ
    w ؔ਺PSΫϥε
    w ίϯϙʔωϯτͰঢ়ଶ΍ϥΠϑαΠΫϧͷར༻͕

    ඞཁͳ৔߹ɺΫϥεͰॻ͘ඞཁ͕͋ͬͨ

    View Slide

  23. 3FBDU)PPLTͰ
    DMBTTίϯϙʔωϯτ΋એݴతʹ
    w 3FBDU)PPLT
    w ؔ਺ίϯϙʔωϯτͰঢ়ଶ΍ϥΠϑαΠΫϧΛ

    ѻ͏࢓૊Έ
    w 3FBDUͰ௥Ճ

    View Slide

  24. ྫʣը໘αΠζͷऔಘ
    DMBTTίϯϙʔωϯτ൛

    View Slide

  25. ྫʣը໘αΠζͷऔಘ
    DMBTTίϯϙʔωϯτ൛
    ໨తΛୡ੒͢ΔͨΊͷखଓ͖

    View Slide

  26. ྫʣը໘αΠζͷऔಘ
    DMBTTίϯϙʔωϯτ൛
    ঢ়ଶΛѻ͏෦෼
    ϥΠϑαΠΫϧΛѻ͏෦෼

    View Slide

  27. ྫʣը໘αΠζͷऔಘ
    3FBDU)PPLT൛
    ը໘αΠζΛ࢖͏͜ͱΛએݴ

    View Slide

  28. w VTF8JOEPX4J[F
    w ը໘αΠζΛࢀর͢Δ͜ͱΛએݴ
    w SFNPWF&WFOU-JTUFOFS౳ͷखଓ͖͸એݴͷཪʹӅṭ
    w એݴతʹهड़Ͱ͖Δ͜ͱͰ໨త͕໌֬ʹͳΔ

    View Slide

  29. ·ͱΊ
    w 3FBDUKTɺ͍͍Αʙ
    w 3FBDU)PPLTͰΑΓΑ͘ͳͬͨΑʙ
    w ϑϨʔϜϫʔΫɾϥΠϒϥϦಉ࢜Ͱ͍͍ͱ͜ΖΛ

    औΓೖΕ͍͋ͬͯΔͷͰɺ΄΅ಉ͜͡ͱ͕Ͱ͖Δ

    View Slide

  30. ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠

    View Slide