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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
KishiKyosuke(Kyo18)
November 18, 2022
Programming
0
93
自作サービスProspectsWatcherの開発報告
KishiKyosuke(Kyo18)
November 18, 2022
Tweet
Share
More Decks by KishiKyosuke(Kyo18)
See All by KishiKyosuke(Kyo18)
Railsのオートリロード機能の仕組み
kishikyousuke
0
17
Railsアップグレード
kishikyousuke
0
71
Terraform超超入門
kishikyousuke
0
150
OAuthと仲良くなりたかった
kishikyousuke
0
1.2k
Other Decks in Programming
See All in Programming
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
180
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
petamoriken
0
210
コマンドとリード間の連携に対する脅威分析フレームワーク
pandayumi
1
470
「ブロックテーマでは再現できない」は本当か?
inc2734
0
1k
15年続くIoTサービスのSREエンジニアが挑む分散トレーシング導入
melonps
2
230
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
280
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
180
それ、本当に安全? ファイルアップロードで見落としがちなセキュリティリスクと対策
penpeen
7
4k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
620
MUSUBIXとは
nahisaho
0
140
CSC307 Lecture 09
javiergs
PRO
1
840
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
tosuri13
5
800
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.8k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
350
What's in a price? How to price your products and services
michaelherold
247
13k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.1k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
650
GraphQLとの向き合い方2022年版
quramy
50
14k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
1.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
How to make the Groovebox
asonas
2
1.9k
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
290
The Language of Interfaces
destraynor
162
26k
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Λݟʹߦ͘ ։ൃऀࣗΒ͕ճ͍ͯ͠ΔͨΊ ৴པੑ͕ߴ͍ใ͕ଟ͍
ࠓޙͷ՝ ݚमͷ༰ → ࣗ࡞αʔϏε → ۤ࿑ͨ͜͠ͱ → ݚमͰͷֶͼ → ࠓޙͷ՝
ࠓޙͷ՝ɿެ։Ͱ͖Δܗʹ্͛ΔͨΊʹ • ςετΛॻ͘ • τοϓϖʔδͷ࣮ • ϨεϙϯγϒσβΠϯͷରԠ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠