Upgrade to Pro — share decks privately, control downloads, hide ads and more …

個人でつくるwebサービス

 個人でつくるwebサービス

銀座Rails#5 での登壇資料です。個人でwebサービスを作るときのtips集及びturbolinks&stimulusの紹介が主な内容です。

https://ginza-rails.connpass.com/event/112093/

Shinichi Maeshima

January 25, 2019
Tweet

More Decks by Shinichi Maeshima

Other Decks in Technology

Transcript

  1. ݸਓͰͭ͘ΔwebαʔϏε
    @willnet

    View full-size slide

  2. ࣗݾ঺հ
    4 લౡਅҰ aka @willnet or @netwillnet
    4 גࣜձࣾ΢Οϧωοτ(Ұਓձࣾ)
    4 Railsٕज़ސ໰
    4 ۭ͍ͨ࣌ؒͰ savanna.io Λ։ൃ͍ͯ͠·͢

    View full-size slide

  3. Q. Railsٕज़ސ໰ͬͯͳΜͰ͔͢
    A. ϒϩά΍εϥΠυͳͲ͋ΔͷͰͦΕಡΜͰ͍ͩ͘͞
    4 https://blog.willnet.in/entry/2018/04/09/101808
    4 https://speakerdeck.com/willnet/ji-shu-gu-wen-
    toiudong-kifang

    View full-size slide

  4. Q. savanna.io ͱ͸
    4 4೥൒͘Β͍ίπίπݸਓͰ։ൃ͍ͯ͠ΔwebαʔϏε
    4 ͓࢓ࣄ৘ใͰͭͳ͕ΔSNS
    4 ॳظͷmixi
    Έ͍ͨͳট଴੍

    View full-size slide

  5. ࠓ೔࿩͢͜ͱ
    ओʹsavanna.ioΛ୊ࡐʹͭͭ͠ɺݸਓͰwebαʔϏεΛ࡞Δ
    ͱ͖ͷtipsʹ͍ͭͯ஻Γ·͢

    View full-size slide

  6. ݸਓͰwebαʔϏε࡞ΔͷΦεεϝ
    4 ݸਓͰRailsΛ࢖ͬͯαʔϏεΛͭ͘Δͷͬͯษڧͱͯ͠࠷
    ߴͳΜͰ͢Α
    4 ͓࢓ࣄͰ࣮૷͢ΔΑΓ΋ѹ౗తʹτϥΠΞϯυΤϥʔ͕
    ΍Γ΍͍͢
    4 ͦ΋ͦ΋Railsͬͯগਓ਺ͰαʔϏε࡞ΔͨΊͷϑϨʔϜ
    ϫʔΫ
    4 αʔϏεͦͷ΋ͷͷઃܭ΋ָ͍͠

    View full-size slide

  7. ͔͠͠ݸਓͰαʔϏεΛͭ͘Δͱ͖
    ʹ͸େ͖ͳน͕͋ΔͷͰ͢Α
    ͦΕ͸…

    View full-size slide

  8. Ϟνϕʔγϣϯ͕ͳ͘ͳ
    ΔཁҼ(ݸਓwebαʔϏε
    ։ൃฤ)

    View full-size slide

  9. ৽͍ٕ͠ज़Λ࢖͓͏ͱͯ͠ػೳ௥Ճ
    ʹΊͬͪΌ࣌ؒΛ͔͚ͯ͠·͏
    4 ษڧ͍ͨ͠ͷ͔ػೳΛ࡞Γ͍ͨͷ͔
    4 ษڧʹภΓ͗͢Δͱਐḿ஗͗ͯ͢΍Δؾ͕ͳ͘ͳͬͯ͘Δ
    4 खஈ͕໨తʹͳΔ
    4 όϥϯεେࣄ

    View full-size slide

  10. ຊ࣭తͰͳ͍ͱ͜Ζʹ࣌ؒΛऔΒΕ
    ͍ͯΔ͏ͪʹ΍Δؾ͕ແ͘ͳͬͯ͘
    Δ
    4 αʔόͷϝϯςφϯε
    4 σϓϩΠ
    4 ϥΠϒϥϦͷΞοϓσʔτ
    4 ύϑΥʔϚϯενϡʔχϯά

    View full-size slide

  11. ݸਓͰۭ͍ͨ࣌ؒʹ΍Δ
    ͱ͍͏͜ͱ͸ɺ޻਺͕ݶ
    ΒΕ͍ͯΔͱ͍͏͜ͱ

    View full-size slide

  12. SaaS(PaaS)ʹ೚ͤΒΕΔ
    ͱ͜Ζ͸SaaSͰ

    View full-size slide

  13. heroku
    4 ΠϯϑϥΛ·Δͬͱ೚ͤΒΕΔ
    4 masterϒϥϯνʹϓογϡͨ͠ΒࣗಈͰσϓϩΠ
    4 ϨΠςϯγ͸ɺؾʹͳΔ͘Β͍ͷن໛ײʹͳͬͨΒ͓ۚͰ
    ղܾ͢Δ༧ఆ
    4 Private Space

    View full-size slide

  14. skylight.io
    4 ύϑΥʔϚϯεܭଌ༻
    4 10ສϦΫΤετ/݄·Ͱແྉ
    4 γϯϓϧͰݟ΍͍͢UI
    4 JSͷύϑΥʔϚϯεͳͲ͸ݟΕͳ͍͕ͦ͜͸ଥڠ

    View full-size slide

  15. codacy
    4 ίʔυͷ݈શੑΛνΣοΫ(rubocop, rubycriticΈ͍ͨͳ
    ΍ͭ)
    4 4Ϣʔβ·ͰͳΒແྉ
    4 ࣗલͰ࢓૊ΈΛ࡞ΔΑΓָ͔ͭ֬ೝ͠΍͍͢

    View full-size slide

  16. dependabot
    4 ࣗಈͰbundle updateͯ͠PRͯ͘͠ΕΔ
    4 ݸਓGitHubΞΧ΢ϯτͰ͋Ε͹privateͰ΋ແྉ
    4 gem΍npm1ͭ͝ͱʹ1PR

    View full-size slide

  17. circleci
    4 CI
    4 privateϦϙδτϦͰ΋1000෼/݄·Ͱແྉ
    4 dependabotΛ࢖͍ͬͯΔͱ1000෼/݄͸ݫ͍͔͠΋

    View full-size slide

  18. Α͍Saas͋ͬͨΒڭ͑ͯ
    ͍ͩ͘͞ ‘

    View full-size slide

  19. ࿩͸มΘͬͯϑϩϯτΤ
    ϯυ΋खΛൈ͖͍ͨ

    View full-size slide

  20. jsϑϨʔϜϫʔΫͲΕ͔ͭ͏ʁ
    4 react?
    4 vue?
    4 angular?

    View full-size slide

  21. ͲΕ΋͍ͨ΁Μͦ͏

    View full-size slide

  22. ͳΔ΂͘αʔόαΠυͰ
    ΍Γ͍͕ͨϑϩϯτΤϯ
    υ΋खؒͳͦ͘ΕͬΆ͍
    ײ͡ʹ͍ͨ͠

    View full-size slide

  23. ͦ͜ͰturbolinksͰ͢Α
    !

    View full-size slide

  24. turbolinksͱ͸
    4 rails newͨ͋͠ͱʹ͙͢ফ͢΍ͭ
    4 ͳΜ͚ͩͲศརͳΜͰ͢Αʂ
    4 ࢖ͬͯΔਓ
    !
    4 ͦ΋ͦ΋turbolinksͬͯͳΜͰ͔͢ʁͬͯਓ

    View full-size slide

  25. turbolinksͷ֓ཁ
    4 ϖʔδͷϑϧϩʔυΛ͠ͳ͍ͷͰ଎͍
    4 ϒϥ΢βͷཤྺ͸HTML5ͷhistory APIͰΧόʔ

    View full-size slide

  26. turbolinksͷϝϦοτ
    4 গͳ͍खؒͰϢʔβͷମײ଎౓ΛΞοϓͰ͖Δ
    4 ٙࣅSPAʹͰ͖Δ
    4 αʔόଆͰHTMLΛฦ͠ɺjsΛ࠷খݶʹͱͲΊͯ΋ࠓͲ
    ͖ͬΆ͍ڍಈʹͳΔ

    View full-size slide

  27. turbolinksͷࢥ૝

    View full-size slide

  28. ϦΫΤετ͕ajaxͩͱ
    Ϣʔβͷମײ଎౓্͕
    ͕ͬͯHappy

    View full-size slide

  29. ָʹϢʔβͷମݧ͕޲্͢ΔͷͰ͋
    Ε͹׆༻͍ͨ͠
    4 turbolinks͸ϦϯΫͷΈajaxԽ
    4 ϑΥʔϜ΋ajaxʹ͍ͨ͠
    4 form͸form_with͕༻ҙ͞Ε͍ͯΔ
    4 σϑΥϧτͰ remote: true
    4 ʮͳΔ΂͘ajaxʯ͕Rails(ͱ͍͏͔DHH)ͷ͓ؾ࣋ͪ

    View full-size slide

  30. POSTΛajaxͰϦΫΤετͨͦ͠ͷޙ
    ͷॲཧ
    4 POST͸GET΄Ͳ؆୯ʹ͸࣮૷Ͱ͖ͳ͍ʼʻ
    4 history api͕ରԠ͍ͯ͠ͳ͍
    4 turbolinks͸ajax POSTͰͷredirect_toΛαϙʔτͯ͠
    ͘ΕΔ
    4 redirect_to Λࠩ͠ସ͑ͯɺTurbolinks.visit()Λ࣮ߦ
    ͢Δ

    View full-size slide

  31. όϦσʔγϣϯΤϥʔ
    4 DHHతʹ͸ɺajax POSTͰͷόϦσʔγϣϯΤϥʔͷදࣔ
    ͸खಈͰؤுͬͯͶɺͱ͍͏ଶ౓
    4 ↓͜͏͍͏ͷΛຖճॻ͘
    # create.js.erb
    document.querySelector('#error').innerHTML = \
    "<%= j(render('error', model: @model)) %>";

    View full-size slide

  32. ָʹόϦσʔγϣϯΤϥʔΛදࣔ͢
    Δgem࡞Γ·ͨ͠
    4 turbolinks&&form_with೿ͷਓ͸࢖ͬͯΈ͍ͯͩ͘͞
    4 https://github.com/willnet/ajax_error_renderer

    View full-size slide

  33. (๻͸ศརͩͱࢥ͏ͷͰ
    ͕͢)turbolinks͸શવී
    ٴͯ͠ͳ͍Α͏ʹࢥΘΕ
    Δ

    View full-size slide

  34. turbolinks͕ීٴ͍ͯ͠ͳ͍ཧ༝(ਪ
    ଌ)
    4 ొ৔࣌ɺjqueryϓϥάΠϯͱ૬ੑ͕ѱ͔ͬͨ
    4 ࠓ͸reactͳͲͷjsϑϨʔϜϫʔΫ͕ීٴͯ͠͠·ͬͨ
    4 ࢓૊ΈΛཧղͤͣʹ࢖͍௧͍໨Λݟͨ
    4 ಋೖͷखؒ͸গͳ͍͚Ͳ࢖͍͜ͳ͢ʹ͸ίπ͕ඞཁ

    View full-size slide

  35. turbolinksΛ࢖ͬͨͱ͖ʹࠔΔ͜ͱ
    4 ޙॲཧΛ๨Ε͕ͪ
    4 ίʔυ͕෼ࢄ͕ͪ͠
    4 ಛఆͷϖʔδ͚࣮ͩߦ͍ͨ͠ίʔυͷهड़͕൥ࡶʹͳΓ͕
    ͪ

    View full-size slide

  36. ޙॲཧΛ๨Ε͕ͪ
    4 savanna.ioͰ࣮ࡍʹ͋ͬͨࣄྫ
    4 A͞Μʹૹͬͨ͸ͣͷϝοηʔδ͕B͞ΜʹૹΒΕͯ͠·
    ͏ʂ
    !

    View full-size slide

  37. ࠶ݱखॱ
    4 A͞ΜͱͷϝοηʔδϖʔδΛ։͘
    4 B͞Μ΁ͷϝοηʔδϖʔδ΁ભҠͯ͠ɺB͞Μ΁ϝοηʔ
    δΛૹ৴͢Δ
    4 ͢Δͱɺͳ͔ͥA͞Μ΁ϝοηʔδ͕ૹΒΕΔʂ

    View full-size slide

  38. ίʔυ
    $(document).on('turbolinks:load', () => {
    // ͜͜ͰApp.chatͷ࠶࡞੒Λېࢭ͍ͯ͠Δͷ͕ݪҼ
    if ($('#messages_form').length > 0 && !App.chat) {
    App.chat = App.cable.subscriptions.create(
    {
    channel: 'ChatChannel',
    room_code: roomCode
    },
    ...

    View full-size slide

  39. ϖʔδભҠͯ͠΋άϩʔόϧม਺͸
    Ϧηοτ͸͞Εͳ͍
    4 documentͳͲʹඥ͚ͮͨΠϕϯτ΋Ϧηοτ͞Εͳ͍
    4 γϯϓϧͳςετέʔε͚ͩͩͱؾ͚ͮͳ͍ͷͰɺ͋Δఔ
    ౓शख़͕ඞཁ

    View full-size slide

  40. ͖ͬ͞ͷίʔυɺͲ͏ղܾͨ͠Βྑ
    ͍ʁ
    4 ͍Ζ͍Ζ໰୊Λճආ͢Δํ๏͸͋Δ͚Ͳɺϝοηʔδ༻ͷ
    ϖʔδΛ཭ΕΔͱ͖ʹApp.chatΛΫϦΞ͢Δɺͱ͍͏ͷ͕
    Ͱ͖Δͱ͖Ε͍Ͱ͢Ͷ
    4 ͋ͱͰίʔυग़͠·͢

    View full-size slide

  41. ಛఆͷϖʔδ͚࣮ͩߦ͍ͨ͠ίʔυ
    ͷهड़͕൥ࡶʹͳΓ͕ͪ
    4 turbolinksΛ࠾༻͢Δͱɺjs͸جຊ1ϑΝΠϧ
    (application.js)ʹશ෦݁߹ͯ͠഑৴͢Δ͜ͱʹͳΔ
    4 ݫີʹ͸turbolinksʹݶΒͳ͍
    4 application.jsʹશ෦٧ΊࠐΉํࣜΛ࠾༻͍ͯ͠Δ৔߹
    ͸͍͍ͩͨಉ͡ײ͡ʹͳΔ

    View full-size slide

  42. ίʔυྫ(erb)
    લ४උͱͯ͠ɺDOM͔ΒcontrollerͱactionΛ൑ผͰ͖ΔΑ
    ͏ʹ͓ͯ͘͠

    View full-size slide

  43. ίʔυྫ(js)
    $(document).on('turbolinks:load', () => {
    if ($('.messages_controller').length === 0) {
    return false
    }
    // MessagesControllerͰͷΈ࣮ߦ͍ͨ͠ॲཧ

    View full-size slide

  44. ίʔυ͕ࢄΒ͔Γ͕ͪ
    turbolinksʹݶΒͣɺಛఆͷjsϑϨʔϜϫʔΫΛ࢖Θͳ͍৔߹
    ʹى͜Δ͜ͱ
    4 ϑΝΠϧͱίʔυͷରԠ෇͚ͷن໿͕ͳ͍ͷͰόϥόϥʹ
    ͳΔ
    4 users.js͔ͩΒͱ͍ͬͯϢʔβؔ࿈ͷॲཧͷΈͱ͸ݶΒ
    ͳ͍
    4 DOMͱjsͱͷରԠ෇͚͕Θ͔Γʹ͍͘

    View full-size slide

  45. ͭ·Γɺturbolinks͸ศར
    ͚ͩͲॳ৺ऀʹ͸͓͢͢
    ΊͰ͖ͳ͍ʁ

    View full-size slide

  46. ͱࢥ͍͖΍ɺͦΕΛղܾ
    ͢ΔͨΊͷϥΠϒϥϦ͕
    ͋ΔΜͰ͢Α

    View full-size slide

  47. stimulus
    4 Basecamp੡
    4 ver 1.1.1(ݱ࣌఺)
    4 Railsඪ४ϥΠϒϥϦͰ͸ͳ͍͚ͲɺturbolinksͱҰॹʹಈ
    ͔͢લఏͰ࡞ΒΕ͍ͯΔ
    4 turbolinksͳ͠Ͱ΋࢖͑Δ

    View full-size slide

  48. stimulusͷϝϦοτ
    4 ϑϩϯτΤϯυʹن໿ΛಋೖͰ͖Δ
    4 ϧʔϧ͕؆୯Ͱಋೖ͠΍͍͢
    4 ίʔυΛ੔ཧͰ͖Δ

    View full-size slide

  49. stimulusͬ͘͟Γղઆ
    4 HTMLͷdata-controllerͷ஋ͱjsଆͷϑΝΠϧ໊͕Ϛο
    ϐϯά͞Ε࣮ߦ
    4 data-actionͰDOMͱjsͷϝιου͕Ϛοϐϯά͞ΕΔ
    4 data-targetͰDOMͱjs͕Ϛοϐϯά͞ΕΔ
    4 (ίʔυྫʹ͸ࡌͬͯͳ͍͚Ͳ)data-controller͕දࣔ͞
    Εͨͱ͖ɺඇදࣔʹͳͬͨͱ͖ʹϑοΫͯ͠ॲཧΛ͔͚Δ

    View full-size slide

  50. turbolinks୯ମͰ࢖ͬͨͱ͖ͷ໰୊
    ͕ղܾͰ͖Δ
    લॲཧɺޙॲཧ͕؆୯ʹॻ͚Δ
    // messages_controller.js
    export default class extends Controller {
    connect () {
    this.subscribe()
    }
    disconnect () {
    if (App.chat) {
    App.cable.subscriptions.remove(App.chat)
    App.chat = null
    }
    }

    View full-size slide

  51. turbolinks୯ମͰ࢖ͬͨͱ͖ͷ໰୊
    ͕ղܾͰ͖Δ
    4 DOMͷଐੑΛݟΕ͹ରԠ͢ΔjsͷϑΝΠϧ͕Θ͔Δ
    4 DOMͷଐੑΛݟΕ͹jsͰ࢖͍ͬͯΔͷͩͳɺͱΘ͔Δ


    Greet


    View full-size slide

  52. turbolinks&stimulusΛ࢖͍ͭͭϑϩ
    ϯτΤϯυΛ࠷খݶʹ͢Δ
    4 ϑϩϯτΤϯυΛָʹ͍͍ײ͡ʹͰ͖Δ
    4 ॲཧΛαʔόαΠυʹدͤΔ͜ͱͰ޻਺Λ௿͘Ͱ͖Δ
    4 ݸਓ։ൃʹݶΒͣɺϑϩϯτΤϯυϚϯ͕͍ͳ͍͓࢓ࣄͰ
    ΋ศརʹ࢖͑Δ͔ͱ

    View full-size slide

  53. ·ͱΊ
    4 ݸਓͰϞνϕʔγϣϯΛอͪͭͭ։ൃ͢ΔͨΊͷtipsʹͭ
    ͍ͯ࿩͠·ͨ͠
    4 ΈΜͳ΋ݸਓͰόϯόϯwebαʔϏε࡞͍͖ͬͯ·͠ΐ͏

    View full-size slide

  54. ͔͜͜Β͸͕࣌ؒ͋ͬͨ
    Β࿩͢

    View full-size slide

  55. ଓ͚ΔͨΊͷݸਓతͳ޻

    View full-size slide

  56. ૲ۦಈ։ൃ
    4 ࠷௿Ͱ΋1೔1ίϛοτ͢Δ
    4 ͕࣌ؒͳ͍೔Ͱ΋ɺࡉ͔͍λεΫΛ1ίϛοτਐΊΔ
    4 վળ఺Λݟ͚ͭͨΒIssueʹετοΫ͓ͯ͘͠
    4 ΋͘͠͸େ͖͍ػೳΛ1ίϛοτ෼ਐΊΔ

    View full-size slide

  57. पΓΛר͖ࠐΉ
    4 ڵຯͷ͋Δਓʹख఻ͬͯ΋Β͏
    4 ਐΊ͟ΔΛಘͳ͘ͳΔ
    4 ༧ࢉʹ༨༟͕͋Ε͹ɺۀ຿ҕୗͱ͍͏ख΋͋Δ

    View full-size slide

  58. μϨͳ͍Α͏ʹࣗ෼Λݟ
    ுΔ

    View full-size slide

  59. rubocopΛ(΄΅)σϑΥϧτͰ࢖༻
    ໰୊ͳ͘։ൃͰ͖Δ
    4 class length 100
    4 linelength 80
    4 method length 10
    4 abcsize 15

    View full-size slide

  60. ·ͱΊ(ͦͷ2)
    4 ܧଓ͢ΔͨΊͷݸਓతͳίπΛ঺հ͠·ͨ͠
    4 ίπɺਓʹΑͬͯҧ͏ͷͰɺࣗ෼ʹ͋ͬͨ΍ΓํͰָ͘͠
    ܧଓͰ͖ΔΑ͏ʹؤு͍͖ͬͯ·͠ΐ͏

    View full-size slide

  61. happy development

    View full-size slide