Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
自作サービスProspectsWatcherの開発報告
Search
KishiKyosuke(Kyo18)
November 18, 2022
Programming
0
82
自作サービスProspectsWatcherの開発報告
KishiKyosuke(Kyo18)
November 18, 2022
Tweet
Share
More Decks by KishiKyosuke(Kyo18)
See All by KishiKyosuke(Kyo18)
Railsアップグレード
kishikyousuke
0
60
Terraform超超入門
kishikyousuke
0
120
OAuthと仲良くなりたかった
kishikyousuke
0
980
Other Decks in Programming
See All in Programming
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
250
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.3k
Site Reliability Engineering for GMO
pyama86
8
1k
Ruby Pattern Matching
bkuhlmann
0
930
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
450
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
540
Fast JSX: Don't clone props object #28768
yossydev
1
130
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
370
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
370
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
450
Fragment Composition of GraphQL
quramy
7
1k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Code Review Best Practice
trishagee
55
15k
BBQ
matthewcrist
80
8.8k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Unsuck your backbone
ammeep
663
57k
Typedesign – Prime Four
hannesfritz
36
2.1k
Building an army of robots
kneath
300
41k
Transcript
৽ਓݚमՌใࠂ ࣗ࡞αʔϏεProspectsWatcherͷ։ൃ ؛ ګี 2021/02/12
͘͡ • ࣗݾհ • ݚमͷ༰ • ࣗ࡞αʔϏεProspectsWatcherʹ͍ͭͯ • ։ൃͷதͰۤ࿑ͨ͠ •
ݚमΛ௨ֶͯ͠Μͩ͜ͱ • ࠓޙͷ՝
ݚमͷ༰ʹ͍ͭͯ ݚमͷ༰ → ࣗ࡞αʔϏε → ۤ࿑ͨ͜͠ͱ → ݚमͰͷֶͼ → ࠓޙͷ՝
ݚमͷ༰ • FjordBootCampͷΧϦΩϡϥϜͷҰͰ͋Δࣗ࡞αʔϏε։ൃΛݚम ͷதʹΈࠐΜͰ͍ͨ • 12/1ʙ1/15·Ͱࣗ࡞αʔϏε։ൃʹऔΓΉ • ฒߦͯ͠ϑΟϤϧυͷεΫϥϜ։ൃʹऔΓΉ • 1ϲ݄Ͱࣾൃද͕Ͱ͖Δܗʹ͢Δ͜ͱΛඪͱͨ͠
ࣗ࡞αʔϏε։ൃͷྲྀΕ ※ൃදલʹͦΕͬΆ͘ฒͼସ͑ͯࡱӨͨ͠ͷͰ͢ 1ɽIssueͷ࡞ͱऔΓΉIssueͷબ
2ɽػೳͷ࣮ɺPull Requestͷ࡞ ࣗ࡞αʔϏε։ൃͷྲྀΕ
3ɽίʔυϨϏϡʔɺࢦఠͷमਖ਼ ࣗ࡞αʔϏε։ൃͷྲྀΕ
4ɽReviewApproveޙMargeɺεςʔδϯάڥʹσϓϩΠ 1ʹΔˠ ࣗ࡞αʔϏε։ൃͷྲྀΕ
औΓΜͩIssueɿ38݅ ࡞ͨ͠PRɿ36ݸ ։ൃ࣮
ࣗ࡞αʔϏε ProspectsWatcherʹ͍ͭͯ ݚमͷ༰ → ࣗ࡞αʔϏε → ۤ࿑ͨ͜͠ͱ → ݚमͰͷֶͼ →
ࠓޙͷ՝
ͲͷΑ͏ͳαʔϏεΛ࡞Δ͔ʁ ͋ͳ͕ͨࣗͷΛղܾ͢Δͱ͖ɺ͋ͳ͕ͨຊؾʹͳΔπʔϧΛ࡞Γ·͢ɻ ΔؾɾΩʔϫʔυͰ͢ɻ ͱͭ·Γɺ͋ͳ͕ͨຊʹ͍͍ͨɺຊʹΑ͍͖͍ͯͨ͘͠ɺͱࢥ͏ ͜ͱͰ͢ɻͦͯ͠ɺಉ༷ʹଞͷਓʹΛ༩͑Δํ๏ʹͳΓ·͢ɻ TJHOBMTz(FUUJOH3FBMzΑΓҾ༻ →ϓϩٿʹؔ͢ΔπʔϧΛ࡞Ζ͏❗
ࣗͷ͍͍ͨͷͱʁ • ֤νʔϜͷ͍ͯ͠ΔબखͷΛ֬ೝ͍ͨ͠ • ಠࣗͷࢹͰͷൺֱ͕ߦ͍͍ͨ • ্هͷχʔζΛຬͨ͢αʔϏε͕·ͩͳ͍… ࣗͷ͓ؾʹೖΓͷબखΛొͯ͠ Λ֬ೝɾൺֱͰ͖ΔαʔϏεΛ࡞Ζ͏❗
ϓϩٿӾཡαʔϏε ProspectsWatcher
ओͳػೳͱ͍ํ 1ɽؾʹͳΔબखΛొ νʔϜ͔Β୳͢ํ๏ͱɺબख໊Ͱ୳͢2छྨͷํ๏Λ༻ҙ
2ɽ͓ؾʹೖΓબखͷΛνΣοΫ ొͨ͠બख࠷৽ͷΛҰཡͰ֬ೝͰ͖Δʢσʔλຖߋ৽ʣ ֤ࢦඪ͝ͱʹιʔτ͢Δػೳ࣮ ओͳػೳͱ͍ํ
3ɽ1ର1ͰͷൺֱʹରԠ ೋਓͷબखͷΛݟ͘͢ൺֱදࣔ͢Δ͜ͱՄೳ ओͳػೳͱ͍ํ
࣮ࡍͷΞϓϦέʔγϣϯͰσϞ
։ൃͷதͰۤ࿑ͨ͠ ݚमͷ༰ → ࣗ࡞αʔϏε → ۤ࿑ͨ͜͠ͱ → ݚमͰͷֶͼ → ࠓޙͷ՝
σβΠϯ໘ 1. CSSϑϨʔϜϫʔΫͷબ 2. CSSϑϨʔϜϫʔΫͷӨڹൣғͷ͞ 3. શମͷϨΠΞτ৭
͋·ΓϝδϟʔͰͳ͍ ElementUIΛબ https://element.eleme.io/#/en-US ͦͷ݁Ռɾɾɾ 😫ίϯϙʔωϯτͷબࢶ͕গͳ͍ʂ 😫ʹର͢Δղܾࡦͷใগͳ͍ʂ 1ɽCSSϑϨʔϜϫʔΫͷબ
Railsͷviewʹ Materialize Vueίϯϙʔωϯτʹ Vuetify ༻ՕॴɿϔομʔɺϩάΠϯը໘ etc… ༻ՕॴɿνʔϜҰཡͷ֦ுύωϧɺλϒ etc… 1ɽCSSϑϨʔϜϫʔΫͷબ
࣮͢Δίϯϙʔωϯτ͕ܾ·͍ͬͯΔ߹ ֤ίϯϙʔωϯτʹରԠͰ͖Δ͔Λݕ౼ͯ͠ CSSϑϨʔϜϫʔΫΛબͿ
2ɽCSSϑϨʔϜϫʔΫͷӨڹൣғͷ͞
2ɽCSSϑϨʔϜϫʔΫͷӨڹൣғͷ͞ ݕূπʔϧΛͬͯௐͯΈΔͱɺMaterialize͕উखʹνΣοΫϘοΫεʹ "opacity: 0;" ΛՃ͍ͯ͠Δ͜ͱ͕໌ʂ
2ɽCSSϑϨʔϜϫʔΫͷӨڹൣғͷ͞ opacity1.0ʹॻ͖͑ɺpositioninitialͰଧͪফ͠Λ͢Δ͜ͱͰղܾ❗
CSSϑϨʔϜϫʔΫศར͕ͩ ༧ظ͠ͳ͍෦ʹద༻͞Εͯ͠·͏͜ͱ͋ΔͨΊ ҙͯ͠༻͢Δ
3ɽશମͷϨΠΞτ৭ BEFORE
3ɽશମͷϨΠΞτ৭ BEFORE
BEFORE 3ɽશମͷϨΠΞτ৭ ৭ຯ͕গͳ͍ ʮө͑ʯͳ͍ ཁૉͷҐஔ͕͔ΓͮΒ͍ ༨ന͕গͳ͍ ใͷڥ͕ͳ͍
3ɽશମͷϨΠΞτ৭ AFTER
3ɽશମͷϨΠΞτ৭ AFTER
ࠒ͔Β༻͍ͯ͠ΔαʔϏε ͦͷσβΠϯͷཪʹ͋ΔҙਤΛߟ͑ͳ͕Β ͏Α͏ʹ͢Δ
ػೳ໘ 1. ιʔτػೳͷ࣮ 2. νʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷ λΠϛϯά
1ɽιʔτػೳͷ࣮ 😫 0ͰදͤΔͱͦ͏Ͱͳ͍͕͋Δʢଧ".000"ͱ"-"ผʣ
1ɽιʔτػೳͷ࣮ ग़ͷ༗ແͰ1ͱ0Λ֨ೲ͢ΔඇදࣔͷΧϥϜΛՃ ςʔϒϧදࣔͷࡍʹॳظιʔτ͓ͯ͘͜͠ͱͰԼ෦ʹݻఆ❗
2ɽνʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷλΠϛϯά axiosͰඇಉظͰσʔλΛऔಘ͠ɺશબखΛදࣔ͢ΔॲཧΛ࡞ 😫 σʔλ͕nullͰ͋ΔͱେྔͷΤϥʔ͕ൃੜ…
2ɽνʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷλΠϛϯά v-for νʔϜσʔλ VueΠϯελϯε ʹఆٛ બखσʔλ axiosͰඇಉظऔಘ props νʔϜҰཡը໘ͷVueίϯϙʔωϯτͷߏ ίϯϙʔωϯτ
ࢠίϯϙʔωϯτ
2ɽνʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷλΠϛϯά ίϯϙʔωϯτͷcreateޙʹ࣮ߦ͞ΕΔඇಉظॲཧ͕ྃ͢Δલʹ ࢠίϯϙʔωϯτͷඳը͕ߦΘΕ͍ͯͨ Vue axios create ඳը σʔλऔಘॲཧ σʔλະऔಘ error!
σʔλऔಘྃ ࠶ඳը ࢠ ࢠ ಈ͍ͯΔͷʹ େྔͷΤϥʔ
2ɽνʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷλΠϛϯά v-ifΛ༻ͯ͠ɺaxiosͷσʔλऔಘॲཧ͕ऴ͔ྃͯ͠Βࢠίϯϙʔωϯτ ͕ඳը͞ΕΔΑ͏ʹॲཧΛมߋͨ͠ Vue axios create σʔλऔಘॲཧ σʔλະऔಘ σʔλऔಘྃ ඳը
ࢠ v-if="false" v-if="true" ඳը ࢠ
Ұ݅མணɾɾɾʁ🤔
2ɽνʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷλΠϛϯά v-for νʔϜσʔλ VueΠϯελϯε ʹఆٛ બखσʔλ axiosͰඇಉظऔಘ props νʔϜҰཡը໘ͷVueίϯϙʔωϯτͷߏ ίϯϙʔωϯτ
ࢠίϯϙʔωϯτ
2ɽνʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷλΠϛϯά v-for props νʔϜҰཡը໘ͷVueίϯϙʔωϯτͷߏ ίϯϙʔωϯτ ࢠίϯϙʔωϯτ ·ͱΊͯAPI͔Βऔಘ͢Εྑ͍ͷͰʁ νʔϜσʔλ VueΠϯελϯε ʹఆٛ
બखσʔλ axiosͰඇಉظऔಘ
2ɽνʔϜҰཡը໘ͷVueͷඳըͱඇಉظॲཧͷλΠϛϯά v-for props νʔϜҰཡը໘ͷVueίϯϙʔωϯτͷߏ ίϯϙʔωϯτ ࢠίϯϙʔωϯτ νʔϜσʔλ VueΠϯελϯε ʹఆٛ બखσʔλ
axiosͰඇಉظऔಘ [ {team: "ڊਓ", batter: […], pitcher: […]}, {team: "ࡕਆ", batter: […], pitcher: […]}, {team: "த", batter: […], pitcher: […]}, … ] ͜ͷσʔλΛv-forͰճͤOKʂʂ
ݚमΛ௨ֶͯ͠Μͩ͜ͱ ݚमͷ༰ → ࣗ࡞αʔϏε → ۤ࿑ͨ͜͠ͱ → ݚमͰͷֶͼ → ࠓޙͷ՝
ݚमΛ௨ֶͯ͠Μͩ͜ͱ 1. DRYͳίʔυΛิͯ͠Γग़͢ 2. ίϛοτϝοηʔδɺPRͷdescriptionͷॻ͖ํ 3. GitHub Issueͷ༗༻ੑ
70ߦҎ্ͷίʔυ͕ RakeϑΝΠϧʹ💦 1ɽDRYͳίʔυΛΓग़͢
֤ॲཧΛΫϥεʹΓग़͠ modelsԼʹอ 70ߦҎ্ͷίʔυ͕ ͨͬͨ20ߦ΄Ͳʹ 1ɽDRYͳίʔυΛΓग़͢
2ɽίϛοτϝοηʔδɺPRͷઆ໌ͷॻ͖ํ • ͳͥͦͷมߋΛՃ͑ͨͷ͔ • PRͷతɺมߋ • ਃ͠ૹΓࣄ߲ • ύοέʔδgemͷใ
3ɽGitHub Issueͷ༗༻ੑ Θ͔Βͳ͍͜ͱ͕͋Δ߹ ͦͷύοέʔδͷIssueΛݟʹߦ͘ ։ൃऀࣗΒ͕ճ͍ͯ͠ΔͨΊ ৴པੑ͕ߴ͍ใ͕ଟ͍
ࠓޙͷ՝ ݚमͷ༰ → ࣗ࡞αʔϏε → ۤ࿑ͨ͜͠ͱ → ݚमͰͷֶͼ → ࠓޙͷ՝
ࠓޙͷ՝ɿެ։Ͱ͖Δܗʹ্͛ΔͨΊʹ • ςετΛॻ͘ • τοϓϖʔδͷ࣮ • ϨεϙϯγϒσβΠϯͷରԠ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠