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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
KishiKyosuke(Kyo18)
November 18, 2022
Programming
94
0
Share
自作サービスProspectsWatcherの開発報告
KishiKyosuke(Kyo18)
November 18, 2022
More Decks by KishiKyosuke(Kyo18)
See All by KishiKyosuke(Kyo18)
Railsのオートリロード機能の仕組み
kishikyousuke
0
20
Railsアップグレード
kishikyousuke
0
72
Terraform超超入門
kishikyousuke
0
160
OAuthと仲良くなりたかった
kishikyousuke
0
1.2k
Other Decks in Programming
See All in Programming
PHP 7.4でもOpenTelemetryゼロコード計装がしたい! / PHPerKaigi 2026
arthur1
1
460
20260320登壇資料
pharct
0
140
脱 雰囲気実装!AgentCoreを良い感じにWEBアプリケーションに組み込むために
takuyay0ne
3
420
Claude Code Skill入門
mayahoney
0
460
20260313 - Grafana & Friends Taipei #1 - Kubernetes v1.36 的開發雜記:那些困在 Alpha 加護病房太久的 Metrics
tico88612
0
240
PHPのバージョンアップ時にも役立ったAST(2026年版)
matsuo_atsushi
0
280
へんな働き方
yusukebe
6
2.9k
2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法
masasuzu
0
270
Coding at the Speed of Thought: The New Era of Symfony Docker
dunglas
0
3.9k
飯MCP
yusukebe
0
440
野球解説AI Agentを開発してみた - 2026/02/27 LayerX社内LT会資料
shinyorke
PRO
0
380
PHP でエミュレータを自作して Ubuntu を動かそう
m3m0r7
PRO
2
160
Featured
See All Featured
Building Applications with DynamoDB
mza
96
7k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
330
BBQ
matthewcrist
89
10k
Evolving SEO for Evolving Search Engines
ryanjones
0
170
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
1.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
38
2.8k
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
1k
Visualization
eitanlees
150
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
The Cult of Friendly URLs
andyhume
79
6.8k
Making Projects Easy
brettharned
120
6.6k
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Λݟʹߦ͘ ։ൃऀࣗΒ͕ճ͍ͯ͠ΔͨΊ ৴པੑ͕ߴ͍ใ͕ଟ͍
ࠓޙͷ՝ ݚमͷ༰ → ࣗ࡞αʔϏε → ۤ࿑ͨ͜͠ͱ → ݚमͰͷֶͼ → ࠓޙͷ՝
ࠓޙͷ՝ɿެ։Ͱ͖Δܗʹ্͛ΔͨΊʹ • ςετΛॻ͘ • τοϓϖʔδͷ࣮ • ϨεϙϯγϒσβΠϯͷରԠ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠