Vue.jsにおけるOSS活動

Transcript

1. Vue.jsʹ͓͚Δ
   OSS ׆ಈ
   2018.11.26
   OSS Universe by dev
   #2
   @kazupon
   

   View Slide

2. ࣗݾ঺հ
   
   

   View Slide

3. kazupon
   CTO
   Vue.js Core Team
   Vue.js japan user group organizer
   @kazu_pon kazupon
   

   View Slide

4. ࠓ೔࿩͢͜ͱ
   

   View Slide

5. ࠓ೔࿩͢͜ͱ
   • લճ͸ࣗ෼ͷ͜Ε·ͰͷOSSͷऔ૊ʹ͍ͭͯ
   ࿩ͨ͠
   

   View Slide

6. ࠓ೔࿩͢͜ͱ
   • ࠓճ͸Vue.jsͷOSS׆ಈʹ͍ͭͯ
   

   View Slide

7. Vue.js ʹ͍ͭͯ
   

   View Slide

8. Vue.js
   • ࡞ऀ: Evan You
   • Ϗϡʔ૚ͷϥΠϒϥ
   Ϧ
   • 2013೥ݸਓϓϩδΣ
   Ϋτͱͯ͠։࢝
   • 2014೥2݄ʹv0.8ެࣜ
   ϦϦʔε
   

   View Slide

9. 2015.04.20
   Laravel Ͱ࠾༻ܾఆ
   2015.10.26
   v1.0
   Evangelion
   2016.10.01
   v2.0
   Ghost in the Shell
   2017.10.13
   v2.5
   Level E
   2018.11.26 ݱࡏ
   ࠷৽: v2.5.17
   ྺ࢙
   

   View Slide

10. Progressive
    Framework
    

    View Slide

11. Vue.jsຊମ Vue Router Vuex Vue CLI
    

    View Slide

12. 2018೥ͷঢ়گ
    https://2018.stateofjs.com/front-end-frameworks/vuejs/results-over-time
    

    View Slide

13. React Usage by Country
    StateOfJS 2018
    https://2018.stateofjs.com/front-end-frameworks/react/tool-usage-by-country
    

    View Slide

14. Vue.js Usage by Country
    StateOfJS 2018
    https://2018.stateofjs.com/front-end-frameworks/vuejs/tool-usage-by-country
    

    View Slide

15. ΤίγεςϜ
    

    View Slide

16. View Slide

17. Storybook
    

    View Slide

18. Native Script
    

    View Slide

19. ಋೖاۀ
    

    View Slide

20. άϩʔόϧ
    

    View Slide

21. ࠃ಺
    • Vue Fes Japan Ͱεϙϯαʔͯ͠௖͍
    ͨձ༷ࣾɺଞͰ΋࢖ΘΕ͍ͯΔ
    

    View Slide

22. ૊৫ମ੍
    

    View Slide

23. 2018೥ݱࡏ
    ίΞνʔϜ + ίϛϡχςΟύʔτφʔ౳ؚΊΔͱ50໊+
    

    View Slide

24. ͪͳΈʹɺ2016೥ίΞνʔϜॳظ͸
    20໊ऑͩͬͨ
    

    View Slide

25. ͞ΒʹɺίΞνʔϜମ੍Ҏલ͸
    10໊ʹ΋Έͨͳ͔ͬͨ
    

    View Slide

26. • ݱࡏVue.js organaization ʹ20νʔϜ
    ΄Ͳଘࡏ
    νʔϜମ੍͕ෑ͔Ε͍ͯΔ
    

    View Slide

27. • ݱࡏ Vue.js ࡞ऀ Evan ࢯ͚ͩ
    • ଞίΞνʔϜϝϯόʔ΋PatreonͳͲͰ໛ࡧத
    ϑϧλΠϜOSSϝϯό
    

    View Slide

28. ίϛϡχςΟ
    

    View Slide

29. • ֤஍ͰMeetup͕։࠵͞Ε͍ͯΔ
    ੈք֤஍ͰίϛϡχςΟ͕͋Δ
    https://www.vuemeetups.org/find/
    

    View Slide

30. ΧϯϑΝϨϯε
    

    View Slide

31. • 2017೥ͷVueConf EU Λػʹɺ2018೥͸։࠵͕ٸ଎
    ʹ૿͍͑ͯΔ
    ੈք֤஍Ͱ։࠵͞Ε͍ͯΔ
    

    View Slide

32. Vue.js ʹ͓͚Δ
    OSS ׆ಈ
    

    View Slide

33. • Vue.jsίΞνʔϜ
    • Vue.js ϥΠϒϥϦ։ൃऀ
    • Vue.jsίϛϡχςΟӡӦऀ
    Vue.jsͷࣗ෼ʹ͓͚ΔOSS׆ಈΛ෼͚Δͱ…
    

    View Slide

34. Vue.jsίΞνʔϜ
    

    View Slide

35. Vue.jsίΞνʔϜͷ࢓ࣄ
    • Issues τϦΞʔδ
    • όάϨϙʔτ
    • ػೳཁ๬
    • issues ͷ੔ཧ
    • PR ͷϨϏϡʔ
    • ৽ػೳ ·ͨ͸ όάमਖ਼
    • ଞͷίΞνʔϜϝϯόͷαϙʔτ
    • Vue.js ίϛϡχςΟͷαϙʔτ
    • υΩϡϝϯτͷαϙʔτ
    

    View Slide

36. Issue τϦΞʔδ
    

    View Slide

37. όάϨϙʔτ
    ϥϕϧ෇͠ɺ
    ίϝϯτ͢Δ
    

    View Slide

38. ػೳཁ๬
    ٞ࿦ͯ͠ඞཁͰ͋Ε͹ϥϕϧ෇͚
    

    View Slide

39. Issues ͷ੔ཧ
    5೔Ҏ্ܦա͢
    ΔͱClose
    

    View Slide

40. PR ͷϨϏϡʔ
    

    View Slide

41. GitHubͷػೳͰ
    ϨϏϡʔ͢Δ
    ໰୊ͳ͚Ε͹ɺϥ
    ϕϧ෇͚͞ΕΔ
    

    View Slide

42. ৽ػೳ·ͨ͸
    όάमਖ਼
    

    View Slide

43. ίΞνʔϜͰ΋ଞͷVue.jsϢʔβʔͱಉ༷ͷϑϩʔ
    

    View Slide

44. ଞͷίΞνʔϜϝϯόͷ
    αϙʔτ
    

    View Slide

45. ίϛϡχέʔγϣϯ
    ͷ΍ΓऔΓͰɺิ଍
    ౳Ͱαϙʔτͨ͠Γ
    ͢Δ
    

    View Slide

46. Vue.js ίϛϡχςΟͷ
    αϙʔτ
    

    View Slide

47. Vue Forum: Vue.js ͷ Q & A ϑΥʔϥϜαΠτ
    

    View Slide

48. StackOverFlowͷΑ͏ʹίϛϡχςΟͰQ & A
    

    View Slide

49. Vue Land: ίϛϡχςΟͰަྲྀͰ͖ΔDiscord
    

    View Slide

50. • Vue Land ʹ͸ίΞνʔϜଞʹҎԼͷ໾ׂ͕͋Γɺ
    Vue.jsίϛϡχςΟΛαϙʔτ͍ͯ͠Δ
    • Moderators
    • MVP
    • Library Authors
    • Community Leaders
    Vue Land ͷαϙʔτ
    

    View Slide

51. υΩϡϝϯτͷ
    αϙʔτ
    

    View Slide

52. • ࣗ෼͸ɺओʹ೔ຊޠυΩϡϝϯτͷҎԼͷ຋༁ʹ׆
    ಈ͍ͯ͠Δ
    • Vue.js ຊମ
    • Vue Router
    • Vuex
    • Vue Test Utils
    υΩϡϝϯτͷ຋༁
    

    View Slide

53. • Vue.js ެࣜυΩϡϝϯτͷ຋༁͸ҎԼͷମ੍
    • ຋༁ϨϙδτϦ: vuejs/jp.vuejs.org
    • ϝΠϯϝϯςφ: kazupon
    • αϒϝϯςφ: re-fort, potato4d
    ೔ຊޠ຋ମ੍
    

    View Slide

54. ຋༁ΨΠυΛઃஔ
    https://github.com/vuejs/jp.vuejs.org/blob/lang-ja/CONTRIBUTING.md
    

    View Slide

55. • ຋༁ߩݙऀͷϞνϕʔγϣϯͷͨΊʹɺ೔ຊޠެࣜ
    υΩϡϝϯτʹߩݙऀҰཡΛܝࡌ
    ߩݙऀͷΫϨδοτͷઃஔ
    https://jp.vuejs.org/contribution/
    ͜ͷϖʔδ͸
    ೔ຊ޲͚
    ΦϦδφϧ
    

    View Slide

56. • ຋༁ελΠϧ : 

    JTF೔ຊޠඪ४ελΠϧΨΠυ + ಠࣗΧελϚΠζ
    ελΠϧ
    • ຋༁ΏΒ͗νΣοΫπʔϧͱͯ͠textlintͰνΣοΫ
    • σϓϩΠ͸ Netlify ͰࣗಈԽ
    ຋༁ελΠϧͱπʔϧ
    

    View Slide

57. • େຊͷυΩϡϝϯτ಺༰ͷ௥ै͸ɺϘοτͰରԠ͠
    ͍ͯΔ
    ೔ʑͷ຋༁ӡ༻
    https://github.com/vuejs-jp/che-tsumi
    

    View Slide

58. • ϘοτͰGitHub Issues ʹొ࿥͞Εͨத͔Βɺ຋༁
    ͍ͨ͠ਓ͕ڍखͯ͠຋༁͢Δ
    ೔ʑͷ຋༁ӡ༻
    

    View Slide

59. ͨͩ೔ʑͷӡ༻Ͱର
    Ԡ͖͠Εͳ͍େ෯ͳ
    ຋༁͕ඞཁͳ࣌͸ʁ
    

    View Slide

60. • Vue.js೔ຊϢʔβʔάϧʔϓͷSlack΍TwitterΛ௨͡
    ͰߩݙऀΛืͬͯ຋༁
    ຋༁ڠྗऀΛืΔ
    https://twitter.com/kazu_pon/status/779127053027160064
    

    View Slide

61. • GitHub ʹ຋༁ΨΠυͷ issues ΛཱͯΔ
    • GitHub Projects Ͱ຋༁ਐḿΛ؅ཧ
    ͦͷ࣌ͷ຋༁ମ੍
    

    View Slide

62. GitHub Issues୯ҐʹΑΔ຋༁
    ڍख੍Ͱ୲౰ऀΛ
    ΞαΠϯ
    

    View Slide

63. ิ଍
    

    View Slide

64. Vue.jsͰ
    OSS׆ಈͷͨΊͷ޻෉
    

    View Slide

65. • .github ഑ԼʹҎԼͷΨΠυϥΠϯΛઃஔ
    • ίϛοτϝοηʔδن໿: COMMIT_CONVENTION.md
    • ߩݙΨΠυ: CONTRIBUTING.md
    • ߦಈنൣ: CODE_OF_CONDUCT.md
    • PRͷςϯϓϨʔτ: PULL_REQUEST_TEMPLATE.md
    ΨΠυϥΠϯͷઃஔ
    

    View Slide

66. • ߩݙऀˍίΞνʔϜ͕Issues ർ࿑Λ๷͙ͨΊʹɺ
    ϔϧύΞϓϦΛ༻ҙ
    Issues ϔϧύ
    https://new-issue.vuejs.org/
    

    View Slide

67. • Issues ϔϧύͷϑΥʔϚοτʹै͍ͬͯΔ͔Ͳ͏͔
    ϘοτͰνΣοΫ
    Vue Issue Bot
    ϑΟΦʔϚοτʹै͍ͬͯͳ͚Ε͹ڧ੍Close
    

    View Slide

68. • ߩݙ͠΍͍͢Α͏ʹɺ`good first issue` Ͱϥϕϧ෇
    ͚͍ͯ͠Δ
    Issues ϥϕϧ෇͚
    

    View Slide

69. Vue.js
    ϥΠϒϥϦ։ൃऀ
    

    View Slide

70. • Vue.js ޲͚ʹ i18n ޲͚ϥΠϒϥϦΛఏڙʹΑΓΤ
    ίγεςϜܗ੒ʹ౒Ί͍ͯΔ
    Vue.js޲͚ͷi18n
    

    View Slide

71. Vue.js
    ίϛϡχςΟӡӦऀ
    

    View Slide

72. • Slack ʹΑΔ೔ຊਓ޲͚ͷ
    νϟοτͷӡӦ
    • ConnpassʹΑΔMeetupͷӡӦ
    • ΧϯϑΝϨϯεʹ޲͚ͨ׆ಈ
    • ຋༁׆ಈͷαϙʔτ
    • ఆྫMTGͷ։࠵
    • … etc
    Vue.js೔ຊϢʔβʔάϧʔϓ
    https://github.com/vuejs-jp
    https://vuejs-meetup.connpass.com/
    

    View Slide

73. • CoC (ޙͰࡌͤΔ༧ఆ) Ҏ֎
    ͸ಛʹݫ֨ͳϧʔϧ͸ఆΊ
    ͍ͯͳ͍
    • ίϛϡχςΟ͕ؾ࣋ͪΑ͍
    ৔ʹ͢ΔΑ͏ʹ৺͕͔͑ͯ
    ͍Δ
    • Meetupͷ։࠵΍ɺVue.jsެ
    ࣜؔ࿈ϨϙδτϦͷϦϦʔ
    ε৘ใͳͲͷΞφ΢ϯε͠
    ͨΓͳͲ
    SlackͷӡӦ
    

    View Slide

74. • 3ʙ4ϲ݄ʹ1ճͷස౓Ͱ։࠵
    • ൃදʹΑΔVue.jsͷ৘ใ΍ɺ
    ࠙਌ձͰVue.jsίϛϡχςΟ
    ͕৘ใަ׵ɺ਌ກͰ͖Δ৔
    ͷఏڙ͢Δͷ͕໨త
    MeetupͷӡӦ
    

    View Slide

75. • ݄ҰఆྫMTGͰΧϯϑΝϨ
    ϯε (Vue Fes Japan)ͷا
    ըɺ४උ͢Δ
    • ΧϯϑΝϨϯε౰೔͸ɺ
    Vue.js೔ຊϢʔβʔάϧʔ
    ϓελοϑશһͰӡӦʹ຿
    ΊΔ
    ΧϯϑΝϨϯεʹ޲͚ͨ׆ಈ
    

    View Slide

76. • ίϛϡχςΟʹΑΔVue.jsؔ࿈υΩϡϝϯτͷ຋༁Λα
    ϙʔτ
    • ϨϏϡʔ
    • େن໛ͳ຋༁׆ಈͷࡍͷ؀ڥ੔උ & Ϧʔυ
    ຋༁׆ಈͷαϙʔτ
    

    View Slide

77. • ݄1ͰVue.js೔ຊϢʔβʔάϧʔϓελοϑ޲͚ͷMTGΛ։࠵
    ͍ͯ͠Δ
    • MTG಺༰ͱͯ͠͸ɺҎԼͷΠϕϯτͷاը&४උ͕ओ
    • Meetup
    • ΧϯϑΝϨϯε
    • ελοϑ಺Ͱ਌ກΛਤΔͨΊʹɺ৽೥ձɺೲྋձΈ͍ͨͳෆ
    ఆظͰߦ͍ͬͯΔ
    ఆྫMTGͷ։࠵
    

    View Slide

78. ·ͱΊ
    

    View Slide

79. ·ͱΊ
    • Vue.js ࢹ఺ʹΑΔ OSS ׆ಈʹ͍ͭͯ࿩͖ͯ͠
    ͨ
    • ࠷ॳ͸ίΞνʔϜɺVue.js޲͚ͷϥΠϒϥϦ
    OSS։ൃऀͱͯ͠ओʹίʔυࢹ఺Ͱ׆ಈ͢Δ
    ͜ͱͰߩݙ͖ͯͨ͠
    

    View Slide

80. ·ͱΊ
    • ೔ຊͰVue.js೔ຊϢʔβʔάϧʔϓΛ্ཱͪ͛
    ͔ͯΒɺίʔυҎ֎ʹίϛϡχςΟΛӡӦ͢
    Δ׆ಈ΋͖ͯͨ͠
    • Vue.js Λ௨ͯ͡Ұ࿈ͷ OSS ׆ಈʹ͍ͭͯؔΘ
    Δ͜ͱ͕Ͱ͖ͨ
    

    View Slide

81. ͱ͍͏Θ͚Ͱ
    

    View Slide

82. Vue.jsͷ
    OSS׆ಈΛ
    ௨ͯ͠
    

    View Slide

83. OSSʹର͢Δߩݙʹ͍ͭͯ
    ෼͔ͬͨ͜ͱ
    

    View Slide

84. • GitHubͰPRૹͬͨΓɺIssue(Bug)
    ొ࿥ͨ͠ΓͳͲɺίʔυʹΑΔ΋
    ͷ͚͕ͩOSS ΁ͷߩݙ͡Όͳ͍ʂ
    • ࣗ෼ͨͪ͸ɺ৭ʑͳܗͰߩݙͰ͖
    Δʂ
    

    View Slide

85. OSSʹ͸͍ΖΜͳํ๏ͷߩݙ͕ඞཁ
    “Vue.js͸׬શͳOSSͰ͢ͷͰɺօ͞·ҰਓͻͱΓʹࢧ͑ΒΕͯ੒Γཱͬ
    ͍ͯ·͢ɻεϙϯαʔاۀ༷Λืू͍ͯ͠Δͷ͸΋ͪΖΜͰ͕͢ɺۚમ
    తͳαϙʔτͰ͸ͳͯ͘΋ɺGitHubʹPRΛૹͬͯ௖͍ͨΓɺϢʔβʔ
    ؒͰ࣭໰ʹ౴͑ͯ௖͍ͨΓͱ͍ͬͨߦಈ͕Vue.jsͷͨΊʹͳΓ·͢ɻ"
    https://www.youtube.com/watch?v=oWSVBwcPBIk&t=1s
    

    View Slide

86. όάใࠂ
    PRϨϏϡʔ
    όάमਖ਼
    ৽ػೳ࣮૷
    ॻ੶ࣥච Q & A ରԠ
    ϒϩά
    ϛʔτΞοϓ։࠵
    ϛʔτΞοϓͷ͓ख఻͍ ΧϯϑΝϨϯεͷ͓ख఻͍
    ϙουΩϟετ
    εϙϯαʔ&د෇
    εϐʔΧʔొஃ
    ಈը
    υΩϡϝϯτվળ υΩϡϝϯτ຋༁
    νϟοτରԠ
    ϥΠϒϥϦ։ൃ
    ɾɾɾ
    ܒ໤
    ϫʔΫγϣοϓ ࣾ಺ษڧձ
    

    View Slide

87. OSSʹߩݙͯ͠རӹΛ෼͚߹͓͏ʂ
    https://twitter.com/ikeike443/status/1062893298723876864
    

    View Slide

88. Creator
    OSS
    develop
    Blog
    write
    

    View Slide

89. Developer
    Company
    Creator
    OSS
    Product
    Developer
    adopt / use
    develop
    User
    use
    teach
    Blog
    read
    

    View Slide

90. Developer
    Company
    Creator
    OSS
    Product
    Blog / SNS
    Developer
    Developer
    donate
    donate
    more use
    write
    more
    develop
    read
    try to use
    more
    develop
    Developer
    Developer
    read
    User
    more use
    User
    use
    feedback
    try to use
    

    View Slide

91. Developer
    Company
    Creator
    OSS
    Product
    Blog / SNS
    Company
    Product
    Developer
    Plugin
    Developer
    donate
    donate
    more
    develop
    adopt / more use
    develop
    create
    more
    develop
    Developer
    Developer
    User User
    use
    feedback
    more use
    and contribute feedback
    more use
    

    View Slide

92. Developer
    Company
    Creator
    OSS
    Product
    Blog / SNS
    Company
    Product
    Plugin
    Developer
    Developer
    donate
    donate
    more
    develop
    more use
    and contribute
    more
    develop
    more develop
    adopt / use
    more
    develop
    Developer
    Developer
    User
    more use
    Company
    Product
    develop
    User
    more use
    Blog
    write read
    Developer
    (OSS Plugin
    Creator)
    more use
    and contribute
    

    View Slide

93. Developer
    Company
    Creator
    OSS
    Product
    Blog / SNS
    Company
    Product
    Developer
    (OSS Plugin
    Creator)
    Plugin
    Developer
    Developer
    donate
    donate
    more
    develop
    more
    develop
    more develop
    more use
    more
    develop
    Developer
    Developer
    User
    more use
    Company
    Product
    more
    develop
    User
    more use Event
    Organizer
    Event
    invite
    more use
    and contribute
    more use
    and contribute
    more use
    and contribute
    

    View Slide

94. Developer
    Company
    Creator
    OSS
    Product
    Blog / SNS
    Company
    Product
    Plugin
    Developer
    Developer
    donate
    donate
    more use
    more
    develop
    more use
    more
    develop
    more develop
    more use
    more
    develop
    Developer
    Developer
    User
    more use
    Company
    Product
    more
    develop
    User
    more use Event
    Organizer
    Company
    Developer
    join as speaker
    Event
    sponsored
    join as
    attendee
    Slide
    speak
    attend
    join
    as speaker
    Developer
    join as staff
    Media
    report
    Blog
    Developer
    (OSS Plugin
    Creator)
    more use
    and contribute
    

    View Slide

95. ԿΒ͔ͷߩݙʹΑͬͯΤίγες
    Ϝ͕ܗ੒͞ΕΔ
    ↓
    ωοτϫʔΫޮՌͰOSSͷརӹ
    (Ձ஋)͕ߴ·͍ͬͯ͘
    ↓
    OSS࡞ऀɺར༻ऀͦͯ͠ձࣾʹ΋
    རӹ͕෼͚༩͑ΕΒΕΔʂ
    

    View Slide

96. ࠷ޙʹ
    

    View Slide

97. Patreon΍ͬͯ·͢ʂ
    • ޷͖ͳOSS׆ಈΛҡ࣋͢ΔͨΊʹɺΫϥ΢υ
    ϑΝϯσΟϯάΛ࢝ΊΔ͜ͱͰ໛ࡧ͍ͯ͠Δ
    

    View Slide

98. Patreonͷࢧԉ
    ͓଴͓ͪͯ͠Γ·͢ʂ
    https://www.patreon.com/kazupon
    

    View Slide

99. View Slide

100. ͝ਗ਼ௌ
     ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
     
     

     View Slide