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

stimulusの感触

 stimulusの感触

masaru-tech

February 25, 2018
Tweet

More Decks by masaru-tech

Other Decks in Programming

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