自作サービスProspectsWatcherの開発報告

Transcript

1. ৽ਓݚम੒Ռใࠂ ࣗ࡞αʔϏεProspectsWatcherͷ։ൃ ؛ ګี 2021/02/12
2. ΋͘͡ • ࣗݾ঺հ • ݚमͷ಺༰ • ࣗ࡞αʔϏεProspectsWatcherʹ͍ͭͯ • ։ൃͷதͰۤ࿑ͨ͠఺ • ݚमΛ௨ֶͯ͠Μͩ͜ͱ • ࠓޙͷ՝୊
3. ݚमͷ಺༰ʹ͍ͭͯ ݚमͷ಺༰ → ࣗ࡞αʔϏε → ۤ࿑ͨ͜͠ͱ → ݚमͰͷֶͼ → ࠓޙͷ՝୊
4. ݚमͷ಺༰ • FjordBootCampͷΧϦΩϡϥϜͷҰ؀Ͱ͋Δࣗ࡞αʔϏε։ൃΛݚम ͷதʹ૊ΈࠐΜͰ௖͍ͨ • 12/1ʙ1/15·Ͱࣗ࡞αʔϏε։ൃʹऔΓ૊Ή • ฒߦͯ͠ϑΟϤϧυͷεΫϥϜ։ൃʹ΋औΓ૊Ή • 1ϲ݄൒Ͱࣾ಺ൃද͕Ͱ͖Δܗʹ͢Δ͜ͱΛ໨ඪͱͨ͠
5. ࣗ࡞αʔϏε։ൃͷྲྀΕ ※ൃදલʹͦΕͬΆ͘ฒͼସ͑ͯࡱӨͨ͠΋ͷͰ͢ 1ɽIssueͷ࡞੒ͱऔΓ૊ΉIssueͷબ୒
6. 2ɽػೳͷ࣮૷ɺPull Requestͷ࡞੒ ࣗ࡞αʔϏε։ൃͷྲྀΕ
7. 3ɽίʔυϨϏϡʔɺࢦఠ఺ͷमਖ਼ ࣗ࡞αʔϏε։ൃͷྲྀΕ
8. 4ɽReviewApproveޙMargeɺεςʔδϯά؀ڥʹσϓϩΠ 1ʹ໭Δˠ ࣗ࡞αʔϏε։ൃͷྲྀΕ
9. औΓ૊ΜͩIssueɿ38݅ ࡞੒ͨ͠PRɿ36ݸ ։ൃ࣮੷
10. ࣗ࡞αʔϏε ProspectsWatcherʹ͍ͭͯ ݚमͷ಺༰ → ࣗ࡞αʔϏε → ۤ࿑ͨ͜͠ͱ → ݚमͰͷֶͼ → ࠓޙͷ՝୊
11. ͲͷΑ͏ͳαʔϏεΛ࡞Δ͔ʁ ͋ͳ͕ͨࣗ਎ͷ໰୊Λղܾ͢Δͱ͖ɺ͋ͳ͕ͨຊؾʹͳΔπʔϧΛ࡞Γ·͢ɻ
    ΍Δؾɾ৘೤͸ΩʔϫʔυͰ͢ɻ
    ৘೤ͱ͸ͭ·Γɺ͋ͳ͕ͨຊ౰ʹ࢖͍͍ͨɺຊ౰ʹΑ͍͖͍ͯͨ͘͠ɺͱࢥ͏ ͜ͱͰ͢ɻͦͯ͠ɺಉ༷ʹଞͷਓʹ΋৘೤Λ༩͑Δํ๏ʹͳΓ·͢ɻ
    TJHOBMT
    z(FUUJOH
    3FBMzΑΓҾ༻ →ϓϩ໺ٿʹؔ͢ΔπʔϧΛ࡞Ζ͏❗
12. ࣗ෼ͷ࢖͍͍ͨ΋ͷͱ͸ʁ • ֤νʔϜͷ஫໨͍ͯ͠Δબखͷ੒੷Λ֬ೝ͍ͨ͠ • ಠࣗͷࢹ఺Ͱ੒੷ͷൺֱ͕ߦ͍͍ͨ • ্هͷχʔζΛຬͨ͢αʔϏε͕·ͩͳ͍… ࣗ෼ͷ͓ؾʹೖΓͷબखΛొ࿥ͯ͠ ੒੷Λ֬ೝɾൺֱͰ͖ΔαʔϏεΛ࡞Ζ͏❗
13. ϓϩ໺ٿ੒੷ӾཡαʔϏε ProspectsWatcher
14. ओͳػೳͱ࢖͍ํ 1ɽؾʹͳΔબखΛొ࿥ νʔϜ͔Β୳͢ํ๏ͱɺબख໊Ͱ୳͢2छྨͷํ๏Λ༻ҙ
15. 2ɽ͓ؾʹೖΓબखͷ੒੷ΛνΣοΫ ొ࿥ͨ͠બख͸࠷৽ͷ੒੷ΛҰཡͰ֬ೝͰ͖Δʢσʔλ͸ຖ೔ߋ৽ʣ ֤ࢦඪ͝ͱʹιʔτ͢Δػೳ΋࣮૷ ओͳػೳͱ࢖͍ํ
16. 3ɽ1ର1Ͱͷൺֱʹ΋ରԠ ೋਓͷબखͷ੒੷Λݟ΍͘͢ൺֱදࣔ͢Δ͜ͱ΋Մೳ ओͳػೳͱ࢖͍ํ
17. ࣮ࡍͷΞϓϦέʔγϣϯͰσϞ
18. ։ൃͷதͰۤ࿑ͨ͠఺ ݚमͷ಺༰ → ࣗ࡞αʔϏε → ۤ࿑ͨ͜͠ͱ → ݚमͰͷֶͼ → ࠓޙͷ՝୊
19. σβΠϯ໘ 1. CSSϑϨʔϜϫʔΫͷબ୒ 2. CSSϑϨʔϜϫʔΫͷӨڹൣғͷ޿͞ 3. શମͷϨΠΞ΢τ΍഑৭
20. ͋·ΓϝδϟʔͰ͸ͳ͍ ElementUIΛબ୒ https://element.eleme.io/#/en-US ͦͷ݁Ռɾɾɾ 😫ίϯϙʔωϯτͷબ୒ࢶ͕গͳ͍ʂ 😫໰୊ʹର͢Δղܾࡦͷ৘ใ΋গͳ͍ʂ 1ɽCSSϑϨʔϜϫʔΫͷબ୒
21. Railsͷviewʹ͸ Materialize Vueίϯϙʔωϯτʹ͸ Vuetify ࢖༻ՕॴɿϔομʔɺϩάΠϯը໘ etc… ࢖༻ՕॴɿνʔϜҰཡͷ֦ுύωϧɺλϒ etc… 1ɽCSSϑϨʔϜϫʔΫͷબ୒
22. ࣮૷͢Δίϯϙʔωϯτ͕ܾ·͍ͬͯΔ৔߹͸ ֤ίϯϙʔωϯτʹରԠͰ͖Δ͔Λݕ౼ͯ͠ CSSϑϨʔϜϫʔΫΛબͿ
23. 2ɽCSSϑϨʔϜϫʔΫͷӨڹൣғͷ޿͞
24. 2ɽCSSϑϨʔϜϫʔΫͷӨڹൣғͷ޿͞ ݕূπʔϧΛ࢖ͬͯௐ΂ͯΈΔͱɺMaterialize͕উखʹνΣοΫϘοΫεʹ "opacity: 0;" Λ෇Ճ͍ͯ͠Δ͜ͱ͕൑໌ʂ
25. 2ɽCSSϑϨʔϜϫʔΫͷӨڹൣғͷ޿͞ opacity͸1.0ʹॻ͖׵͑ɺposition͸initialͰଧͪফ͠Λ͢Δ͜ͱͰղܾ❗
26. CSSϑϨʔϜϫʔΫ͸ศར͕ͩ ༧ظ͠ͳ͍෦෼ʹద༻͞Εͯ͠·͏͜ͱ΋͋ΔͨΊ ஫ҙͯ͠࢖༻͢Δ
27. 3ɽશମͷϨΠΞ΢τ΍഑৭ BEFORE
28. 3ɽશମͷϨΠΞ΢τ΍഑৭ BEFORE
29. BEFORE 3ɽશମͷϨΠΞ΢τ΍഑৭ ৭ຯ͕গͳ͍ ʮө͑ʯͳ͍ ཁૉͷҐஔ͕෼͔ΓͮΒ͍ ༨ന͕গͳ͍ ৘ใͷڥ໨͕ͳ͍
30. 3ɽશମͷϨΠΞ΢τ΍഑৭ AFTER
31. 3ɽશମͷϨΠΞ΢τ΍഑৭ AFTER
32. ೔ࠒ͔Β࢖༻͍ͯ͠ΔαʔϏε΋ ͦͷσβΠϯͷཪʹ͋ΔҙਤΛߟ͑ͳ͕Β ࢖͏Α͏ʹ͢Δ
33. ػೳ໘ 1. ੒੷ιʔτػೳͷ࣮૷ 2. νʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷ λΠϛϯά
34. 1ɽ੒੷ιʔτػೳͷ࣮૷ 😫 0ͰදͤΔ੒੷ͱͦ͏Ͱͳ͍੒੷͕͋Δʢଧ཰".000"ͱ"-"͸ผʣ
35. 1ɽ੒੷ιʔτػೳͷ࣮૷ ग़৔ͷ༗ແͰ1ͱ0Λ֨ೲ͢ΔඇදࣔͷΧϥϜΛ௥Ճ ςʔϒϧදࣔͷࡍʹॳظιʔτ͓ͯ͘͜͠ͱͰԼ෦ʹݻఆ❗
36. 2ɽνʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷλΠϛϯά axiosͰඇಉظͰσʔλΛऔಘ͠ɺશબखΛදࣔ͢ΔॲཧΛ࡞੒ 😫 σʔλ͕nullͰ͋ΔͱେྔͷΤϥʔ͕ൃੜ…
37. 2ɽνʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷλΠϛϯά v-for νʔϜσʔλ VueΠϯελϯε಺ ʹఆٛ બखσʔλ axiosͰඇಉظऔಘ props νʔϜҰཡը໘ͷVueίϯϙʔωϯτͷߏ੒ ਌ίϯϙʔωϯτ ࢠίϯϙʔωϯτ
38. 2ɽνʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷλΠϛϯά ਌ίϯϙʔωϯτͷcreateޙʹ࣮ߦ͞ΕΔඇಉظॲཧ͕׬ྃ͢Δલʹ ࢠίϯϙʔωϯτͷඳը͕ߦΘΕ͍ͯͨ Vue axios create ඳը σʔλऔಘॲཧ σʔλະऔಘ error! σʔλऔಘ׬ྃ ࠶ඳը ਌ ࢠ ࢠ ಈ͍ͯΔͷʹ େྔͷΤϥʔ
39. 2ɽνʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷλΠϛϯά v-ifΛ࢖༻ͯ͠ɺaxiosͷσʔλऔಘॲཧ͕ऴ͔ྃͯ͠Βࢠίϯϙʔωϯτ ͕ඳը͞ΕΔΑ͏ʹॲཧΛมߋͨ͠ Vue axios create σʔλऔಘॲཧ σʔλະऔಘ σʔλऔಘ׬ྃ ඳը ਌ ࢠ v-if="false" v-if="true" ඳը ࢠ
40. Ұ݅མணɾɾɾʁ🤔
41. 2ɽνʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷλΠϛϯά v-for νʔϜσʔλ VueΠϯελϯε಺ ʹఆٛ બखσʔλ axiosͰඇಉظऔಘ props νʔϜҰཡը໘ͷVueίϯϙʔωϯτͷߏ੒ ਌ίϯϙʔωϯτ ࢠίϯϙʔωϯτ
42. 2ɽνʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷλΠϛϯά v-for props νʔϜҰཡը໘ͷVueίϯϙʔωϯτͷߏ੒ ਌ίϯϙʔωϯτ ࢠίϯϙʔωϯτ ·ͱΊͯAPI͔Βऔಘ͢Ε͹ྑ͍ͷͰ͸ʁ νʔϜσʔλ VueΠϯελϯε಺ ʹఆٛ બखσʔλ axiosͰඇಉظऔಘ
43. 2ɽνʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷλΠϛϯά v-for props νʔϜҰཡը໘ͷVueίϯϙʔωϯτͷߏ੒ ਌ίϯϙʔωϯτ ࢠίϯϙʔωϯτ νʔϜσʔλ VueΠϯελϯε಺ ʹఆٛ બखσʔλ axiosͰඇಉظऔಘ [ {team: "ڊਓ", batter: […], pitcher: […]}, {team: "ࡕਆ", batter: […], pitcher: […]}, {team: "த೔", batter: […], pitcher: […]}, … ] ͜ͷσʔλΛv-forͰճͤ͹OKʂʂ
44. ݚमΛ௨ֶͯ͠Μͩ͜ͱ ݚमͷ಺༰ → ࣗ࡞αʔϏε → ۤ࿑ͨ͜͠ͱ → ݚमͰͷֶͼ → ࠓޙͷ՝୊
45. ݚमΛ௨ֶͯ͠Μͩ͜ͱ 1. DRYͳίʔυΛิ଍ͯ͠੾Γग़͢ 2. ίϛοτϝοηʔδɺPRͷdescriptionͷॻ͖ํ 3. GitHub Issueͷ༗༻ੑ
46. 70ߦҎ্ͷίʔυ͕ RakeϑΝΠϧ಺ʹ💦 1ɽDRYͳίʔυΛ੾Γग़͢
47. ֤ॲཧΛΫϥεʹ੾Γग़͠ modelsԼʹอ؅ 70ߦҎ্ͷίʔυ͕ ͨͬͨ20ߦ΄Ͳʹ 1ɽDRYͳίʔυΛ੾Γग़͢
48. 2ɽίϛοτϝοηʔδɺPRͷઆ໌ͷॻ͖ํ • ͳͥͦͷมߋΛՃ͑ͨͷ͔ • PRͷ໨తɺมߋ఺ • ਃ͠ૹΓࣄ߲ • ύοέʔδ΍gemͷ৘ใ
49. 3ɽGitHub Issueͷ༗༻ੑ Θ͔Βͳ͍͜ͱ͕͋Δ৔߹͸ ͦͷύοέʔδͷIssueΛݟʹߦ͘ ։ൃऀࣗΒ͕ճ౴͍ͯ͠ΔͨΊ ৴པੑ͕ߴ͍৘ใ͕ଟ͍
50. ࠓޙͷ՝୊ ݚमͷ಺༰ → ࣗ࡞αʔϏε → ۤ࿑ͨ͜͠ͱ → ݚमͰͷֶͼ → ࠓޙͷ՝୊
51. ࠓޙͷ՝୊ɿެ։Ͱ͖Δܗʹ࢓্͛ΔͨΊʹ • ςετΛॻ͘ • τοϓϖʔδͷ࣮૷ • ϨεϙϯγϒσβΠϯ΁ͷରԠ
52. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠