$30 off During Our Annual Pro Sale. View Details »

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

Taiju Aoki
November 08, 2019

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

LT for M3 TechTalk

Taiju Aoki

November 08, 2019
Tweet

More Decks by Taiju Aoki

Other Decks in Programming

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 Λॻ͚͹Α͍
    ![logo](https://img.shields.io/badge/SlackDeck-Proto-blue)
    Custom Badge
    ![version](https://img.shields.io/github/v/release/blue0513/slackdeck-proto)
    Release Version
    /github/v/release/:user/:repo /travis/:user/:repo
    , etc ...

    View Slide

  36. README ʹ Badge Λ௥Ճͯ͠Έͨ 36
    GitHub Actions ͷ৔߹ɺshields.io Λ࢖Θ͍͚ͣΔ
    ![jest](https://github.com/blue0513/slackdeck-proto/workflows/jest/badge.svg)
    Jest
    ![eslint](https://github.com/blue0513/slackdeck-proto/workflows/eslint/badge.svg)
    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