Vue.jsにおけるOSS活動

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ࠓ೔࿩͢͜ͱ

Slide 5

Slide 5 text

ࠓ೔࿩͢͜ͱ • લճ͸ࣗ෼ͷ͜Ε·ͰͷOSSͷऔ૊ʹ͍ͭͯ ࿩ͨ͠

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Vue.js ʹ͍ͭͯ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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 ྺ࢙

Slide 10

Slide 10 text

Progressive Framework

Slide 11

Slide 11 text

Vue.jsຊମ Vue Router Vuex Vue CLI

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ΤίγεςϜ

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Storybook

Slide 18

Slide 18 text

Native Script

Slide 19

Slide 19 text

ಋೖاۀ

Slide 20

Slide 20 text

άϩʔόϧ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

૊৫ମ੍

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

ίϛϡχςΟ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

ΧϯϑΝϨϯε

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Vue.js ʹ͓͚Δ OSS ׆ಈ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Vue.jsίΞνʔϜ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Issue τϦΞʔδ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

PR ͷϨϏϡʔ

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

৽ػೳ·ͨ͸ όάमਖ਼

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

StackOverFlowͷΑ͏ʹίϛϡχςΟͰQ & A

Slide 49

Slide 49 text

Vue Land: ίϛϡχςΟͰަྲྀͰ͖ΔDiscord

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

υΩϡϝϯτͷ αϙʔτ

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

ิ଍

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

• ߩݙ͠΍͍͢Α͏ʹɺ`good ﬁrst issue` Ͱϥϕϧ෇ ͚͍ͯ͠Δ Issues ϥϕϧ෇͚

Slide 69

Slide 69 text

Vue.js ϥΠϒϥϦ։ൃऀ

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

·ͱΊ

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

ͱ͍͏Θ͚Ͱ

Slide 82

Slide 82 text

Vue.jsͷ OSS׆ಈΛ ௨ͯ͠

Slide 83

Slide 83 text

OSSʹର͢Δߩݙʹ͍ͭͯ ෼͔ͬͨ͜ͱ

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

Creator OSS develop Blog write

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

࠷ޙʹ

Slide 97

Slide 97 text

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