Vue.js + Vuexチーム開発実践の事例

Vue.js + Vuexチーム開発実践の事例

Frontend Conference Fukuoka 2018
https://frontend-conf.fukuoka.jp/sessions#b-7 #fec_fukuoka

B7bf4e80841a44f921665e88d874f2c3?s=128

Hiroaki Ninomiya

December 08, 2018
Tweet

Transcript

  1. 5.

    ࣗݾ঺հ • Hiroaki Ninomia a.k.a treby • Reproגࣜձࣾ αʔόαΠυΤϯδχΞ •

    Shinjuku.rb Organizer • RubyͷΤϯδχΞίϛϡχςΟ • ෱Ԭग़਎(༗໌ߴઐˠ۝भେֶେֶӃ)
  2. 8.
  3. 9.

    Reproגࣜձࣾ • 2014೥ઃཱͷελʔτΞοϓاۀ • https://repro.io/ • BtoB SaaS • ࣗࣾϓϩμΫτRepro

    SDKΛ։ൃ • ϞόΠϧΞϓϦͷ෼ੳɾϚʔέςΟϯά༻్ • ಛఆηάϝϯτʹ؆୯ʹϓογϡ௨஌͕ଧͯΔ • ݱࡏɺઈࢍٸ੒௕த
  4. 17.

    ར༻ٕज़ • Πϯϑϥɿ AWS • ݴޠ • Ruby(Rails) • Python(AI෼໺)

    • Golang(ϓογϡ௨஌ج൫) • (ڧ͍ͯݴ͏ͳΒ͹)Rubyͷձࣾ • ʰύʔϑΣΫτRubyʱͷڞஶऀ͕CTO
  5. 18.

    ։ൃνʔϜ • શ෦Ͱ6νʔϜ΄Ͳ • SDK։ൃ(iOS / Android) • όοΫΤϯυ •

    ΞϓϦέʔγϣϯ։ൃ • ΠϯϑϥνʔϜ • AIνʔϜ • CRE(ςΫχΧϧαϙʔτ) • QA
  6. 19.

    ։ൃνʔϜ • શ෦Ͱ6νʔϜ΄Ͳ • SDK։ൃ(iOS / Android) • όοΫΤϯυ •

    ΞϓϦέʔγϣϯ։ൃ ɿϑϩϯτΤϯυ΋؅׋ • ΠϯϑϥνʔϜ • AIνʔϜ • CRE(ςΫχΧϧαϙʔτ) • QA
  7. 22.

    Vuejs • Progressive Framework • Declarative Rendering • Two-way Binding

    • An incrementally adoptable Ecosystem • ࠷খݶʹ࢝ΊΒΕΔ͜ͱ͔ΒಋೖΛܾఆ
  8. 24.

    Ruby on Rails (Rails) • ελʔτΞοϓͰਓؾͷϑϨʔϜϫʔΫͷҰͭ • ઃఆΑΓن໿(Convention over Configuration)

    • ʮRails͕ॻ͚Δʯ͜ͱ͕୲อͰ͖Ε͹େମͲ͜Ͱ΋׆༂Ͱ͖Δ • ࢓૊ΈΛ஌Βͳ͍ঢ়ଶͰಡΉͱԿ͕ى͍ͬͯ͜Δ͔෼͔Βͳ͍ ͱ͍͏ܽ఺΋ • όονॲཧ΍SDKͱͷ΍ΓऔΓ༻APIͳͲଟ͘ͷ෦෼Ͱ࢖ΘΕͯ ͍Δ
  9. 34.

    αʔόαΠυτϨϯυͷมԽ(Railsͷ όʔδϣϯ) • v4.0.0(2013/06): RubyͷΤίγεςϜʹJavaScript • v4.2.0(2014/12) • v5.0.0(2016/07): Action

    Cable / Rails API • v5.1.0(2017/04): Webpack / jQuery͕default͔Βফ͑Δ • v5.2.0(2018/04) • v6.0.0(༧ఆ): CoffeeScript͕ES6ʹஔ͖׵ΘΔ • https://github.com/rails/rails/pull/33079
  10. 36.

    Rails Assets • Rails Assets is the frictionless proxy between

    Bundler and Bower. • ϑϩϯτΤϯυͷϥΠϒϥϦ͸ xxx-rails ͷΑ͏ͳ໊લͰఏ ڙ͞Ε͍ͯΔ΋ͷ͕͕͋ͬͨ • JavaScriptଆ(ຊՈ)΁ͷ௥ै͕஗͍ͱ͍͏χʔζʹͨ͑ͨ͜ αʔϏε • rails-assets-xxx ͷ໊લͰGemԽ͞ΕΔ
  11. 37.

    Rails4ܥͰͷGemfileྫ source 'https://rubygems.org' # Bundle edge Rails instead: gem 'rails',

    github: 'rails/rails' gem 'rails', '4.0.2' : : gem 'rails-assets-vue' # Use CoffeeScript for .js.coffee assets and views gem 'coffee-rails', '~> 4.0.0' # Use jquery as the JavaScript library gem 'jquery-rails'
  12. 38.

    Rails4ܥͰͷϑϩϯτΤϯυ $ -> $btn = $("[data-toggle='backToTop']") $btn.hide() $(window).scroll -> if

    window.scrollY > 100 $btn.fadeIn() else $btn.fadeOut() $btn.on 'click', (e) -> $('html,body').animate({ scrollTop: 0 }, 500)
  13. 39.

    Rails5ܥ(௚ۙ1,2೥) • Α͘ग़Δొ৔ਓ෺ • Webpack / Browserify • React /

    Vue.js • FluxܥϥΠϒϥϦ • ESNextɺ΋͘͠͸AltJS • ʰRailsͱJavaScriptͷΤίγεςϜ͸ಠཱʱ
  14. 41.

    Rails 5.0ͷϦϦʔεϊʔτ • Action Cable • Rails API • Active

    Record Attributes API • Test Runner • Exclusive use of rails CLI over Rake • Sprockets 3 • Turbolinks 5 • Ruby 2.2.2+ required
  15. 43.

    Rails 5.1ͷϦϦʔεϊʔτ • Yarn Support • Optional Webpack support •

    jQuery no longer a default dependency • System tests • Encrypted secrets • Parameterized mailers • Direct & resolved routes • Unification of formfor and formtag into form_with
  16. 46.

    Rails5ܥͰͷGemfile gem "rails", "5.2.0" : : gem "sass", "3.4.16" #

    JS translation generator gem "i18n-js", require: false group :assets do : : gem "sassc-rails" gem "browserify-rails" : end
  17. 47.

    Rails5ܥͰͷϑϩϯτΤϯυ import cookie from 'utils/cookie'; import Deactivater from 'mixins/deactivater'; export

    default { mixins: [Deactivater], data() { return { expanded: true, appListShown: false, }; }, methods: { toggleAppList() { this.appListShown = !this.appListShown; }, closeAppList() { this.appListShown = false; }, : } : };
  18. 49.

    ։ൃνʔϜ(࠶ܝ) • શ෦Ͱ6νʔϜ΄Ͳ • SDK։ൃ(iOS / Android) • όοΫΤϯυ •

    ΞϓϦέʔγϣϯ։ൃ ɿϑϩϯτΤϯυ΋؅׋ • ΠϯϑϥνʔϜ • AIνʔϜ • CRE(ςΫχΧϧαϙʔτ) • QA
  19. 50.

    ΞϓϦέʔγϣϯ։ൃνʔϜ(࠶ܝ) • ݱঢ়8ਓఔͰ։ൃશମͰҰ൪ׂ߹͸ଟ͍ • ग़͕ࣗSDK / ServerͷServer (SDKҎ֎શ෦) • ඞཁͱ͞ΕΔٕज़஌ࣝ͸෯޿͍

    • ϓϩμΫτͷ৽ػೳ։ൃ͕໾ׂ • ඞཁͳόοΫΤϯυɺΞϓϦέʔγϣϯɺϑϩϯτΤϯυ ·Ͱแׅͯ͠৮Δ
  20. 60.

    ᴈ໌ظ(ʙ2015೥) • νʔϜͷঢ়گ • গਓ਺Ͱ͢΂ͯͷϨΠϠʔΛݟͳ͚Ε͹ͳΒͳ͍ • Railsͷঢ়گ • CoffeeScript +

    jQuery / ϑϩϯτΤϯυ͸RubyͷΤίγεςϜ্ • ϑϩϯτΤϯυͷঢ়گ • backbone.js / Vue.js 0.10 • jQueryΑΓϦονͰෳࡶͳڍಈΛ࣮ݱ͍ͨ͠χʔζ͔ΒVue.jsΛબ୒
  21. 64.

    ٕज़໛ࡧظ(ʙ2017೥) • νʔϜͷঢ়گ • ϓϩμΫτਖ਼ࣜϦϦʔε / εϐʔυͱ඼࣭ͷཱ྆ • Railsͷঢ়گ •

    Rails 5ϦϦʔε / ϑϩϯτΤϯυ෼཭ͷྲྀΕ • ϑϩϯτΤϯυͷঢ়گ • Vue.js 1 & Vue.js 2, Vuex • ES6Λ࢝Ίͱͨ͠ඪ४Խͷ೾
  22. 73.

    ٕज़౷Ұظ(ʙ2018೥) • νʔϜͷঢ়گ • ։ൃऀ਺͕20ਓۙ͘ʹͳΓDaily͕શһͰߦ͑ͳ͘ͳΔ • αϒνʔϜʹ෼͚ΔΑ͏ʹɻ • Railsͷঢ়گ •

    Rails5.1ϦϦʔε • ϑϩϯτΤϯυͷঢ়گ • ΤίγεςϜ͕҆ఆͯ͘͠Δ / npm v5ͷϦϦʔε • ·ͨɺ਺೥લʹ͋ͬͨΧΦεײ͕ͳ͘ͳͬͯ͘Δ
  23. 85.

    νʔϜ֦େظ(2018೥ʙ) • νʔϜͷঢ়گ • Web SDKͷ։ൃͷඞཁ • ϑϩϯτΤϯυΛ৮Δਓ͕ؒ૿͑Δ • Railsͷঢ়گ

    • ͞ΒʹϑϩϯτΤϯυΛ෼཭ͨ͠ྲྀΕʹ • Webpack༏੎ͬΆ͍ • ϑϩϯτΤϯυͷঢ়گ • ϑϩϯτΤϯυͱ͍͑͹ Vue.js / React / Angular2 Έ͍ͨͳঢ়گʹͳΔ