stimulusの感触

Transcript

1. Stimulusͷײ৮
   

   View Slide

2. ͱ͋Δ೔
   

   View Slide

3. View Slide

4. ·ͨ৽ͨͳJavaScriptϑϨʔϜ
   ϫʔΫ͔ɻɻ
   ͱࢥ͍ͳ͕ΒɺDHH͕ݴͬͯ
   ͍ΔͷͰͱΓ͋͑ͣݟͯΈͨΒ
   

   View Slide

5. ྑͦ͞͏ͩͬͨͷͰ͝঺հ✨
   

   View Slide

6. Stimulusͱ͸
   • BasecampൃͷJavaScriptϑϨʔϜϫʔΫ
   • React.js΍Vue.jsͷΑ͏ͳJavaScriptΞϓϦέʔγϣϯΛ࡞
   ੒͢ΔϑϨʔϜϫʔΫͰ͸ͳ͍
   • খ͘͞߇͑ΊͳϑϨʔϜϫʔΫͰطଘͷHTMLΛ֦ு
   • Turbolinksͱͷௐ࿨
   ΑΓৄ͘͠͸ https://stimulusjs.org/handbook/origin
   

   View Slide

7. ஌Δ΂͖3ͭͷdataଐੑ
   ࠷௿ݶ͜ͷ3ͭΛ஌͓͚ͬͯ͹OK
   • data-controllerɿର৅ͷίϯτϩʔϥ
   • data-actionɿΠϕϯτͷτϦΨʔํ๏ͱ࣮ߦ͢Δؔ਺
   • data-targetɿίϯτϩʔϥ಺͔ΒElementΛݟ͚ͭΔ
   ͨΊͷ໊લ
   

   View Slide

8. Ͱ͸ίʔυΛݟͯΈ·͠ΐ͏
   ※GithubͷREADME(https://github.com/stimulusjs/
   stimulus/blob/v1.0.1/README.md)ΑΓൈਮ
   

   View Slide

9. 
   
   Greet
   
   
   View͔ΒԼهͷ͜ͱ͕෼͔Δ
   • data-controllerɿhelloͱ͍͏ίϯτϩʔϥʔΛར༻͢Δ
   • data-actionɿbuttonΛclick͢Δͱhelloͷgreetؔ਺͕ݺ͹ΕΔ
   • data-targetɿhelloίϯτϩʔϥʔͰnameͱoutput͕ࢀর͞ΕΔ
   

   View Slide

10. [src/controllers/hello_controller.js]
    import { Controller } from "stimulus"
    export default class extends Controller {
    static targets = [ "name", "output" ]
    greet() {
    this.outputTarget.textContent =
    `Hello, ${this.nameTarget.value}!`
    }
    }
    

    View Slide

11. γϯϓϧͳͷ͸෼͔͕ͬͨɺ
    Կ͕͍͍ͷʁ
    

    View Slide

12. طଘͷCoffeescriptͰײ͡Δ՝୊
    • ର৅ͷViewͰ͔͠ಈ࡞͠ͳ͍Α͏ʹ͢Δ޻෉
    • SprocketsʹΑΓ1ͭͷjsϑΝΠϧʹ·ͱΊΒΕΔ͔Βશͯͷjs͕ಈ͍ͯ͠·͏
    • ୅දతͳʁbodyʹdata-controller,data-actionΛఆٛ͢Δ΍ͭ
    • Πϕϯτϋϯυϥ͕Ͳ͜Ͱઃఆ͞Ε͍ͯΔ͔
    • ܦݧ্ɺ΄ͱΜͲ͕onClick΍onChangeͳͲͷΠϕϯτఆٛʹͳΔ
    • ্هͷ޻෉ͰϑΝΠϧ͸ಛఆͰ͖Δ͕ɺView͔ΒԿ͕ઃఆ͞Ε͍ͯΔ͔͸෼͔Βͳ͍
    • common.coffeeͱ͔utils.coffeeΈ͍ͨͳͷ͕͋ͬͨΒɻɻɻ
    • ES201xͷைྲྀ
    • ໾ׂΛऴ͑ͭͭ͋ΔCoffeescript
    

    View Slide

13. ͦ͜ͰɺStimulus (+webpacker)
    Stimulus (+webpacker)ʹΑͬͯCoffeescriptͷ՝୊͕ղܾ
    • ର৅ͷViewͰ͔͠ಈ࡞͠ͳ͍Α͏ʹ͢Δ޻෉
    • Stimulus͕୲ͬͯ͘ΕΔ
    • Πϕϯτϋϯυϥ͕Ͳ͜Ͱઃఆ͞Ε͍ͯΔ͔
    • Stimulusͷdata-actionʹΑΓView͔Βର৅͕෼͔Δ
    • ES201xͷைྲྀ
    • webpackerͰ؆୯ʹಋೖ
    

    View Slide

14. ·ͱΊ
    Stimulus͸
    • SPAΛߏங͢ΔJavascriptϑϨʔϜϫʔΫͰ͸ͳ͍͕
    • ViewͱJS͕ରʹͳΔͷͰՄಡੑ/อकੑ͕͕͋Γͦ͏
    • ͳͷͰɺඇSPAͰ͋Δఔ౓ಈ͖ͷ͋ΔΞϓϦ։ൃʹྑͦ͞͏
    • طଘCoffeescript→ES201x΁Ҡߦ͢Δ࣌ͷ͓ڙʹ΋
    

    View Slide