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

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

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

Ae66fee98da28827d5404ae085f75223?s=128

Masayoshi Tokumoto

February 21, 2019
Tweet

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ͱ͸ 4UJNVMVTJTB+BWB4DSJQUGSBNFXPSLXJUINPEFTUBNCJUJPOT 6OMJLFPUIFSGSBNFXPSLT 4UJNVMVTEPFTO`UUBLFPWFSZPVS BQQMJDBUJPO`TFOUJSFGSPOUFOE3BUIFS JU`TEFTJHOFEUP BVHNFOUZPVS)5.-CZDPOOFDUJOHFMFNFOUTUP +BWB4DSJQUPCKFDUTBVUPNBUJDBMMZ Ҿ༻ݩɿ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 \ DPOTUUIVNCOBJM'JFME-JTUEPDVNFOURVFSZ4FMFDUPS AKT@\UIJTDBUFHPSZ^UIVNCOBJMpFMEMJTUA  DPOTUUIVNCOBJM'JFME8SBQQFSEPDVNFOUDSFBUF&MFNFOU EJW 

    UIVNCOBJM'JFME8SBQQFSEBUBTFUDPOUSPMMFSTUSJOHDPVOUFS UIVNCOBJM'JFME8SBQQFSEBUBTFUUBSHFUUIVNCOBJMpFMEJUFN UIVNCOBJM'JFME8SBQQFSEBUBTFUTUSJOH$PVOUFS.BY UIVNCOBJM'JFME8SBQQFSDMBTT/BNFQPTUQJDUVSFTBUUBDINFOUT DPOTUUIVNCOBJM'JFME#BDLHSPVOEEPDVNFOUDSFBUF&MFNFOU EJW  UIVNCOBJM'JFME#BDLHSPVOEDMBTT/BNFPTDPOUBJOFSCBDLHSPVOE UIVNCOBJM'JFME#BDLHSPVOEDMBTT-JTUBEE CBDLHSPVOEDPMPSHPME  UIVNCOBJM'JFME#BDLHSPVOEDMBTT-JTUBEE NBSHJOCPUUPN.  DPOTUIJEEFO0CKFDU,FZUIJTDSFBUF)JEEFO0CKFDU,FZ EBUBPCKFDU,FZ  DPOTUIJEEFO$BUFHPSZUIJTDSFBUF)JEEFO$BUFHPSZ  DPOTUIJEEFO$POUFOU5ZQFUIJTDSFBUF)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ϑΝΠϧͰEJTQMBZOPOFͰϨϯμϦϯά͍ͯ͠ ΔαϜωΠϧͷςϯϓϨʔτΛ$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. ͋Γ͕ͱ͏͍͟͝·ͨ͠