学生エンジニア、 ドキドキ初OSSコミットへの挑戦🎉

Nihonbashi.js #2 fix typo! でのkeynoteです。
「学生エンジニア、 ドキドキ初OSSコミットへの挑戦🎉」

Transcript

1. ֶੜΤϯδχΞɺ
   υΩυΩॳOSSίϛοτ΁ͷ௅ઓ
   ࡔ্ ྤҰ
   

   View Slide

2. ࠓ೔͸ɺ
   OSSʹίϛοτ͍͚ͨ͠ͲҰา͕౿Έग़ͤͳ͍ʂ
   ͦΜͳํʹϓϩάϥϛϯάྺ̍೥ͷֶੜΤϯδχΞͰ΋
   ίϛοτͰ͖ͨ࿩Λฉ͍ͯ
   ͖͔͚ͬʹ͍͚ͯͨͩͨ͠Βͱࢥ͍·͢ɻ
   

   View Slide

3. ౦ژཧՊେֶ ޻ֶ෦ ৘ใ޻ֶՊ ̎೥
   ࡔ্ ྤҰ
   ϑϩϯτΤϯυΤϯδχΞ
   Twitter: @RyuichiSakagami GitHub: Shagamii
   

   View Slide

4. גࣜձࣾ ΩϡΞɾΞοϓ Πϯλʔϯ
   JavaScript(ReactNative)
   ֶੜஂମ Unitus
   JavaScript(React)
   

   View Slide

5. ઌ೔ɺOSSॳίϛοτΛୡ੒͠·ͨ͠ʂ
   

   View Slide

6. ॳOSSίϛοτΛୡ੒ͯ͠ࢥͬͨ͜ͱ…
   ࢥͬͯͨΑΓϋʔυϧߴͳ͍΍Μʂ
   

   View Slide

7. ॳΊͯͷOSS׆ಈ
   react-native-pathjs-charts
   ReactNativeͰνϟʔτ΍άϥϑΛѻ͏ϥΠϒϥϦ
   

   View Slide

8. ίϛοτ಺༰
   ϨΠμʔνϟʔτͷϥϕϧΛΫϦοΫ͢Δͱͦͷϥϕϧ໊ͱ஋Λऔಘ
   ͢Δ
   

   View Slide

9. DEMO
   

   View Slide

10. ͦ΋ͦ΋ͷܦҢ
    

    View Slide

11. PC΋͖ͬͯͯΔʁ
    ΩϡΞɾΞοϓʹΠϯλʔϯͷਃ͠ࠐΈ…
    ͸͡Ί·ͯ͠…ࡔ্Ͱ͢…
    

    View Slide

12. ಥવϖΞϓϩ͕࢝·ΓɺϨʔμʔνϟʔτͷ࡞੒՝୊
    

    View Slide

13. ޙ೔…
    npmͰϨʔμʔνϟʔτͷ
    ϥΠϒϥϦΛެ։͢Δ·Ͱ͠·͠ΐ͏ʂ
    

    View Slide

14. ͑͐ʂʁnpmϥΠϒϥϦͰެ։ʂʁOSSʂʁ
    

    View Slide

15. ͭΑͦ͏ͳ΍ͭ΍Μʂ
    

    View Slide

16. ৭ʑͳ؍఺͔Βߟ͑ͯΈͨखॱ
    1. ྨࣅϥΠϒϥϦ͕ͳ͍͔ௐࠪ
    2. ԿΛ΍ΕΔ΋ͷͳͷ͔ΠϯλʔϑΣΠεΛܾΊΔ
    3. ໊લΛܾΊΔ
    4. githubʹϨϙδτϦࠎ֨Λͭ͘Δ
    5. ࣮૷͢Δ
    6. READMEॻ͘
    7. ެ։͢Δ
    8. ޿ใ͢Δ
    

    View Slide

17. - https://github.com/nhagen/react-radar-chart
    - ໊લ͸react͚ͩͲɺී௨ͷd3.jsΛ༻͍ͨϨʔμʔνϟʔτ
    - bowerͰinstall͢ΔΜ͚ͩͲɺREADMEͷ΍ͭͰ͸installͰ͖ͳ͔ͬͨ
    - ϓϩύςΟͱ͔ͷυΩϡϝϯτෆ଍ײ
    - ઈର஋ͰϨϯμϦϯά
    - https://github.com/shauns/react-d3-radar
    - ͪ͜Β͸React.jsͷίϯϙʔωϯτ
    - width, height, padding, domainMax, highlighted
    - υΩϡϝϯτෆ଍ײ
    - σβΠϯ͸ؙ͍ײ͡
    - https://github.com/react-d3/react-d3-shape
    - https://github.com/reactjs/react-chartjs
    - chart.jsΛReactͰ࢖͑ΔΑ͏ʹͨ͠΋ͷ
    - dataͱoption͚͚ͩͩͲchart.js͕ϕʔεʹͳͬͯΔ͔ΒυΩϡϝϯτ͸ἧͬͯΔ
    - υΩϡϝϯτ௨Γʹ΍ͬͯ΋ಈ͔ͳ͍
    - ಈతʹνϟʔτΛϨϯμϦϯά͢Δ͜ͱʹ΋ରԠ
    - https://reactcommunity.org/react-chartjs/index.html
    - https://github.com/rsamec/react-pathjs-chart
    - paths.jsͰΛReactͷComponentʹͨ͠΋ͷ
    - ಈ͖΋ग़ͤΔ
    - data, options, xkey, ykey,etc...
    - https://github.com/capitalone/react-native-pathjs-charts/releases
    - react-pathjs-chartͷReactNative൛
    - ͔ͳΓ࠷ۙ΋։ൃ੝Μ
    - ϓϩύςΟ͸react-pathjs-chartͱ΄΅Ұॹ
    

    View Slide

18. ͍΍ɺ͜Ε৽ͨʹϥΠϒϥϦެ։͢Δඞཁ͋Δʁ
    ͨͩͷंྠͷ࠶ൃ໌Ͱ͸…ʁ
    ͡Ό͋ɺ͍·͋ΔϥΠϒϥϦʹίϛοτ͠Α͏ʂ
    

    View Slide

19. ͍͔ͭ͘ͷީิΛϦετΞοϓ
    react-pathjs-chart
    react-native-pathjs-charts
    react-d3-radar react-chartjs
    react-native-pathjs-charts
    • ελʔ਺
    • ࠷ۙͷ։ൃঢ়گ
    

    View Slide

20. View Slide

21. View Slide

22. ԿΛ࣮૷͢Δ͔
    Կ͕͋ͬͨΒ͍͍͔…
    • ϥϕϧ෦෼ͳͲࡉ͔͍෦෼ͷΫϦοΫ࣌ͳͲͷ࣮૷
    • ΩϟϓγϣϯΛ͚ͭΔ etc…
    

    View Slide

23. ISSUEΛཱͯΔ
    • ಉ͡Α͏ͳIssue͕ͳ͍͔֬ೝ
    • ͦΕʹରͯ͠ͲͷΑ͏ͳϦΞΫγϣϯ͔Λ֬ೝ
    • ӳޠͷจ๏ϛεΛ͓ͦΕͳ͍
    • ఏҊ࢟੎Ͱ
    • ࢥ͍੾ͬͯSubmitʂ
    

    View Slide

24. PULL REQUESTΛૹΔ
    • ӳޠͷจ๏ϛεΛ͓ͦΕͳ͍
    • ࣗ෼͕࣮૷͢ΔҎ֎ͷίʔυΛ৮Βͳ͍
    • ͦͷOSSͷॻ͖ํΛकΔ
    • ࢥ͍੾ͬͯSubmitʂ
    • ؾ௕ʹ଴ͭ
    

    View Slide

25. View Slide

26. ͜ΕͰ͋ͳͨ΋OSSίϛολʔ!!
    

    View Slide

27. ̍ճίϛοτͰ͖Δͱௐࢠʹ৐ΕΔ
    

    View Slide

28. ଞʹ΋…
    • typoͷमਖ਼
    • Πϕϯτ৘ใͷߋ৽
    • υΩϡϝϯτͷॆ࣮
    

    View Slide

29. ΤϯδχΞ͸༏͍͠
    ਫ਼ҰഋͷࣦഊͩͬͨΒ༏͘͠ࢦఠͯ͘͠ΕΔ
    

    View Slide

30. ॳOSSίϛοτΛୡ੒ͯ͠ࢥͬͨ͜ͱ…
    ࢥͬͯͨΑΓϋʔυϧߴͳ͍΍Μʂ
    

    View Slide

31. ͔͠͠ɺ΋ͪΖΜ…
    ॳOSSίϛοτͷෑډΛ௿͘ଊ͑Δ͜ͱ͕Ͱ͖Δ͚ͩ
    OSS΁ͷίϛοτࣗମ͕؆୯ͳΘ͚Ͱ͸ͳ͍
    

    View Slide

32. େܕOSS΁ͷίϛοτʹඞཁͩͱײͨ͜͡ͱ
    • ίʔυͷಡΈํ
    • ࣮ͨͩ૷͢Δ͚ͩʹͱͲ·Βͳ͍ਂ͍ٕज़తͳ஌ࣝ
    • ੈͷதͰඞཁͱ͞Ε͍ͯΔػೳ
    • ͦ΋ͦ΋ͲΜͳOSS͕͋Δ͔
    

    View Slide

33. ·ͱΊ
    • ॳίϛοτ͸࠷ॳͷҰาΛ;Έͩͤ͹ͳΜͱ͔ͳΔ
    • େܕOSS΁ͷίϛοτ͸΍͸Γ͔ͳΓͷ࣮ྗ͕ඞཁ
    Ίͤ͟ʂ༗໊ίϛολʔ
    

    View Slide

34. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    ·ͩ·ͩϓϩάϥϛϯάॳΊͯ̍೥ͷͻΑͬ͜Ͱ͢ɻ
    ࣗ෼ͷ࿩͢͜ͱ͕ਖ਼͍͔͠Ͳ͏͔΋Θ͔Γ·ͤΜɻ
    ࠙਌ձͰօ͞Μ͔Βҙݟ͍͚ͨͩΔͱ޾͍Ͱ͢
    

    View Slide