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

RiotからVueに移行した話 #gotandajs

mizuki_r
December 02, 2016

RiotからVueに移行した話 #gotandajs

GotandaJS #6 の資料です

mizuki_r

December 02, 2016
Tweet

More Decks by mizuki_r

Other Decks in Programming

Transcript

  1. RiotからVueに移行した話
    2016/12/02 GotandaJS #6
    @mizuki_r

    View full-size slide

  2. @mizuki_r
    (株)モバイルファクトリー
    フロントエンドエンジニア
    JS, Perl
    Angular, Vue, Riot
    “HTMLは情報設計言語です!”
    2

    View full-size slide

  3. 本日のお話

    View full-size slide

  4. 本日のお題

    View full-size slide

  5. 本日のお題
    RiotͰॻ͍͍ͯͨ΋ͷΛ
    Vueʹॻ͖׵͑ͨ࿩ɻ

    View full-size slide

  6. 本日のお題
    • ViewϑϨʔϜϫʔΫ৐Γ׵͑ͷφϨοδڞ༗
    • flux͍͍ͧ
    • view vs logicͷந৅Խେࣄ

    View full-size slide

  7. ビルド環境

    View full-size slide

  8. ビルド環境(前)
    • webpack
    • babel?preset[]=2015
    • style + css + postcss + scss
    • riot

    View full-size slide

  9. ビルド環境(後)
    • webpack
    • babel?preset[]=2015
    • style + css + postcss + scss
    • vue

    View full-size slide

  10. ビルド環境

    View full-size slide

  11. なぜVueか?

    View full-size slide

  12. 基本的なHTML,CSS,そしてJavaScript
    • ϑϨʔϜϫʔΫͷߏ଄ͱͯ͠ɺHTMLɺCSSɺ
    JS͕ͦΕͧΕଘࡏ͍ͯ͠Δ
    • expressionͷॻ͖׵͚͑ͩͰ΄΅΄΅͓ΘΔ

    View full-size slide

  13. ライフサイクル
    ·͋ͦΜͳʹࣅͯΔΘ͚͡Όͳ͍… ͕ɺ
    mount → created, mount
    unmount → unmount
    update → watch etc…
    Riot͸࠷খͷϥΠϑαΠΫϧ͔࣋ͬͯ͠ͳ͍ͷͰɺ
    Vue΁ͷҠߦ͸ָɻ

    View full-size slide

  14. jQueryの資産をそのまま活かせる
    • slick
    • masonry

    View full-size slide

  15. やったこと

    View full-size slide

  16. やったこと
    • SyntagmeͷStoreͷ஋ͷड͚औΓํΛมߋ
    • RouterΛࣗ࡞ͷ΋ͷ͔ΒVueRouter΁มߋ
    • *.tagΛ*.vue΁ॻ͖׵͑ॻ͖׵͑ॻ͖׵͑

    View full-size slide

  17. SyntagmeのStateを受け取る
    AppComponentͷcreatedͰsyntagmeͱ઀ଓ

    View full-size slide

  18. VueRouterへ
    • ·͋ͦ΋ͦ΋ݩ͕ࣗ࡞ͩͬͨΜͰ…
    • શ෦ॻ͖௚͠
    • VueRouter·͡ศར

    View full-size slide

  19. *.tag to *.vue
    • HTML to pug
    • هड़ྔతʹHTMLॻ͘ͷΊΜͲ͔ͬͨ
    • ActionCreatorͷͭͳ͗௚͠
    • γϯλοΫεͷஔ͖׵͑

    View full-size slide

  20. 戦略 - 前日談
    • ։ൃ։͔࢝ΒVueԽ͸ݟࠐΜͰ͍ͨ
    • ॳظ͸RiotͰΘʔͬͯॻ͍ͯɺVue͕͍͍̎
    ײͬ͡Ά͍৘ใ͕ग़ἧͬͨΒҠߦ͢Δ༧ఆ
    ――͕ɺ్தఀ଺ظ͕ڬ·ΓଦੑͷΑ͏ʹRiotͰॻ͍͍ͯͨɻ

    View full-size slide

  21. fluxアーキテクチャの採用
    • ࣗ࡞ϑϨʔϜϫʔΫSyntagmeͷར༻
    • Angular to Whatever༻Λ૝ఆͯ͠࡞͍͚ͬͯͨͲɺRiotͰ΋ಈ͘Μͩͥʁ
    • View͸ActionCreatorʹ৘ใΛ౉͠ɺσʔλ͸ProviderComponent͕Store͔Βड͚
    औͬͯViewಉ࢜ͰσʔλΛ఻೻ͤ͞Δઃܭɻ͜ΕʹΑΓɺActionCreatorͷ઀ଓͱ
    ProviderComponent͑͞ม͑Ε͹ଞͷViewʹҠߦ͠΍͘͢ͳΔʕʕͱ͍͏Ծઆͩͬ
    ͨ
    • ઈରʹViewʹϩδοΫΛॻ͔ͳ͍ͱ͍͏ܾҙ
    • ActionCreatorͱReducerʹॲཧΛدͤΔ͍ͬͯ͏ϥΠϯ͚ͩ͸ࢮक

    View full-size slide

  22. viewの役割
    • ActionCreatorΛୟ͘
    • DOM͔Β஋औͬͯ͘Δ
    • routerͷભҠ
    Ҏ্

    View full-size slide

  23. 小さいコンポーネントをたくさん
    • Riotͷར఺ͱͯ͠෼ׂ͕͠қ͍͜ͱΛ׆͔ͨ͠
    • ର৅ͷDOMΛ੾ΓऔΓ
    • ผϑΝΠϧʹషΓ෇͚ͯλάͰғΉ͚ͩ
    • ໨grepͰ΋୳ͤΔൣғ
    • ίϯϙʔωϯτͷ಺༰
    • ϑϨʔϜϫʔΫʹґଘͨ͠γϯλοΫ

    View full-size slide

  24. 振り返り

    View full-size slide

  25. 良かったこと
    • View : Logicͷந৅Խͷ੒ޭ
    • Vueͷtickͷॲཧ͕ૉఢ
    • ެࣜαϙʔτڧ͍
    • ೔ຊޠυΩϡϝϯτڧ͍
    • ମײύϑΥʔϚϯεͷվળ
    • Τϥʔ͕ܹݮͨ͠
    • ָ͍͠

    View full-size slide

  26. 苦労した
    • JavaScript͔ΒϖʔδભҠ
    • action-creatorͷதͰ΍͚ͬͯͨͲɺvueͰ͸Ͳ͏͢΂͖͔൑அͰ͖ͣɺcomponentʹҾ͖౉ͨ͠
    • ๞͖Δɻ௒ઈ๞͖Δɻ஌ͬͯΔ஌ݟ͚ͩͰ200ߦॻ
    ͖׵͑ͱ͔ຊ౰ʹ΋͏๞͖Δ
    • routerͷҠ২
    • ͜͜ͷڍಈ͕Ұ൪มΘΓ΍͍͢ɻશ෦reducerܦ༝ͰURLͱ͔औಘ͔ͯͨ͠Βக໋తʹ͸ͳΒ
    ͳ͔͕ͬͨɺ؊Λྫྷ΍ͨ͠
    • ΤϯτϦʔϙΠϯτ͕গͳ͔ͬͨͷͰٹΘΕͨɻଟ͔ͬͨΒઈ๬ͯͨ͠

    View full-size slide

  27. 今後
    • syntagme to vuex͢Δͷʁ
    • ͨͿΜ͠ͳ͍
    • ݱঢ়Viewʹґଘ͠ͳ͍ϩδοΫΛॻ͍͖ͯͨͷʹ͜͜
    ͰVueʹґଘ͢Δͷ͸ͪΐͬͱ
    • ϩδοΫॻ͖௚͢ͷ͸VueͷWAFॻ͖׵͑Δͷͱ͸ن
    ໛͕ҧ͏

    View full-size slide

  28. まとめ
    • RiotΛVueʹஔ͖׵͑ΔࣄྫΛ঺հ͠·ͨ͠
    • ViewʹॲཧΛॻ͔ͳ͍ͷ͕Ұ൪
    • ͦͷͨΊʹ͸flux! ֮ͦͯ͠ޛʂ
    • ઓུେࣄ
    • ਖ਼௚ਏ͍ͷͰɺҠ২Λߟ͑ͯΔਓ͸ͳΔ͸΍Ͱಈ͖·͠ΐ
    ͏

    View full-size slide

  29. ご清聴ありがとうございました

    View full-size slide