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

Stimulusと他のフレームワークとの比較 / Comparison with Stimulus

aikyo
September 27, 2019

Stimulusと他のフレームワークとの比較 / Comparison with Stimulus

aikyo

September 27, 2019
Tweet

More Decks by aikyo

Other Decks in Technology

Transcript

  1. StimulusͱଞͷϑϨʔϜϫʔ
    Ϋͱͷൺֱ
    @aikyo02

    View full-size slide

  2. Stimulusͱ͸
    HTML͕طʹ͋Δͱ͖޲͚ͷ߇͑ΊͳϑϨʔϜ
    ϫʔΫ
    (A modest JavaScript framework for the HTML
    you already have.)
    https://stimulusjs.org/

    View full-size slide

  3. ίʔυྫ(html)

    View full-size slide

  4. ίʔυྫ(JavaScript)

    View full-size slide

  5. StimulusͱଞͷϑϨʔϜϫʔΫ
    ͱͷൺֱ
    • Stimulus͸SPAͰ͸࢖͑ͳ͍ͷͰɺඇSPAͱ͠
    ͯൺֱ͢Δɻ

    View full-size slide

  6. ෼཭
    • Stimulus: controller Λ࠶ར༻Մೳʹ͢Δ͜ͱ
    ͕ਪ঑͞Ε͍ͯΔɻ
    • Vue, Reactͷίϯϙʔωϯτʹ͍ۙɻ

    View full-size slide

  7. ςϯϓϨʔτΤϯδϯ
    • Stimulus : ૉͷhtml
    • Vue : VueςϯϓϨʔτ(htmlʹσʔλόΠϯ
    σΟϯάͱಠࣗͷσΟϨΫςΟϒΛՃ͑ͨ΋
    ͷ)
    • React : JSX (htmlΛJavaScriptͰදݱ͍ͯ͠Δ)

    View full-size slide

  8. StimulusͷϝϦοτ
    • ಋೖͷίετ͕গͳ͍ɻ(jQueryͱ΋ڞଘͰ͖
    Δ)
    • ബ͍ϑϨʔϜϫʔΫͳͷͰࣺͯ΍͍͢ɻ

    View full-size slide

  9. StimulusͷσϝϦοτ
    • SPA͸ෆՄೳɻ(turbolinksͱͷซ༻ͰSPA෩ʹ
    ͸Ͱ͖Δ)
    • DOMΛಈతʹଟ͘มߋ͢ΔΑ͏ͳΞϓϦέʔ
    γϣϯͷ৔߹͸޲͔ͳ͍ɻ

    View full-size slide

  10. Stimulus͕Αͦ͞͏ͳͱ͖
    • ϑϨʔϜϫʔΫͷಋೖʹ͋·ΓϦιʔεΛׂ
    ͚ͳ͍ͱ͖
    • ։ൃϝϯόʔ͕JavaScriptϑϨʔϜϫʔΫʹश
    ख़͍ͯ͠ͳ͍ͱ͖

    View full-size slide

  11. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View full-size slide