Reactでアプリケーションを構築する多様化

TechFeed Conference 2022で使用した資料
https://techfeed.io/events/techfeed-conference-2022

Twitter
https://twitter.com/__sakito__

Transcript

1. 3FBDUͰΞϓϦέʔγϣϯΛߏங
   ͢Δଟ༷Խ
   
   

   View Slide

2. 
   ࣗݾ঺հ
   ɾTBLJUP !@@TBLJUP@@
   
   ɾαΠϘ΢ζגࣜձࣾ
   ɾ%FTJHO5FDIOPMPHJTU
   ɾ3FBDU΍σβΠϯγεςϜ΍ͬͯ·͢
   

   View Slide

3. 
   3FBDU͸6*ϥΠϒϥϦͷͭ
   

   View Slide

4. 
   3FBDUͰΞϓϦέʔγϣϯΛߏங͢Δखஈ͕૿͖͑ͯͨ
   

   View Slide

5. 
   ͞·͟·ͳબ୒ࢶ͕͋Γɺ
   3FBDUΛϕʔεʹΞϓϦέʔγϣϯΛߏஙͰ͖Δ
   

   ϑϨʔϜϫʔΫ͕૿͖͑ͯͨͷͰ঺հ
   

   View Slide

6. 
   ໊લɿ/FYUKT
   ։ൃձࣾɿ7FSDFMࣾ
   63-ɿIUUQTOFYUKTPSH
   ϝδϟʔϦϦʔε೔ɿ೥݄
   ݱࡏͷόʔδϣϯɿWܥ
   w 3FBDUͷ୅දతͳϑϨʔϜϫʔΫ
   w XFCQBDL 48$ 4WFMUF 5FSCPSFQPͳͲஶ໊ͳ044։ൃऀ͕ࡏ੶
   w (PPHMFͷ044ίϥϘϨʔγϣϯ"VSPSBνʔϜɺ3FBDU$PSF5FBNͱ΋։ൃ
   w 8FC΍3FBDUͷϕετϓϥΫςΟεΛ։ൃऀϢʔβʔ྆ํ΁ఏڙ
   

   View Slide

7. 
   ໊લɿ(BUTCZ
   ։ൃձࣾɿ(BUTCZࣾ
   63-ɿIUUQTXXXHBUTCZKTDPN
   ϝδϟʔϦϦʔε೔ɿ೥݄
   ݱࡏͷόʔδϣϯɿWܥ
   w 3FBDUΛϕʔεʹͨ͠੩తαΠτδΣωϨʔλʔ
   w ςʔϚ΍ελʔλʔ΋๛෋
   w σʔλͷ΍ΓऔΓ͸جຊతʹ(SBQI2-ϕʔε
   w σʔλΛ΍ΓͱΓ͢ΔϓϥάΠϯػߏͳͲɺ
   

   8FCαΠτΛߏங͢ΔιϦϡʔγϣϯΛఏڙ͍ͯ͠Δ
   

   View Slide

8. 
   ໊લɿ3FNJY
   ։ൃձࣾɿ3FNJYࣾ
   63-ɿIUUQTSFNJYSVO
   ϝδϟʔϦϦʔε೔ɿ೥݄
   ݱࡏͷόʔδϣϯɿWܥ
   w 3FBDU3PVUFSΛ࡞͍ͬͯͨਓ͕ͨͪ࡞Γɺ3FBDU5FTUJOHMJCSBSZͷ࡞ऀ΋Ճೖ
   w 4FSWFS$MJFOU.PEFMͱ͍͏σʔλαʔόʔͱΫϥΠΞϯτͷ෼཭Λ࠾༻
   w 'PSNͷ΍ΓऔΓɺαʔόʔ্ͰͷσʔλऔಘͳͲͷιϦϡʔγϣϯͷఏڙ
   w 44(ͳͲ͸ͳ͘&EHFαʔόʔ্Ͱͷ࣮ߦͰߴ଎ͳମݧΛಘΕΔΑ͏ʹ
   w ϕϯμʔϩοΫΠϯ͞Εͳ͍ͷͰ͞·͟·ͳ؀ڥͰମݧ͕มΘΒͳ͍
   

   View Slide

9. 
   ໊લɿ#MJU[
   ։ൃձࣾɿ'MJHIUDPOUSPM
   63-ɿIUUQTCMJU[KTDPN
   ϦϦʔε೔ɿ೥݄
   ݱࡏͷόʔδϣϯɿWܥ
   w 3VCZPO3BJMTͷΑ͏ͳ3FBDUϥΠΫͷ΋ͷΛٻΊͯ։ൃ͞Εͨ
   w /FYUKT1SJTNBͰ3VCZPO3BJMTͷΑ͏ͳମݧͰΞϓϦέʔγϣϯ։ൃΛ
   w ௚ۙ'VUVSFPG#MJU[ͱͯ͠ɺ/FYUKTͷΑ͏ͳ΋ͷʹґଘ͠ͳ͍
   

   ΞʔΩςΫνϟʹมߋ͞ΕΔ༧ఆ
   w IUUQTCMJU[KTDPNEPDTCMJU[QJWPU
   w #MJU[։ൃऀͰ'MJHIUDPOUSPMͱ͍͏αʔϏεΛى͍ͯ͜͠Δ
   

   View Slide

10. 
    ໊લɿ3FEXPPE+4
    ։ൃձࣾɿͳ͠
    63-ɿIUUQTSFEXPPEKTDPN
    ϦϦʔε೔ɿ೥݄
    ݱࡏͷόʔδϣϯɿWܥ
    w (JU)VCͷڞಉ૑ۀऀͰ͋Γɺ+FLZMMͷ։ൃऀ͕ڞಉ։ൃऀ
    w ձࣾͰ͸ͳ͍͕1SFTUPO8FSOFS7FOUVSFTܦ༝ͷϑΝϯυͱͯ͠ɺ
    

    3FEXPPE4UBSUVQ'VOE͕͋Δ
    w 3FBDU(SBQI2-1SJTNBͰͷΞϓϦέʔγϣϯ։ൃΛఏڙ
    w ೝূɺςετɺ'PSNɺ3PVUFSͳͲ΋ఏڙ͞Ε͍ͯΔ
    

    View Slide

11. 
    ·ͱΊ
    w 3FBDUΛத৺ͱͨ͠ϑϨʔϜϫʔΫͷϝδϟʔόʔδϣϯϦϦʔε͕૿͖͑ͯͨ
    w ձࣾ΍αʔϏε͕എܠʹͳ͍ͬͯΔ΋ͷ͕ग़͖͍ͯͯΔ
    w ͦΕͧΕͷϑϨʔϜϫʔΫʹಛ௃͕͋Δ
    w ͜ΕΒͷ৘ใΛ௥͏͜ͱͰɺ։ൃͷঢ়گʹΑͬͯબ΂Δखࡳ͕૿͑Δ
    

    View Slide