最高のマスターデータ管理手法考察 & VSCode Extension を活用した話 / developing masterdata management tool by using vscode extension

GeekGig 『スタディサプリ x Showcase Gig』 〜フロントエンドを楽しむ〜

Links:
p.6 [Deep Environment Parity CDNT 2019 - Speaker Deck](https://speakerdeck.com/spring_mt/deep-environment-parity-cdnt-2019)
p.13 [GraphQL を利用したアーキテクチャの勘所 / Architecture practices with GraphQL - Speaker Deck](https://speakerdeck.com/qsona/architecture-practices-with-graphql)
p.13 [GraphQL と Prisma から考える次のN年を見据えた技術選定 - 森 久太郎 / qsona | JSConf JP](https://jsconf.jp/2021/talk/technology-selection-for-the-next-n-years-based-on-graphql-and-prisma)
p.30 [YAML - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml)
p.48 スタディサプリ直通 https://www.saiyo-dr.jp/recruit/Entry/top.jsp?id=357 リクルート https://recruit-saiyo.jp/technology/

Transcript

1. ࠷ߴͷϚελʔσʔλ؅ཧख๏ߟ࡯ & VSCode Extension Λ׆༻ͨ͠࿩ @qsona 2021-11-18 GeekGig ʰελσΟαϓϦ x Showcase Gigʱ ʙϑϩϯτΤϯυΛָ͠Ήʙ
2. whoami • @qsona • Web Engineer at ελσΟαϓϦ (ϦΫϧʔτ) • Microservices / Rails / Node.js / GraphQL
3. 1. Ϛελʔσʔλ؅ཧʹ·ͭΘΔ Ұൠతͳ՝୊ͱϓϥΫςΟε
4. Ϛελʔσʔλͱ͸? • αʔϏεͷΤϯυϢʔβʔͰ͸ͳ͘ɺ
 αʔϏεΛӡӦ͢Δଆ͕༻ҙ͢Δσʔλ
5. Ϛελʔσʔλͷ؅ཧ • ӡӦऀͱͯ͠ɺσʔλͷೖྗɾอଘͳͲ͕Ͱ͖Δඞཁ͕͋Δ • Ͳ͏࣮ݱ͢Δ? • Web ΞϓϦͭ͘Δ? • SPA Ͱɺ࠷ߴͷ UX ͷ؅ཧը໘Λ࡞Δ?
6. Ϛελʔσʔλ؅ཧͷ՝୊ • جຊతʹɺશͯͷ؀ڥͰσʔλΛҰக͍ͤͨ͞ • ࢀߟ: Deep Environment Parity by @Spring_MT ͞Μ
 p.52 https://speakerdeck.com/spring_mt/deep-environment-parity-cdnt-2019?slide=52 • ຊ൪ʹ͍͖ͳΓσʔλ౤ೖ͢Δͷ͸ϦεΫ͕ߴ͍ • ։ൃ؀ڥͰσʔλΛ౤ೖ͠ɺ֬ೝͨ͠ޙɺͦͷ··ຊ൪ ؀ڥͰར༻͍ͨ͠ • Web ؅ཧը໘ͷ৔߹ɺstaging Ͱೖྗ࡞ۀ => ಉ͜͡ͱΛ ຊ൪Ͱ΋࡞ۀ ͱͳΓɺ࡞ۀϛεʹͭͳ͕Γ΍͍͢
7. ϓϥΫςΟεͷྫ (1)
 ϩʔΧϧͰϑΝΠϧ؅ཧ͢Δ • Web Ͱ͸ͳ͘ɺϩʔΧϧͰϑΝΠϧ؅ཧ • Git ͳͲͰόʔδϣϯ؅ཧ͢Δ • ϝϦοτ • ͋Δ࣌఺ͷঢ়ଶͰσʔλΛݻΊɺͦΕΛ֤؀ڥʹద༻Ͱ͖Δ • Ҏલͷ͋Δ࣌఺ͷঢ়ଶ·Ͱר͖໭͢͜ͱ΋ՄೳʹͳΔ • (Web Ͱ͸ͳ͘) σεΫτοϓΞϓϦͱͯ͠؅ཧπʔϧΛ࡞Δ • Electron Λ࢖͑͹ Web ͷٕज़Λར༻Ͱ͖Δ!
8. ϓϥΫςΟεͷྫ (2) Google Spreadsheets • Google Spreadsheets Ͱσʔλ؅ཧ͠ɺ͔ͦ͜ΒऔΓࠐΉ࢓૊ΈΛ࡞Δ • ϝϦοτ • දܭࢉιϑτ͸ͳΜ͔ͩΜͩͰศར... • ࣗྗͰ؅ཧπʔϧΛ࡞ΔΑΓɺ௿ίετͰͰ͖Δ • γʔτͷ࡞Γํ (γʔτ͝ͱͷΧϥϜͷܾΊํͳͲ) ʹίπ͕ඞཁ • ςʔϒϧઃܭͦͷ··ͩͱೖྗ͕ͮ͠Β͍
9. 2. ελσΟαϓϦʹ͓͚Δ Ϛελʔσʔλ؅ཧͷ࣮ફ
11. ৽ن։ൃϓϩδΣΫτͷ঺հ • ։ൃ͢Δ΋ͷ • iOS / Android / PC Web Apps • Backend APIs • ίϯςϯπΛ؅ཧ͢ΔγεςϜ => ࠓ೔ͷ࿩ͷத৺͸͜͜ • ։ൃظؒ: > 1೥ • ։ൃऀͷਓ਺: > 10ਓ
12. ৽ن։ൃϓϩδΣΫτͷ঺հ • client => gateway => backends
 શମͰ GraphQL Λ࠾༻ • gateway ͸ schema stitching Λར༻͍ͯ͠Δ • ͦͷଞར༻ٕज़ • Ruby on Rails • Node.js + TypeScript + Apollo Server + Prisma 2 • React, Apollo Client
13. ৽ن։ൃϓϩδΣΫτͷ঺հ • ڵຯ͕͋Δํ͸ͥͻɺաڈͷొஃࢿྉΛΈ͍ͯͩ͘͞ • JSConf JP 2021 ʹొஃ͠ɺGraphQL + Prisma ʹ͍ͭͯ࿩͢༧ఆͰ͢
14. ελσΟαϓϦʹ͓͚ΔϚελʔσʔλ • ֶशऀֶ͕श͢ΔͨΊͷ໰୊΍ಈըͱɺ
 ͦΕΒΛ֊૚ߏ଄ʹ·ͱΊͨ΋ͷ • ʮίϯςϯπʯͱݺΜͰ͍Δ
15. ίϯςϯπͱ͸ • ໰୊ (Question) • ໰୊จ • બ୒ࢶɾਖ਼ղ • ղઆจ • ͦͷଞɺ෇Ճతͳ৘ใ (ඪ४ղ౴࣌ؒͳͲ) • ಈը • ໰୊΍ಈըͷू߹ (Hierarchy) • ֊૚ߏ଄ʹͳ͍ͬͯΔ
16. ίϯςϯπͷಛ௃ • ྔ͕ଟ͍ • ߋ৽ස౓͕ߴ͍ • جຊతʹ͸ࣾ಺ͷਓ͕σʔλΛ࡞Δ • ࣾ಺ʹʮίϯςϯπνʔϜʯ͕͋Δ
17. ελσΟαϓϦͷ طଘͷίϯςϯπ؅ཧγεςϜ • ΋ͱ΋ͱɺҰൠϢʔβʔ͕ίϯςϯπΛ࡞Δ͜ͱΛલఏͱͯ͠ ࡞ΒΕ͍ͯͨ (UGC, User-Generated Contents) • ػೳ๛෋ͳ Web ؅ཧը໘͕ଘࡏ͢Δ
18. طଘͷίϯςϯπγεςϜͷ՝୊
19. ՝୊ (1) staging ؀ڥͰͷ֬ೝ͕೉͍͠ • Web ؅ཧը໘ͳͷͰ staging => ຊ൪ ʹσʔλΛҠ͢ͷ͕೉͍͠ • σʔλͷϦϦʔε·ͰͷྲྀΕ • ຊ൪σʔλ౤ೖ (͜ͷ࣌఺Ͱ͸ΤϯυϢʔβʔʹ͸ະެ։) • ݕূ༻ΞΧ΢ϯτͰσʔλΛ֬ೝ • ΤϯυϢʔβʔʹެ։ (ϑϥάΛཱͯΔΠϝʔδ) • ͜Ε͸͜ΕͰߟ͑ํͱͯ͠͸͋Γ͕ͩ...
 staging ؀ڥͰಉ౳ͷ΋ͷΛ֬ೝ͢Δखஈ͕ͳ͍
20. ՝୊ (2) σʔλͷଟॏ؅ཧ • ػೳ๛෋Ͱ͸͋Δ͕ɺ͋͘·Ͱ Web ্ͷ؅ཧը໘ͳͷͰɺ
 ͜Ε্Ͱશͯ࡞ۀΛ׬݁͢Δʹ͸ػೳ͕ऑ͍ • ྫ: ਤͳͲͷը૾Λ࡞Δ࡞ۀͳͲ͸ɺผͷΞϓϦέʔγϣϯͰߦ͏ • ͦͷը૾ͷݩͱͳΔσʔλ͸ɺγεςϜͰ͸؅ཧͰ͖ͳ͍ • ݁ՌɺίϯςϯπͷݩʹͳΔσʔλ͕Ұݩ؅ཧ͞Εͣɺ
 ֤࡞ۀऀͷϩʔΧϧʹࢄΒ͹ͬͯ͠·͏
21. ՝୊ (3) ࡞੒ͱೖߘ͕෼཭͞Ε͍ͯΔ • Web ؅ཧը໘͚ͩΛ࢖ͬͯίϯςϯπ࡞੒͢Δͷ͸೉͘͠ɺ
 ίϯςϯπ࡞੒ͱೖߘͷؒʹߔ͕ଘࡏ͢Δ • ίϯςϯπ͸ Word ౳Ͱ࡞੒͞Ε͍ͯΔ • ͔ͦ͜ΒεΫϦʔϯγϣοτΛࡱͬͨΓɺWeb ؅ཧը໘ʹೖྗ(సه)ͨ͠Γ͢Δ࡞ۀ͕ൃੜ͢Δ • ʮೖߘνʔϜʯ͕ಠཱͯ͠ଘࡏ͍ͯ͠Δɻ
 "ίϯ΢ΣΠͷ๏ଇ" ͷయܕతͳঢ়ଶ (γεςϜͷܗͱ૊৫ͷܗ͸Ұக͢Δ) • ཧ૝తʹ͸ɺ࡞੒ͨ͠Βͦͷ··ೖߘ͞Εͯ΄͍͠
24. ৽ίϯςϯπ؅ཧγεςϜ
25. ৽ίϯςϯπ؅ཧγεςϜͰ໨ࢦͨ͜͠ͱ • طଘͷ՝୊Λղܾ͢Δ • σʔλଟॏ؅ཧΛ๾໓͢Δ • ࡞੒ͱೖߘΛ෼͚ͣɺ࡞ͬͨ΋ͷ͕ͦͷ··ೖߘ (γεςϜʹΠϯϙʔτ) ͞ΕΔঢ়ଶʹ͢Δ • ίϯςϯπ࡞੒ͷۀ຿ʹଈͨ͠ɺ࢖͍΍͍͢΋ͷΛ࡞Δɻ
 ͦͷͨΊʹɺ։ൃऀͱίϯςϯπνʔϜͰີʹڠྗ͢Δ • ͳΔ΂͘ "࡞Βͳ͍" ͜ͱͰɺ࣮૷ίετΛ௿͘͢Δ • ੈͷதʹଘࡏ͢Δπʔϧ΍ɺ͢ͰʹଞͰ։ൃ͍ͯ͠Δ࣮૷Λ૊Έ߹ΘͤͯγεςϜԽ͢Δ
26. ৽ίϯςϯπ؅ཧγεςϜ֓ཁ • Git, GitHub Λར༻ (WebΞϓϦͰ͸ͳ͘ɺϩʔΧϧͰ࡞ۀ͢Δ) • Question ͷઃ໰จ͸ HTML Λར༻͢Δ • ֶशը໘͸ Web ΞϓϦͱͯ͠࡞͍ͬͯΔ (ωΠςΟϒΞϓϦͰ͸ WebView ར༻) ͨΊɺHTML ΛಡΈࠐΊΔ • Question ͸ YAML Ͱೖྗ • YAML ͷதͷҰ෦ʹ HTML (໰୊จ) ؚ͕·ΕΔΑ͏ͳܗ • Question ͷೖྗࢧԉπʔϧΛ VSCode Extension ͱͯ͠࡞Γɺఏڙ͢Δ • ίϯςϯπ࡞੒ऀʹ͸ VSCode Λར༻ͯ͠࡞ۀͯ͠΋Β͏ • Hierarchy ͸ CSV Ͱೖྗ
27. Question ೖྗࢧԉπʔϧ • ໾ׂ • Question (YAML + HTML) ͷೖྗࢧԉ • ϓϨϏϡʔπʔϧ • ͜ΕΛ VSCode Extension ͱͯ͠࡞ͬͨ
29. VSCode Extension ͱͯ͠࡞Δཧ༝ • ϩʔΧϧͰͷςΩετΤσΟλͱͯ͠ͷػೳΛͦͷ··࢖͑Δ • ͦͷ෦෼͔Β࡞Βͳ͍ͰࡁΉͷ͸େ͖͍ • طଘͷ VSCode Extension ͷΤίγεςϜʹ৐ΕΔ෦෼͕͋Δ • Web ͷٕज़͕࢖͑Δ • ϓϨϏϡʔπʔϧʹ͸ Web ΞϓϦͷ੒Ռ෺Λ࢖͍·Θ͍ͨ͠
30. YAML ೖྗࢧԉ • VSCode Plugin ͷ YAML Λͦͷ··ར༻ • JSON Schema Λॻ͘͜ͱͰɺYAML ͷೖྗิ׬ͱ όϦσʔγϣϯ͕Ͱ͖Δ • JSON Schema ͔Β TypeScript ͷܕΛੜ੒͠ɺίϯ ςϯπΛimport͢Δίʔυ (Node.js) Ͱ࠶ར༻ͯ͠ ͍Δ • => JSON Schema Λॻ͘ίετ͸࣮࣭ແྉ
32. HTML ೖྗࢧԉ • VSCode ͷ snippets ػೳΛ׆༻ • ίϯςϯπνʔϜ͕࢖͍͍ͨσβΠϯͷ༻్ʹ߹Θͤͯɺ
 CSS ΛϑϩϯτΤϯυʹهड़͠ɺCSS ΛؚΜͩλάશମΛ snippets ͱͯ͠ఏڙ͢Δ • σβΠϯ͸σβΠφʔͱ΋૬ஊܾͯ͠ΊΔ
33. ^ ͜ͷυΩϡϝϯτ΋ࣗಈੜ੒
34. ϓϨϏϡʔπʔϧ • ࡞ͬͨ໰୊σʔλΛϓϨϏϡʔ͢Δπʔϧ • ֶशը໘ Web ΞϓϦ͔ΒɺผͷϏϧυΛੜ੒͠ɺ
 VSCode Extension ʹόϯυϧ͍ͯ͠Δ • ΞϓϦͰݟΔͷͱશ͘ಉ͡ݟͨ໨Ͱ͸ͳ͍͕ɺίϯϙʔωϯτ Λ࢖͍ճ͢͜ͱͰɺݟͨ໨ͷࠩ෼Λগͳ͍ͯ͘͠Δ
36. ΞʔΩςΫνϟ (ΤϯυϢʔβʔ޲͚) • content service ͸ Import εΫϦϓτ ͱ API (GraphQL) ʹ෼͔Ε͍ͯΔ • Import εΫϦϓτʹ YAML ϑΝΠϧͷ ॲཧ΋ؚ·ΕΔ
37. ΞʔΩςΫνϟ (ϓϨϏϡʔπʔϧ) • ϓϨϏϡʔ༻Ϗϧυͷ React Web ΞϓϦ͸ɺੜె޲͚ͷί ϯϙʔωϯτɾϩδοΫΛ࠶ར༻͍ͨ͠ • API ͱಉ͡ܗͷ JSON ͕ཉ͍͠ • YAML ϑΝΠϧͷॲཧ (JSON σʔλԽ) ͸ content service ʹ࣮૷͞Ε͍ͯΔͷͰɺ࠶ར༻͍ͨ͠ • ͸͡Ί content service ͷϩδοΫΛϥΠϒϥϦԽͯ͠ڞ ༗͍͕ͯͨ͠ɺϦϦʔείϯτϩʔϧͳͲ͕೉͍͠ • ϓϨϏϡʔπʔϧઐ༻ͷ API Λ content service ʹ༻ҙ͠ɺ ͦ͜Ͱ Import / Read API ྆ํͷϩδοΫΛݺͼग़͢Α͏ʹ ͨ͠
38. VSCode Extension ͷ࣮૷ • TypeScript Ͱ࣮૷͍ͯ͠Δ • όϯυϧͯ͋͠Δ Web ΞϓϦ (React) ͷઐ༻ϏϧυΛɺ
 VSCode ಺ͷ webview panel ͱͯ͠Ξλον͢Δ • YAML ϑΝΠϧͷมߋΛݕ஌͠ɺ • YAML ͷσʔλΛ webview panel ʹจࣈྻͷ··౉͢ (postMessage) • webview ଆͰ Content API Λୟ͍ͯ YAML Λ JSON ʹม׵͢Δ • React Component ʹ JSON Λ౉͠ඳը͢Δ
39. Q. ίϯςϯπ࡞੒ऀ͸ 
 YAML Λهड़Ͱ͖Δͷ͔?
40. Q. ίϯςϯπ࡞੒ऀ͸ 
 YAML Λهड़Ͱ͖Δͷ͔? • A. Ͱ͖Δ
41. ॳظҊ: GUI (Form) ΋഑ஔ͢Δ • ͸͡Ί͸ʮYAML ॻ͔ͤΔͷ͸͕͢͞ʹແ஡ʯͱࢥ͍ͬͯͨ • YAML ೖྗͱಉظ͢Δ GUI (Form) ͷύωϧΛ഑ஔͨ͠ • react-jsonschema-form Λར༻ • YAML <=> Form ͸ 2-way binding
42. ॳظҊͷ՝୊ • ࣮૷͕ෳࡶʹͳͬͨ • YAML ϑΝΠϧͷopen΍editΛϑοΫʹɺผύωϧΛมԽͤ͞Δͷ͸ ൺֱత؆୯ • ͕ͩɺଞͷύωϧͷมߋΛ YAML ϑΝΠϧଆʹӨڹͤ͞Α͏ͱ͢Δ ͱߟྀ͢΂͖͜ͱ͕૿͑ͯෳࡶʹͳΔ • =>ʮϑΥʔϜ͍Βͳ͍ͷͰ͸?ʯͱ͍͏ΞΠσΟΞ͕ग़ͨ
43. ΍ͬͨ͜ͱ • ίϯςϯπ࡞੒νʔϜͱͷϞϒ࡞ۀձ • ϢʔβʔςετɾώΞϦϯά • YAML ΍ͦͷதͷ HTML ͷิ׬ʹΑΓɺΤϯδχΞҎ֎Ͱ΋
 े෼࡞ۀͰ͖Δ͜ͱ͕Θ͔ͬͨ • Ή͠Ζɺ׳Εͯ͠·͑͹ Form Ͱૢ࡞͢ΔΑΓͣͬͱָ • ҰൠతͳΤϯυϢʔβʔͱ͸ҧ͍ɺֶशίετ͸ڐ༰Ͱ͖Δ • => ʮ࢖͍΍͍͢ & ࣮૷ίετ௿͍ʯͱ͍͏େ͖ͳ੒Ռʹͭͳ͕ͬͨ
44. ։ൃνʔϜͱίϯςϯπνʔϜͷڠಇ (1) ։ൃνʔϜͱͯ͠ɺҙࣝͨ͜͠ͱ: • ։ൃऀ͕ɺϓϩμΫτϚωδϝϯτͷ໾ׂΛड͚࣋ͭ • ։ൃن໛͕େ͖͘ɺશͯΛຊ৬ͷPMʹཔΔͷ͸೉͍͠ • ۃྗؾܰʹཁ๬Λड͚ɺվળ͢Δ • "ӡ༻ͰΧόʔ" ͞ΕΔͱɺσʔλͷෛ࠴ʹͳΓɺղফ͕೉͘͠ͳΔ • ίϯςϯπपΓʹରԠ͢ΔͨΊͷӡ༻ͷόδΣοτΛ͓͖࣋ͬͯɺ
 ؆୯ͳमਖ਼͸ͦͷதͰରԠ͢ΔΑ͏ʹͨ͠ • όοΫϩάʹճ͢ͱɺଞͷλεΫͱͷ༏ઌॱҐ͚͕ͮ೉͘͠ͳΔͨΊ
45. ։ൃνʔϜͱίϯςϯπνʔϜͷڠಇ (2) ࠷ۙͷಈ޲: • υϝΠϯۦಈઃܭͷ࣮ફ • ΑΓਖ਼֓͘͠೦Λཧղͯ͠ઃܭͨ͠Γɺ࢖͏ݴ༿Λ౷Ұ͢ΔΑ͏౒ྗத • ίϯςϯπνʔϜ͔ΒɺϓϩμΫτϚωδϝϯτΛࢤ͢ਓ͕ݱΕ͍ͯΔ • ։ൃऀͱͯ͠͸ΊͪΌ͋Γ͕͍ͨ • ΩϟϦΞύεͷଟ༷Խʹ΋ܨ͕ͬͯɺͱͯ΋͍͍࿩
46. ·ͱΊ • ελσΟαϓϦͷ৽ن։ൃʹ͓͍ͯɺίϯςϯπ؅ཧͷطଘͷ՝୊ (ଟॏ؅ཧ໰୊, etc...) ʹ޲͖߹͖ͬͯͨ • طଘͷπʔϧ౳Λ͏·͘ར༻͠ɺ௿ίετͰ࣮ݱͨ͠ • ͦͷγεςϜͷҰ෦ͱͯ͠
 VSCode Extension Λར༻ͯ͠πʔϧΛ࡞ͬͨ • ίϯςϯπνʔϜͱ։ൃνʔϜ͕ڠಇ͠ɺ
 ΑΓศརͳ΋ͷΛ௿ίετͰ࡞ΕΔঢ়ଶΛ໨ࢦ͍ͯ͠Δ
47. ँࣙ • ࠓճ঺հͨ͠੒Ռ͸ɺ๻ݸਓʹଐ͢Δ΋ͷͰ͸ͳ͘ɺ
 ελσΟαϓϦ։ൃνʔϜ / ίϯςϯπνʔϜ /
 σβΠϯνʔϜ etc...ʹΑΔ΋ͷͰ͢ • ಛʹɺ։ൃνʔϜ @ywada526 @indigolain
 ίϯςϯπνʔϜ @nozomikajimoto ͷߩݙʹײँ͍ͯ͠·͢
48. We're hiring! • GraphQL, Microservices ͸΋ͪΖΜ
 ϑϩϯτΤϯυ͔ΒόοΫΤϯυ·Ͱ
 ޿͍ٕज़ʹ৮ΕΒΕΔػձ͋Γ • ·ͣ͸ΧδϡΞϧ໘ஊ͔Βɺͥͻ͝Ԡื͍ͩ͘͞ 😁 • ελσΟαϓϦ௚௨ https://www.saiyo-dr.jp/recruit/Entry/top.jsp?id=357 • ϦΫϧʔτશମ https://recruit-saiyo.jp/technology/