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

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

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

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

Hiroaki Ninomiya

December 08, 2018
Tweet

More Decks by Hiroaki Ninomiya

Other Decks in Technology

Transcript

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

    Shinjuku.rb Organizer • RubyͷΤϯδχΞίϛϡχςΟ • ෱Ԭग़਎(༗໌ߴઐˠ۝भେֶେֶӃ)
  2. Reproגࣜձࣾ • 2014೥ઃཱͷελʔτΞοϓاۀ • https://repro.io/ • BtoB SaaS • ࣗࣾϓϩμΫτRepro

    SDKΛ։ൃ • ϞόΠϧΞϓϦͷ෼ੳɾϚʔέςΟϯά༻్ • ಛఆηάϝϯτʹ؆୯ʹϓογϡ௨஌͕ଧͯΔ • ݱࡏɺઈࢍٸ੒௕த
  3. ར༻ٕज़ • Πϯϑϥɿ AWS • ݴޠ • Ruby(Rails) • Python(AI෼໺)

    • Golang(ϓογϡ௨஌ج൫) • (ڧ͍ͯݴ͏ͳΒ͹)Rubyͷձࣾ • ʰύʔϑΣΫτRubyʱͷڞஶऀ͕CTO
  4. ։ൃνʔϜ • શ෦Ͱ6νʔϜ΄Ͳ • SDK։ൃ(iOS / Android) • όοΫΤϯυ •

    ΞϓϦέʔγϣϯ։ൃ • ΠϯϑϥνʔϜ • AIνʔϜ • CRE(ςΫχΧϧαϙʔτ) • QA
  5. ։ൃνʔϜ • શ෦Ͱ6νʔϜ΄Ͳ • SDK։ൃ(iOS / Android) • όοΫΤϯυ •

    ΞϓϦέʔγϣϯ։ൃ ɿϑϩϯτΤϯυ΋؅׋ • ΠϯϑϥνʔϜ • AIνʔϜ • CRE(ςΫχΧϧαϙʔτ) • QA
  6. Vuejs • Progressive Framework • Declarative Rendering • Two-way Binding

    • An incrementally adoptable Ecosystem • ࠷খݶʹ࢝ΊΒΕΔ͜ͱ͔ΒಋೖΛܾఆ
  7. Ruby on Rails (Rails) • ελʔτΞοϓͰਓؾͷϑϨʔϜϫʔΫͷҰͭ • ઃఆΑΓن໿(Convention over Configuration)

    • ʮRails͕ॻ͚Δʯ͜ͱ͕୲อͰ͖Ε͹େମͲ͜Ͱ΋׆༂Ͱ͖Δ • ࢓૊ΈΛ஌Βͳ͍ঢ়ଶͰಡΉͱԿ͕ى͍ͬͯ͜Δ͔෼͔Βͳ͍ ͱ͍͏ܽ఺΋ • όονॲཧ΍SDKͱͷ΍ΓऔΓ༻APIͳͲଟ͘ͷ෦෼Ͱ࢖ΘΕͯ ͍Δ
  8. αʔόαΠυτϨϯυͷมԽ(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
  9. Rails Assets • Rails Assets is the frictionless proxy between

    Bundler and Bower. • ϑϩϯτΤϯυͷϥΠϒϥϦ͸ xxx-rails ͷΑ͏ͳ໊લͰఏ ڙ͞Ε͍ͯΔ΋ͷ͕͕͋ͬͨ • JavaScriptଆ(ຊՈ)΁ͷ௥ै͕஗͍ͱ͍͏χʔζʹͨ͑ͨ͜ αʔϏε • rails-assets-xxx ͷ໊લͰGemԽ͞ΕΔ
  10. 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'
  11. 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)
  12. Rails5ܥ(௚ۙ1,2೥) • Α͘ग़Δొ৔ਓ෺ • Webpack / Browserify • React /

    Vue.js • FluxܥϥΠϒϥϦ • ESNextɺ΋͘͠͸AltJS • ʰRailsͱJavaScriptͷΤίγεςϜ͸ಠཱʱ
  13. 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
  14. 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
  15. 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
  16. 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; }, : } : };
  17. ։ൃνʔϜ(࠶ܝ) • શ෦Ͱ6νʔϜ΄Ͳ • SDK։ൃ(iOS / Android) • όοΫΤϯυ •

    ΞϓϦέʔγϣϯ։ൃ ɿϑϩϯτΤϯυ΋؅׋ • ΠϯϑϥνʔϜ • AIνʔϜ • CRE(ςΫχΧϧαϙʔτ) • QA
  18. ΞϓϦέʔγϣϯ։ൃνʔϜ(࠶ܝ) • ݱঢ়8ਓఔͰ։ൃશମͰҰ൪ׂ߹͸ଟ͍ • ग़͕ࣗSDK / ServerͷServer (SDKҎ֎શ෦) • ඞཁͱ͞ΕΔٕज़஌ࣝ͸෯޿͍

    • ϓϩμΫτͷ৽ػೳ։ൃ͕໾ׂ • ඞཁͳόοΫΤϯυɺΞϓϦέʔγϣϯɺϑϩϯτΤϯυ ·Ͱแׅͯ͠৮Δ
  19. ᴈ໌ظ(ʙ2015೥) • νʔϜͷঢ়گ • গਓ਺Ͱ͢΂ͯͷϨΠϠʔΛݟͳ͚Ε͹ͳΒͳ͍ • Railsͷঢ়گ • CoffeeScript +

    jQuery / ϑϩϯτΤϯυ͸RubyͷΤίγεςϜ্ • ϑϩϯτΤϯυͷঢ়گ • backbone.js / Vue.js 0.10 • jQueryΑΓϦονͰෳࡶͳڍಈΛ࣮ݱ͍ͨ͠χʔζ͔ΒVue.jsΛબ୒
  20. ٕज़໛ࡧظ(ʙ2017೥) • νʔϜͷঢ়گ • ϓϩμΫτਖ਼ࣜϦϦʔε / εϐʔυͱ඼࣭ͷཱ྆ • Railsͷঢ়گ •

    Rails 5ϦϦʔε / ϑϩϯτΤϯυ෼཭ͷྲྀΕ • ϑϩϯτΤϯυͷঢ়گ • Vue.js 1 & Vue.js 2, Vuex • ES6Λ࢝Ίͱͨ͠ඪ४Խͷ೾
  21. ٕज़౷Ұظ(ʙ2018೥) • νʔϜͷঢ়گ • ։ൃऀ਺͕20ਓۙ͘ʹͳΓDaily͕શһͰߦ͑ͳ͘ͳΔ • αϒνʔϜʹ෼͚ΔΑ͏ʹɻ • Railsͷঢ়گ •

    Rails5.1ϦϦʔε • ϑϩϯτΤϯυͷঢ়گ • ΤίγεςϜ͕҆ఆͯ͘͠Δ / npm v5ͷϦϦʔε • ·ͨɺ਺೥લʹ͋ͬͨΧΦεײ͕ͳ͘ͳͬͯ͘Δ
  22. νʔϜ֦େظ(2018೥ʙ) • νʔϜͷঢ়گ • Web SDKͷ։ൃͷඞཁ • ϑϩϯτΤϯυΛ৮Δਓ͕ؒ૿͑Δ • Railsͷঢ়گ

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