GitHub の README をいい感じにする / Cool Readme

LT for M3 TechTalk

Transcript

1. GitHub ͷ README Λ͍͍ײ͡ʹ͢Δ
   @blue_1617
   

   View Slide

2. ࢲ͸୭ʁ
   blue (@blue_1617)
   https://blue0513.github.io/show_room/
   2
   ‣ ΤϜεϦʔגࣜձࣾ ιϑτ΢ΣΞΤϯδχΞ
   ‣ Emacs, Ruby, JavaScript
   ‣ VisualStudio, C#
   ‣ ےτϨΛ࠷ۙ͸͡Ίͨ
   ‣ ମॏ͕4Ωϩۙ͘૿͑ɺ੒ՌΛײ͍ͯ͡Δ
   ‣ ࠓظΦεεϝΞχϝ
   ‣ ΞϑϦΧͷαϥϦʔϚϯ
   

   View Slide

3. GitHub ͷ README Λ͍͍ײ͡ʹ͢Δ
   

   View Slide

4. ࠓճͷΰʔϧʂʂ 4
   

   View Slide

5. ࠓճͷΰʔϧʂʂ 5
   ͳΜ͔ͭ·ΒΜͳ......
   
   

   View Slide

6. ࠓճͷΰʔϧʂʂ 6
   

   View Slide

7. ࠓճͷΰʔϧʂʂ 7
   ͔͍͍ͬ͜ʂʂʂ
   
   

   View Slide

8. ࠓճͷΰʔϧʂʂ 8
   https://github.com/blue0513/slackdeck-proto
   Project Name, Release Version, DL, ESLint, Jest
   Λදࣔͨ͠ Badge Λ README ʹ͚ͭΔ
   

   View Slide

9. ඞཁͳཁૉͨͪ 9
   README ΛؚΜͩΞϓϦέʔγϣϯ
   

   View Slide

10. 10
    ඞཁͳཁૉͨͪ
    GitHub
    

    View Slide

11. 11
    ඞཁͳཁૉͨͪ
    ESLint
    

    View Slide

12. 12
    ඞཁͳཁૉͨͪ
    Jest
    

    View Slide

13. 13
    ඞཁͳཁૉͨͪ
    Badge
    

    View Slide

14. 14
    ඞཁͳཁૉͨͪ
    Badge
    Jest
    ESLint
    GitHub
    

    View Slide

15. 15
    ໨࣍
    ‣ README ΛؚΜͩΞϓϦ
    ‣ GitHub Actions ͱ͸
    ‣ ESLint Λ CI Ͱճ͢
    ‣ Jest Λ CI Ͱճ͢
    ‣ README ʹ Badge Λ௥Ճ͢Δ
    

    View Slide

16. README ΛؚΜͩΞϓϦέʔγϣϯ 16
    Slack Λ TweetDeck ෩ʹݟΔπʔϧ
    https://github.com/blue0513/slackdeck-proto
    

    View Slide

17. README ΛؚΜͩΞϓϦέʔγϣϯ 17
    
    Slack Λ TweetDeck ෩ʹݟΔπʔϧ
    https://github.com/blue0513/slackdeck-proto
    

    View Slide

18. 18
    ໨࣍
    ‣ README ΛؚΜͩΞϓϦ
    ‣ GitHub Actions ͱ͸
    ‣ ESLint Λ CI Ͱճ͢
    ‣ Jest Λ CI Ͱճ͢
    ‣ README ʹ Badge Λ௥Ճ͢Δ
    

    View Slide

19. 19
    GitHub Actions
    https://github.com/features/actions
    

    View Slide

20. https://github.com/features/actions
    GitHub Actions 20
    https://github.com/features/actions
    ৄࡉ͸ެࣜΛݟͯ͘Ε͍͞ʂ
    ‣ CircleCI ΍ Travis Λ࢖Θͣʹ CI/CD Ͱ͖Δػೳ
    ‣ Linux, Windows, macOS ʹ΋ରԠ
    ‣ 3rd party ੡ͷ Action Λར༻Մೳ
    ‣ yml Ͱ Workflow ΛఆٛՄೳ
    ‣ Public Repo: Free!
    ‣ Private Repo: ैྔ՝ۚੑ
    

    View Slide

21. 21
    ໨࣍
    ‣ README ΛؚΜͩΞϓϦ
    ‣ GitHub Actions ͱ͸
    ‣ ESLint Λ CI Ͱճ͢
    ‣ Jest Λ CI Ͱճ͢
    ‣ README ʹ Badge Λ௥Ճ͢Δ
    

    View Slide

22. ESLint Λ CI Ͱಈ͔ͯ͠Έͨ 22
    $ touch REPOSITORY/.github/workflows/eslint.yml
    
    $ emacs -nw eslint.yml
    
    $ git add --all & git commit -m "add eslint"
    
    $ git push
    yml ΛσΟϨΫτϦʹ௥Ճͯ͠ push ͢Δ
    

    View Slide

23. ESLint Λ CI Ͱಈ͔ͯ͠Έͨ 23
    push ࣌ʹಈ͘
    ubuntu Ͱಈ͘
    root directory ΁
    ESLint !
    

    View Slide

24. ESLint Λ CI Ͱಈ͔ͯ͠Έͨ 24
    Actions λϒͰ ESLint ͕࣮ߦ͞ΕΔ
    

    View Slide

25. 25
    ໨࣍
    ‣ README ΛؚΜͩΞϓϦ
    ‣ GitHub Actions ͱ͸
    ‣ ESLint Λ CI Ͱճ͢
    ‣ Jest Λ CI Ͱճ͢
    ‣ README ʹ Badge Λ௥Ճ͢Δ
    

    View Slide

26. Jest Λ CI Ͱಈ͔ͯ͠Έͨ 26
    $ touch REPOSITORY/.github/workflows/jest.yml
    
    $ emacs -nw jest.yml
    
    $ git add --all & git commit -m "add jest"
    
    $ git push
    yml ΛσΟϨΫτϦʹ௥Ճͯ͠ push ͢Δ
    

    View Slide

27. Jest Λ CI Ͱಈ͔ͯ͠Έͨ 27
    push ࣌ʹಈ͘
    ubuntu Ͱ࣮ߦ
    Node ͕ೖΔ
    Jest !!
    

    View Slide

28. Jest Λ CI Ͱಈ͔ͯ͠Έͨ 28
    Actions λϒͰ Jest ͕࣮ߦ͞ΕΔ
    

    View Slide

29. 29
    ໨࣍
    ‣ README ΛؚΜͩΞϓϦ
    ‣ GitHub Actions ͱ͸
    ‣ ESLint Λ CI Ͱճ͢
    ‣ Jest Λ CI Ͱճ͢
    ‣ README ʹ Badge Λ௥Ճ͢Δ
    

    View Slide

30. README ʹ Badge Λ௥Ճͯ͠Έͨ 30
    GitHub ͷ README ͰΑ͘ݟΔ͍ͭ͜ΒΛ......
    

    View Slide

31. README ʹ Badge Λ௥Ճͯ͠Έͨ 31
    GitHub ͷ README ͰΑ͘ݟΔ͍ͭ͜ΒΛ௥Ճ͢Δ
    

    View Slide

32. README ʹ Badge Λ௥Ճͯ͠Έͨ 32
    https://shields.io/
    shileds.io Λ࢖ͬͯ Badge Λ࡞Δ
    

    View Slide

33. README ʹ Badge Λ௥Ճͯ͠Έͨ 33
    https://shields.io/
    shileds.io Λ࢖ͬͯ Badge Λ࡞Δ
    

    View Slide

34. README ʹ Badge Λ௥Ճͯ͠Έͨ 34
    ྫ͑͹ɺBuild ؔ࿈ͷ Badge ΋ͨ͘͞Μ͋Δ
    

    View Slide

35. README ʹ Badge Λ௥Ճͯ͠Έͨ 35
    Markdown ʹຒΊࠐΉ৔߹ɺLink Λॻ͚͹Α͍
    
    Custom Badge
    
    Release Version
    /github/v/release/:user/:repo /travis/:user/:repo
    , etc ...
    

    View Slide

36. README ʹ Badge Λ௥Ճͯ͠Έͨ 36
    GitHub Actions ͷ৔߹ɺshields.io Λ࢖Θ͍͚ͣΔ
    
    Jest
    
    ESLint
    https://github.com/{owner}/{repo}/workflows/{workflow_name}/badge.svg)
    

    View Slide

37. 
    ͱ͍͏Θ͚Ͱɺ৭ʑ΍͚ͬͨͲ.....
    

    View Slide

38. View Slide

39. View Slide

40. View Slide

41. ࠓճͷΰʔϧʂʂ 41
    https://github.com/blue0513/slackdeck-proto
    Project Name, Release Version, DL, ESLint, Jest
    Λදࣔͨ͠ Badge ͕ README ʹ͍ͭͨʂ
    
    

    View Slide

42. ·ͱΊ 42
    ‣ GitHub Actions Ͱ CI/CD ΛճͤΔΑ͏ʹͳͬͨ
    ‣ yml ఆٛʹΑͬͯ ESLint, Jest ͳͲ͕࣮ߦ
    ‣ Public Repository ͸ແྉ
    ‣ Shields.io Ͱ Badge Λ࡞੒Ͱ͖ΔΑ͏ʹͳͬͨ
    ‣ Repository ͷ಺༰ΛಡΈऔͬͯࣗಈ࡞੒
    ‣ Custom Badge ͰΦϦδφϧײ΋ग़ͤΔ
    ‣ README ͕ͦΕͬΆ͘ͳͬͨʂ
    
    

    View Slide