個人でつくるwebサービス

by Shinichi Maeshima

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

SaaS(PaaS)ʹ೚ͤΒΕΔ ͱ͜Ζ͸SaaSͰ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

ͲΕ΋͍ͨ΁Μͦ͏

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

ͦ͜ͰturbolinksͰ͢Α !

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

turbolinksͷࢥ૝

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

ͭ·Γɺturbolinks͸ศར ͚ͩͲॳ৺ऀʹ͸͓͢͢ ΊͰ͖ͳ͍ʁ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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 } }

Slide 55

Slide 55 text

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

Greet

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

ଓ͚ΔͨΊͷݸਓతͳ޻ ෉

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

μϨͳ͍Α͏ʹࣗ෼Λݟ ுΔ

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

happy development