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

RubyでPrettierを使ってみた

fuqda
December 27, 2020

 RubyでPrettierを使ってみた

Tama.rb #25 年忘れLT会の発表資料です。

fuqda

December 27, 2020
Tweet

More Decks by fuqda

Other Decks in Programming

Transcript

  1. RubyͰPrettierΛ
    ࢖ͬͯΈͨ
    Tama.rb #25 ೥๨ΕLTձ
    2020.12.27@fuqda90

    View Slide

  2. About me fuqda (;ͩ͘)
    • 2017೥11݄ʙݱࡏ
    ීஈ͸ܙൺणपลͰ
    RubyΛॻ͍ͯΛ৯΂ͯ·͢ɻ
    Twitter : ˏfuqda90

    View Slide

  3. ͜͜࠷ۙɺ
    RubyͰPrettierΛ
    ࢖͏ͷ͕Ұ෦ͷؒͰ
    ੝Γ্͕͍ͬͯΔͦ͏

    View Slide

  4. ͱ͍͏Θ͚Ͱʂ
    ࣮ࡍʹࢼͭͭ͠ɺ
    ͲΜͳײ͡ͳͷ͔ͷ
    ڞ༗ΛΏΔ͘͠Α͏͔
    ͱࢥ͍·͢

    View Slide

  5. ࠓճ͓࿩͢Δ͜ͱ
    • Prettierͦͷ΋ͷͷ࿩
    • ओͳઃఆपΓͷ࿩
    • ܰ͘৮ͬͨॴײతͳ࿩

    View Slide

  6. ࠓճ͓࿩͠ͳ͍͜ͱ
    • ࣮ӡ༻తͳ࿩
    (ӡ༻தͷαʔϏεʹద༻ͯ͠ͳ͍ͷͰ)
    • RubyCopͱͷൺֱతͳಥͬࠐΜͩ࿩

    View Slide

  7. ໨࣍
    ɾͦ΋ͦ΋Prettierͬͯʁ
    ɾRubyͰPrettierΛ࢖͏ํ๏
    ɾ࢖ͬͯΈͨॴײ

    View Slide

  8. ໨࣍
    ▶︎ ͦ΋ͦ΋Prettierͬͯʁ
    ɾRubyͰPrettierΛ࢖͏ํ๏
    ɾ࢖ͬͯΈͨॴײ

    View Slide

  9. Prettier
    • Node.jsͰಈ࡞͢ΔίʔυϑΥʔϚολʔ
    • Rubyք۾ͩͱRuboCopతͳΞϨ
    • ֤छIDEͰ֦ுػೳ͔Β΋ར༻Մ
    • 2020/12/11 ʹruby plugin v1.0͕ϦϦʔε

    View Slide

  10. ໨࣍
    ɾͦ΋ͦ΋Prettierͬͯʁ
    ɾRubyͰPrettierΛ࢖͏ํ๏
    ɾ࢖ͬͯΈͨॴײ

    View Slide

  11. ໨࣍
    ɾͦ΋ͦ΋Prettierͬͯʁ
    ▶︎ RubyͰPrettierΛ࢖͏ํ๏
    ɾ࢖ͬͯΈͨॴײ

    View Slide

  12. gem ‘prettier’ ΛೖΕΔ
    Auto correct ίϚϯυɿ
    bundle exec rbprettier --write ‘**/*.rb’
    ઃఆͷมߋํ๏ɿ
    .prettierrc ʹఆٛΛ௥Ճ
    ※ ͦͷଞ npm / yarnͰ΋ @prettier/plugin-ruby ͷ
    ϓϥάΠϯͰରԠՄೳ

    View Slide

  13. ⚠஫ҙ
    Rubyɿ2.5~
    Nodeɿ8.3~
    ※2020೥࣌఺
    ϨΨγʔؾຯͳϓϩδΣΫτ
    ͩͱ࢖͑ͳ͍ͷͰ஫ҙ

    View Slide

  14. .prettierrc ͷઃఆ
    ྫ1) ม਺ల։ͷͳ͍৔߹ͷγϯάϧΫΥʔτ
    {
    "rubySingleQuote": true
    }
    -str = "จࣈྻ"
    +str = 'จࣈྻ'

    View Slide

  15. .prettierrc ͷઃఆ
    ྫ2) จࣈྻɾγϯϘϧ഑ྻϦςϥϧͷਪ঑
    {
    "rubyArrayLiteral": true
    }
    -beatles = ["john", "paul", "george", "ringo"]
    +beatles = %w[john paul george ringo]
    -nirvana = [:kurt, :kris, :dave]
    +nirvana = %i[kurt kris dave]

    View Slide

  16. .prettierrc ͷઃఆ
    ྫ3) ϋογϡϩέοτͷඇਪ঑
    {
    "rubyHashLabel": true
    }
    -{ :’radio_name' => 'ϋογϡϩέοτେ޷͖' }
    +{ ‘radio_name’: 'ϋογϡϩέοτେ޷͖' }

    View Slide

  17. ͦͷଞͷઃఆ͸ެࣜΛࢀর

    View Slide

  18. ࣮ԋͯ͠ΈΔ

    View Slide

  19. ໨࣍
    ɾͦ΋ͦ΋Prettierͬͯʁ
    ɾRubyͰPrettierΛ࢖͏ํ๏
    ɾ࢖ͬͯΈͨॴײ

    View Slide

  20. ໨࣍
    ɾͦ΋ͦ΋Prettierͬͯʁ
    ɾRubyͰPrettierΛ࢖͏ํ๏
    ▶︎ ࢖ͬͯΈͨॴײ

    View Slide

  21. ྑͦ͞͏ͳͱ͜Ζ
    • RuboCopΑΓ΋(ؾ࣋ͪ΄Μͷগ͠)଎ͦ͏
    • Prettier͕ೖ͍ͬͯΕ͹ɺ
    ผ్gemΛೖΕͳͯ͘΋࢖͑Δͷ͸ศར✨

    View Slide

  22. ؾʹͳͬͨͱ͜Ζʙͦͷ1ʙ
    • ↓Auto correctͨ͠ࡍʹίϯιʔϧʹ
    ࣮ߦ࣌ؒͷΈग़ͯɺԿͷϧʔϧʹҾֻ͔ͬͬͯमਖ਼͞Εͨ
    ͷ͔ग़ͯ͜ͳ͍఺͸ͪΐͬͱؾʹͳͬͨ…
    $ bundle exec rbprettier --write 'prettier.rb'
    prettier.rb 370ms
    • JS༻ͷPrettierΛRubyʹస༻ͨ͠΋ͷͳͷͰ
    ౰ͨΓલ͚ͩͲRubyʹ޲͚ͨϧʔϧ͕গͳ͍ʁ
    (RuboCop΄Ͳϧʔϧ͕ॆ࣮ͯ͠ͳ͍)

    View Slide

  23. ؾʹͳͬͨͱ͜Ζʙͦͷ2ʙ
    • ઃఆΦϓγϣϯΛௐ΂͍ͨͱ͖ʹ
    Prettier for Ruby ͷϖʔδͱ
    Prettier ࣗମͷϖʔδΛߦͬͨΓདྷͨΓ͢Δ
    ͷ͕໘౗
    →Prettierࣗମͷ͜ͱ͸ެࣜΛݟͯͶʂͬͯ
    ֎෦ϖʔδΛͨΒ͍ճ͢ͷmʓngʓidײ͋Δ

    View Slide

  24. ॴײ·ͱΊ
    • ݱ࣌఺ͩͱRuboCop͔Β৐Γ׵͑Λ
    ݕ౼ग़དྷΔ΄ͲʮίϨ͍͍͍͢͝ʂʯͱ͍͏
    ܾఆଧతͳ΋ͷ͸ͳ͔ͬͨҹ৅…
    • ղੳ͕ମײతʹͪΐͬͱ͚ͩ଎͔ͬͨͷͰɺ
    ϧʔϧ΍ॾʑ͕ॆ࣮͖ͯͨ͠Β
    Ұͭͷબ୒ࢶͱͯ͠͸ΞϦ͔΋ʁ

    View Slide

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

    View Slide