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

qsona

November 18, 2021

Tweet Share

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. ελσΟαϓϦʹ͓͚Δ Ϛελʔσʔλ؅ཧͷ࣮ફ

10. None

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 ؅ཧը໘ʹೖྗ(సه)ͨ͠Γ͢Δ࡞ۀ͕ൃੜ͢Δ • ʮೖߘνʔϜʯ͕ಠཱͯ͠ଘࡏ͍ͯ͠Δɻ
 "ίϯ΢ΣΠͷ๏ଇ" ͷయܕతͳঢ়ଶ (γεςϜͷܗͱ૊৫ͷܗ͸Ұக͢Δ) • ཧ૝తʹ͸ɺ࡞੒ͨ͠Βͦͷ··ೖߘ͞Εͯ΄͍͠
22. None
23. None

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 ͱͯ͠࡞ͬͨ
28. None

29. VSCode Extension ͱͯ͠࡞Δཧ༝ • ϩʔΧϧͰͷςΩετΤσΟλͱͯ͠ͷػೳΛͦͷ··࢖͑Δ • ͦͷ෦෼͔Β࡞Βͳ͍ͰࡁΉͷ͸େ͖͍ • طଘͷ VSCode

    Extension ͷΤίγεςϜʹ৐ΕΔ෦෼͕͋Δ • Web ͷٕज़͕࢖͑Δ • ϓϨϏϡʔπʔϧʹ͸ Web ΞϓϦͷ੒Ռ෺Λ࢖͍·Θ͍ͨ͠

30. YAML ೖྗࢧԉ • VSCode Plugin ͷ YAML Λͦͷ··ར༻ • JSON

    Schema Λॻ͘͜ͱͰɺYAML ͷೖྗิ׬ͱ όϦσʔγϣϯ͕Ͱ͖Δ • JSON Schema ͔Β TypeScript ͷܕΛੜ੒͠ɺίϯ ςϯπΛimport͢Δίʔυ (Node.js) Ͱ࠶ར༻ͯ͠ ͍Δ • => JSON Schema Λॻ͘ίετ͸࣮࣭ແྉ
31. None

32. HTML ೖྗࢧԉ • VSCode ͷ snippets ػೳΛ׆༻ • ίϯςϯπνʔϜ͕࢖͍͍ͨσβΠϯͷ༻్ʹ߹Θͤͯɺ
 CSS

    ΛϑϩϯτΤϯυʹهड़͠ɺCSS ΛؚΜͩλάશମΛ snippets ͱͯ͠ఏڙ͢Δ • σβΠϯ͸σβΠφʔͱ΋૬ஊܾͯ͠ΊΔ

33. ^ ͜ͷυΩϡϝϯτ΋ࣗಈੜ੒

34. ϓϨϏϡʔπʔϧ • ࡞ͬͨ໰୊σʔλΛϓϨϏϡʔ͢Δπʔϧ • ֶशը໘ Web ΞϓϦ͔ΒɺผͷϏϧυΛੜ੒͠ɺ
 VSCode Extension ʹόϯυϧ͍ͯ͠Δ

    • ΞϓϦͰݟΔͷͱશ͘ಉ͡ݟͨ໨Ͱ͸ͳ͍͕ɺίϯϙʔωϯτ Λ࢖͍ճ͢͜ͱͰɺݟͨ໨ͷࠩ෼Λগͳ͍ͯ͘͠Δ
35. None

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/