RailsエンジニアがStimulus + 生JSだけで約半年のプロジェクトを終えた今思うこと

Transcript

1. 3BJMTΤϯδχΞ͕
   4UJNVMVT
   
   ੜ+4͚ͩͰ
   ໿൒೥ͷϓϩδΣΫτΛऴ͑ͨࠓࢥ͏͜ͱ ಙݩ
   কٛʢ!NBTBʣ
2. ࣗݾ঺հ w ಙݩ
   কٛʢͱ͘΋ͱɹ·͞Α͠ʣ
   w ԭೄग़਎
   w גࣜձࣾΈΜͳͷ΢ΣσΟϯά
   w 3VCZ3BJMT+BWB4DSJQUK2VFSZ4UJNVMVT(P
3. ݴ͍͍ͨ͜ͱ w 3BJMTΤϯδχΞ͕γϯϓϧͳػೳΛ+4Ͱ࣮૷͢Δ࣌͸ K2VFSZΛͿΜճ͢ΑΓ΋4UJNVMVT ੜͷ +BWB4DSJQU ΛબͿํ͕ͣͬͱྑͦ͞͏
   w ͨͩ͠ɺ+BWB4DSJQUͰ؆ܿʹॻͨ͘Ίͷ஌ݟ͕ʢຊਓɾ ࣾ಺ʹʣແ͍ͱԕճΓͯ͠͠·͏ڪΕ͕͋ΔͷͰ஫ҙ
4. ϓϩδΣΫτͰ΍ͬͨ͜ͱʢҰ෦ʣ w +4ͷϑϨʔϜϫʔΫͱ+4ͷςεςΟϯάϑϨʔϜϫʔΫͷબ ఆɾಋೖ
   w ෳ਺ຕͷը૾ΛඇಉظͰ"84ͷ4΁μΠϨΫτΞοϓϩʔυ
   w ࣜ৔໊ͷαδΣετػೳͷ࣮૷
   w Ϣʔβʔͷॻ͖ࠐΈ಺༰ͷࣗಈอଘػೳͷ࣮૷
5. ϓϩδΣΫτͰ΍ͬͨ͜ͱʢҰ෦ʣ w +4ͷϑϨʔϜϫʔΫͱ+4ͷςεςΟϯάϑϨʔϜϫʔΫͷબఆɾಋ ೖ
   w ෳ਺ຕͷը૾ΛඇಉظͰ"84ͷ4΁μΠϨΫτΞοϓϩʔυ
   w ॺ໊͖ͭ63-ͷऔಘ
   w σʔλͷૹ৴
   w αϜωΠϧͷදࣔ
   w ࣜ৔໊ͷαδΣετػೳͷ࣮૷
   w Ϣʔβʔͷॻ͖ࠐΈ಺༰ͷࣗಈอଘػೳͷ࣮૷ ࠓ೔͸͜ͷ̎ͭʹ͍ͭͯ৮Εͳ͕Β
   4UJNVMVT΍+4ʹ͍ͭͯ࿩͠·͢
6. ͖͔͚ͬ͸ʮK2VFSZ୤٫ʯ w K2VFSZ͸ศར͗͢Δ
   w Πϕϯτͱͷόϯυϧɺ%0.ૢ࡞ɺΞχϝʔγϣϯɺ"KBYʜ
   w ຕͷϑΝΠϧͰશ෦Ͱ͖ͯ͠·͏
   w +4ʹৄ͍͠Θ͚Ͱ͸ͳ͍αʔόʔαΠυΤϯδχΞ͕ॻ͘
   w Ԛ͍ίʔυͰॻ͔Εͯ͠·͏ʢແ๏஍ଳʣ
   w K2VFSZ͸ݹ͍ϑϨʔϜϫʔΫ
   w ϒϥ΢βؒͷ͕ࠩॖ·Γͭͭ͋Δ
   w ৽͍͠ϓϩδΣΫτͰΘ͟Θ͟࢖͏ʁ
   w ৽ଔ͸͔ΒֶͿ΂͖ʁ
7. ৽͍͠ϑϨʔϜϫʔΫͱ
   ςεςΟϯάϑϨʔϜϫʔΫͷબఆ w ϑϨʔϜϫʔΫ͸4UJNVMVT
   w ͖͔͚ͬ͸ΤϯδχΞͷ্͕࢘ʮྑͦ͞͏͔ͩΒௐ΂ͯΈͯʯͱݴͬͨ͜ͱ
   w 3BJMTΤϯδχΞ͕੹຿Λ෼͚ͯॻ͖΍ͦ͢͏ʢ#BTFDBNQ͕࡞ͬͨʣ
   w γϯϓϧͰ͋Δʢֶशίετ͕௿͘ɺػೳ͸࠷௿ݶʣ
   w ςεςΟϯάϑϨʔϜϫʔΫ͸+FTU
   w 34QFDʹࣅͨॻ͖ํͰ਌ۙײ͕͋Δ
   w ͜Ε͔Β౰ࣾͰ࢖͏͔΋͠Εͳ͍ʢͱݴΘΕ͍ͯͨʣ3FBDUͱ΋਌࿨ੑ͕͋ Δ
8. 4UJNVMVTͱ͸ 4UJNVMVT
   JT
   B
   +BWB4DSJQU
   GSBNFXPSL
   XJUI
   NPEFTU
   BNCJUJPOT
   6OMJLF
   PUIFS
   GSBNFXPSLT
   4UJNVMVT
   EPFTO`U
   UBLF
   PWFS
   ZPVS
   BQQMJDBUJPO`T
   FOUJSF
   GSPOUFOE
   3BUIFS
   JU`T
   EFTJHOFE
   UP
   BVHNFOU
   ZPVS
   )5.-
   CZ
   DPOOFDUJOH
   FMFNFOUT
   UP
   +BWB4DSJQU
   PCKFDUT
   BVUPNBUJDBMMZ
   Ҿ༻ݩɿIUUQTTUJNVMVTKTPSHIBOECPPLJOUSPEVDUJPO
9. 4UJNVMVTͱ͸ <div data-controller="hello"> <input data-target="hello.name" type="text"> <button data-action="click->hello#greet">Greet</button> <span data-target="hello.output"></span> </div> // hello_controller.js import { Controller } from "stimulus" export default class extends Controller { static targets = [ "name", "output" ] greet() { this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!` } }
10. ϥΠϒϥϦΛ࢖͍ͬͯͳ͍ਏΈ
 ʢͷҰ෦ʣ
11. %0.ͷੜ੒͕ਏ͍ @DSFBUF5IVNCOBJM'JFME EBUB
    \
    
    
    DPOTU
    UIVNCOBJM'JFME-JTU
    
    EPDVNFOURVFSZ4FMFDUPS AKT@\UIJTDBUFHPSZ^UIVNCOBJMpFMEMJTUA
    
    
    DPOTU
    UIVNCOBJM'JFME8SBQQFS
    
    EPDVNFOUDSFBUF&MFNFOU EJW
    
    
    UIVNCOBJM'JFME8SBQQFSEBUBTFUDPOUSPMMFS
    
    TUSJOHDPVOUFS
    
    
    UIVNCOBJM'JFME8SBQQFSEBUBTFUUBSHFU
    
    UIVNCOBJMpFMEJUFN
    
    
    UIVNCOBJM'JFME8SBQQFSEBUBTFUTUSJOH$PVOUFS.BY
    
    
    
    
    UIVNCOBJM'JFME8SBQQFSDMBTT/BNF
    
    QPTUQJDUVSFTBUUBDINFOUT
    
    
    DPOTU
    UIVNCOBJM'JFME#BDLHSPVOE
    
    EPDVNFOUDSFBUF&MFNFOU EJW
    
    
    UIVNCOBJM'JFME#BDLHSPVOEDMBTT/BNF
    
    PTDPOUBJOFSCBDLHSPVOE
    
    
    UIVNCOBJM'JFME#BDLHSPVOEDMBTT-JTUBEE CBDLHSPVOEDPMPSHPME
    
    
    UIVNCOBJM'JFME#BDLHSPVOEDMBTT-JTUBEE NBSHJOCPUUPN.
    
    
    DPOTU
    IJEEFO0CKFDU,FZ
    
    UIJTDSFBUF)JEEFO0CKFDU,FZ EBUBPCKFDU,FZ
    
    
    DPOTU
    IJEEFO$BUFHPSZ
    
    UIJTDSFBUF)JEEFO$BUFHPSZ
    
    
    DPOTU
    IJEEFO$POUFOU5ZQF
    
    UIJTDSFBUF)JEEFO$POUFOU5ZQF SFWJFX
    
    
    UIJT@DSFBUF3FWJFX5IVNCOBJM'JFME \
    
    
    
    
    EBUB
    
    
    
    
    UIVNCOBJM'JFME#BDLHSPVOE
    
    
    
    
    IJEEFO0CKFDU,FZ
    
    
    
    
    IJEEFO$POUFOU5ZQF
    
    
    
    
    IJEEFO$BUFHPSZ
    
    
    ^
    
    
    UIVNCOBJM'JFME8SBQQFSBQQFOE$IJME UIVNCOBJM'JFME#BDLHSPVOE
    
    
    UIVNCOBJM'JFME-JTUBQQFOE$IJME UIVNCOBJM'JFME8SBQQFS
    ^ ͜ͷதͰͭͭͷཁૉΛ
    ಉ͡ཁྖͰҰੜݒ໋࡞ͬͯΔ
12. %0.ͷੜ੒͕ਏ͍ w ʮ࡟আϘλϯʯʮαϜωΠϧʯʮઆ໌จʯͱ%0.Λੜ੒ ͢ΔϝιουΛ෼͚ͯ΋ɺͦͷத͕DSFBUF&MFNFOU
    TFU"UUSJCVUF
    BQQFOE$IJMEͷ܁Γฦ͠
    w σβΠϯ͕มߋʹͳΔͱσβΠφʔ͞ΜʹϚΠφεͷΦʔ ϥΛ์ͬͯ͠·͏ࣗ෼͕͍Δʢະख़ʣ
    w ͍͍αʔϏε͕࡞Γ͍ͨͷ͸ಉ͡ؾ࣋ͪͳͷʹɾɾɾ
13. ͦͷ࣌ͷࣗ෼ 4UJNVMVTͱ͔
    ੜͷ+4͡Όμϝͩɻ
    K2VFSZͳΒ·ͩϚγͳ Μ͡Όʢུʣ Ծ૝%0.Λѻ͏ϥΠϒ ϥϦΛ࢖͏ͷ͕͍͍Μ͡Ό ͳ͍ʢࡶʣ
14. ઌഐ͕ϦϑΝΫλϦϯά
15. ઌഐ͕ϦϑΝΫλϦϯά w ը૾Ξοϓϩʔυॲཧ͕ऴΘͬͨΒ.VUBUJPOPCTFSWFS ͰPCTFSWF͍ͯ͠ΔཁૉͷEBUBଐੑͷ஋Λ+40/จࣈྻͱ ͯ͠౉͢
    w ಉҰ7JFXϑΝΠϧͰEJTQMBZ
    OPOFͰϨϯμϦϯά͍ͯ͠ ΔαϜωΠϧͷςϯϓϨʔτΛ$MPOFͯ͠࢖͍ɺαϜωΠ ϧΛ࡞੒͢Δ
16. ͦͷ࣌ͷࣗ෼ ࣗ෼ͷܦݧ΍஌͕ࣝ ଍Γ͍ͯͳ͔ͬͨͩ ͚͔ͩͬͨ΋ ͝ΊΜ4UJNVMVTɺ
    ͝ΊΜ+4ɾɾɾ
17. ݴ͍͍ͨ͜ͱʢ࠶ܝʣ w 3BJMTΤϯδχΞ͕γϯϓϧͳػೳΛ+4Ͱ࣮૷͢Δ࣌͸ K2VFSZΛͿΜճ͢ΑΓ΋4UJNVMVT ੜͷ +BWB4DSJQU ΛબͿํ͕ͣͬͱྑͦ͞͏
    w ͨͩ͠ɺੜͷ+BWB4DSJQUͰ؆ܿʹॻͨ͘Ίͷ஌ݟ͕ʢຊ ਓɾࣾ಺ʹʣແ͍ͱԕճΓͯ͠͠·͏ڪΕ͕͋ΔͷͰ஫ҙ
18. ͓·͚ 4UJNVMVTͰ%0.ͷੜ੒Λ؆୯ʹͯ͘͠ΕΔ࢓૊Έ͕ͳ͍ͷ͸ɺ 3BJMTͷ5VSCPMJOLTͱҰॹʹ࢖͏ͷ͕૝ఆ͞Ε͍ͯΔ͔Βʢͩ ͱࢥ͏ʣ
    ࢀߟʢXJMMOFU͞ΜͷεϥΠυʣɿIUUQTTQFBLFSEFDLDPNXJMMOFUTUJNVMVT
    w αϜωΠϧදࣔʹ͍ͭͯϦϑΝΫλϦϯά͞Εͨ಺༰͸ɺ5VSCPMJOLT Λ༗ޮʹͨ͠ঢ়ଶͰ)5.-Λ࠶ϨϯμϦϯάͨ͠ঢ়ଶʹࣅ͍ͯΔ
    w %0.Λͦͷ··͓͍࣋ͬͯͯࠩ෼ͷΈΛදࣔ͢Δͱ͍͏ҙຯͰ͸Ծ ૝%0.ʹ΋ࣅ͍ͯΔ
19. ͋Γ͕ͱ͏͍͟͝·ͨ͠