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

by qsona

Slide 1

Slide 1 text

࠷ߴͷϚελʔσʔλ؅ཧख๏ߟ࡯ & VSCode Extension Λ׆༻ͨ͠࿩ @qsona 2021-11-18 GeekGig ʰελσΟαϓϦ x Showcase Gigʱ ʙϑϩϯτΤϯυΛָ͠Ήʙ

Slide 2

Slide 2 text

whoami • @qsona • Web Engineer at ελσΟαϓϦ (ϦΫϧʔτ) • Microservices / Rails / Node.js / GraphQL

Slide 3

Slide 3 text

1. Ϛελʔσʔλ؅ཧʹ·ͭΘΔ Ұൠతͳ՝୊ͱϓϥΫςΟε

Slide 4

Slide 4 text

Ϛελʔσʔλͱ͸? • αʔϏεͷΤϯυϢʔβʔͰ͸ͳ͘ɺ  αʔϏεΛӡӦ͢Δଆ͕༻ҙ͢Δσʔλ

Slide 5

Slide 5 text

Ϛελʔσʔλͷ؅ཧ • ӡӦऀͱͯ͠ɺσʔλͷೖྗɾอଘͳͲ͕Ͱ͖Δඞཁ͕͋Δ • Ͳ͏࣮ݱ͢Δ? • Web ΞϓϦͭ͘Δ? • SPA Ͱɺ࠷ߴͷ UX ͷ؅ཧը໘Λ࡞Δ?

Slide 6

Slide 6 text

Ϛελʔσʔλ؅ཧͷ՝୊ • جຊతʹɺશͯͷ؀ڥͰσʔλΛҰக͍ͤͨ͞ • ࢀߟ: Deep Environment Parity by @Spring_MT ͞Μ  p.52 https://speakerdeck.com/spring_mt/deep-environment-parity-cdnt-2019?slide=52 • ຊ൪ʹ͍͖ͳΓσʔλ౤ೖ͢Δͷ͸ϦεΫ͕ߴ͍ • ։ൃ؀ڥͰσʔλΛ౤ೖ͠ɺ֬ೝͨ͠ޙɺͦͷ··ຊ൪ ؀ڥͰར༻͍ͨ͠ • Web ؅ཧը໘ͷ৔߹ɺstaging Ͱೖྗ࡞ۀ => ಉ͜͡ͱΛ ຊ൪Ͱ΋࡞ۀ ͱͳΓɺ࡞ۀϛεʹͭͳ͕Γ΍͍͢

Slide 7

Slide 7 text

ϓϥΫςΟεͷྫ (1)  ϩʔΧϧͰϑΝΠϧ؅ཧ͢Δ • Web Ͱ͸ͳ͘ɺϩʔΧϧͰϑΝΠϧ؅ཧ • Git ͳͲͰόʔδϣϯ؅ཧ͢Δ • ϝϦοτ • ͋Δ࣌఺ͷঢ়ଶͰσʔλΛݻΊɺͦΕΛ֤؀ڥʹద༻Ͱ͖Δ • Ҏલͷ͋Δ࣌఺ͷঢ়ଶ·Ͱר͖໭͢͜ͱ΋ՄೳʹͳΔ • (Web Ͱ͸ͳ͘) σεΫτοϓΞϓϦͱͯ͠؅ཧπʔϧΛ࡞Δ • Electron Λ࢖͑͹ Web ͷٕज़Λར༻Ͱ͖Δ!

Slide 8

Slide 8 text

ϓϥΫςΟεͷྫ (2) Google Spreadsheets • Google Spreadsheets Ͱσʔλ؅ཧ͠ɺ͔ͦ͜ΒऔΓࠐΉ࢓૊ΈΛ࡞Δ • ϝϦοτ • දܭࢉιϑτ͸ͳΜ͔ͩΜͩͰศར... • ࣗྗͰ؅ཧπʔϧΛ࡞ΔΑΓɺ௿ίετͰͰ͖Δ • γʔτͷ࡞Γํ (γʔτ͝ͱͷΧϥϜͷܾΊํͳͲ) ʹίπ͕ඞཁ • ςʔϒϧઃܭͦͷ··ͩͱೖྗ͕ͮ͠Β͍

Slide 9

Slide 9 text

2. ελσΟαϓϦʹ͓͚Δ Ϛελʔσʔλ؅ཧͷ࣮ફ

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

৽ن։ൃϓϩδΣΫτͷ঺հ • ։ൃ͢Δ΋ͷ • iOS / Android / PC Web Apps • Backend APIs • ίϯςϯπΛ؅ཧ͢ΔγεςϜ => ࠓ೔ͷ࿩ͷத৺͸͜͜ • ։ൃظؒ: > 1೥ • ։ൃऀͷਓ਺: > 10ਓ

Slide 12

Slide 12 text

৽ن։ൃϓϩδΣΫτͷ঺հ • client => gateway => backends  શମͰ GraphQL Λ࠾༻ • gateway ͸ schema stitching Λར༻͍ͯ͠Δ • ͦͷଞར༻ٕज़ • Ruby on Rails • Node.js + TypeScript + Apollo Server + Prisma 2 • React, Apollo Client

Slide 13

Slide 13 text

৽ن։ൃϓϩδΣΫτͷ঺հ • ڵຯ͕͋Δํ͸ͥͻɺաڈͷొஃࢿྉΛΈ͍ͯͩ͘͞ • JSConf JP 2021 ʹొஃ͠ɺGraphQL + Prisma ʹ͍ͭͯ࿩͢༧ఆͰ͢

Slide 14

Slide 14 text

ελσΟαϓϦʹ͓͚ΔϚελʔσʔλ • ֶशऀֶ͕श͢ΔͨΊͷ໰୊΍ಈըͱɺ  ͦΕΒΛ֊૚ߏ଄ʹ·ͱΊͨ΋ͷ • ʮίϯςϯπʯͱݺΜͰ͍Δ

Slide 15

Slide 15 text

ίϯςϯπͱ͸ • ໰୊ (Question) • ໰୊จ • બ୒ࢶɾਖ਼ղ • ղઆจ • ͦͷଞɺ෇Ճతͳ৘ใ (ඪ४ղ౴࣌ؒͳͲ) • ಈը • ໰୊΍ಈըͷू߹ (Hierarchy) • ֊૚ߏ଄ʹͳ͍ͬͯΔ

Slide 16

Slide 16 text

ίϯςϯπͷಛ௃ • ྔ͕ଟ͍ • ߋ৽ස౓͕ߴ͍ • جຊతʹ͸ࣾ಺ͷਓ͕σʔλΛ࡞Δ • ࣾ಺ʹʮίϯςϯπνʔϜʯ͕͋Δ

Slide 17

Slide 17 text

ελσΟαϓϦͷ طଘͷίϯςϯπ؅ཧγεςϜ • ΋ͱ΋ͱɺҰൠϢʔβʔ͕ίϯςϯπΛ࡞Δ͜ͱΛલఏͱͯ͠ ࡞ΒΕ͍ͯͨ (UGC, User-Generated Contents) • ػೳ๛෋ͳ Web ؅ཧը໘͕ଘࡏ͢Δ

Slide 18

Slide 18 text

طଘͷίϯςϯπγεςϜͷ՝୊

Slide 19

Slide 19 text

՝୊ (1) staging ؀ڥͰͷ֬ೝ͕೉͍͠ • Web ؅ཧը໘ͳͷͰ staging => ຊ൪ ʹσʔλΛҠ͢ͷ͕೉͍͠ • σʔλͷϦϦʔε·ͰͷྲྀΕ • ຊ൪σʔλ౤ೖ (͜ͷ࣌఺Ͱ͸ΤϯυϢʔβʔʹ͸ະެ։) • ݕূ༻ΞΧ΢ϯτͰσʔλΛ֬ೝ • ΤϯυϢʔβʔʹެ։ (ϑϥάΛཱͯΔΠϝʔδ) • ͜Ε͸͜ΕͰߟ͑ํͱͯ͠͸͋Γ͕ͩ...  staging ؀ڥͰಉ౳ͷ΋ͷΛ֬ೝ͢Δखஈ͕ͳ͍

Slide 20

Slide 20 text

՝୊ (2) σʔλͷଟॏ؅ཧ • ػೳ๛෋Ͱ͸͋Δ͕ɺ͋͘·Ͱ Web ্ͷ؅ཧը໘ͳͷͰɺ  ͜Ε্Ͱશͯ࡞ۀΛ׬݁͢Δʹ͸ػೳ͕ऑ͍ • ྫ: ਤͳͲͷը૾Λ࡞Δ࡞ۀͳͲ͸ɺผͷΞϓϦέʔγϣϯͰߦ͏ • ͦͷը૾ͷݩͱͳΔσʔλ͸ɺγεςϜͰ͸؅ཧͰ͖ͳ͍ • ݁ՌɺίϯςϯπͷݩʹͳΔσʔλ͕Ұݩ؅ཧ͞Εͣɺ  ֤࡞ۀऀͷϩʔΧϧʹࢄΒ͹ͬͯ͠·͏

Slide 21

Slide 21 text

՝୊ (3) ࡞੒ͱೖߘ͕෼཭͞Ε͍ͯΔ • Web ؅ཧը໘͚ͩΛ࢖ͬͯίϯςϯπ࡞੒͢Δͷ͸೉͘͠ɺ  ίϯςϯπ࡞੒ͱೖߘͷؒʹߔ͕ଘࡏ͢Δ • ίϯςϯπ͸ Word ౳Ͱ࡞੒͞Ε͍ͯΔ • ͔ͦ͜ΒεΫϦʔϯγϣοτΛࡱͬͨΓɺWeb ؅ཧը໘ʹೖྗ(సه)ͨ͠Γ͢Δ࡞ۀ͕ൃੜ͢Δ • ʮೖߘνʔϜʯ͕ಠཱͯ͠ଘࡏ͍ͯ͠Δɻ  "ίϯ΢ΣΠͷ๏ଇ" ͷయܕతͳঢ়ଶ (γεςϜͷܗͱ૊৫ͷܗ͸Ұக͢Δ) • ཧ૝తʹ͸ɺ࡞੒ͨ͠Βͦͷ··ೖߘ͞Εͯ΄͍͠

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

৽ίϯςϯπ؅ཧγεςϜ

Slide 25

Slide 25 text

৽ίϯςϯπ؅ཧγεςϜͰ໨ࢦͨ͜͠ͱ • طଘͷ՝୊Λղܾ͢Δ • σʔλଟॏ؅ཧΛ๾໓͢Δ • ࡞੒ͱೖߘΛ෼͚ͣɺ࡞ͬͨ΋ͷ͕ͦͷ··ೖߘ (γεςϜʹΠϯϙʔτ) ͞ΕΔঢ়ଶʹ͢Δ • ίϯςϯπ࡞੒ͷۀ຿ʹଈͨ͠ɺ࢖͍΍͍͢΋ͷΛ࡞Δɻ  ͦͷͨΊʹɺ։ൃऀͱίϯςϯπνʔϜͰີʹڠྗ͢Δ • ͳΔ΂͘ "࡞Βͳ͍" ͜ͱͰɺ࣮૷ίετΛ௿͘͢Δ • ੈͷதʹଘࡏ͢Δπʔϧ΍ɺ͢ͰʹଞͰ։ൃ͍ͯ͠Δ࣮૷Λ૊Έ߹ΘͤͯγεςϜԽ͢Δ

Slide 26

Slide 26 text

৽ίϯςϯπ؅ཧγεςϜ֓ཁ • Git, GitHub Λར༻ (WebΞϓϦͰ͸ͳ͘ɺϩʔΧϧͰ࡞ۀ͢Δ) • Question ͷઃ໰จ͸ HTML Λར༻͢Δ • ֶशը໘͸ Web ΞϓϦͱͯ͠࡞͍ͬͯΔ (ωΠςΟϒΞϓϦͰ͸ WebView ར༻) ͨΊɺHTML ΛಡΈࠐΊΔ • Question ͸ YAML Ͱೖྗ • YAML ͷதͷҰ෦ʹ HTML (໰୊จ) ؚ͕·ΕΔΑ͏ͳܗ • Question ͷೖྗࢧԉπʔϧΛ VSCode Extension ͱͯ͠࡞Γɺఏڙ͢Δ • ίϯςϯπ࡞੒ऀʹ͸ VSCode Λར༻ͯ͠࡞ۀͯ͠΋Β͏ • Hierarchy ͸ CSV Ͱೖྗ

Slide 27

Slide 27 text

Question ೖྗࢧԉπʔϧ • ໾ׂ • Question (YAML + HTML) ͷೖྗࢧԉ • ϓϨϏϡʔπʔϧ • ͜ΕΛ VSCode Extension ͱͯ͠࡞ͬͨ

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

VSCode Extension ͱͯ͠࡞Δཧ༝ • ϩʔΧϧͰͷςΩετΤσΟλͱͯ͠ͷػೳΛͦͷ··࢖͑Δ • ͦͷ෦෼͔Β࡞Βͳ͍ͰࡁΉͷ͸େ͖͍ • طଘͷ VSCode Extension ͷΤίγεςϜʹ৐ΕΔ෦෼͕͋Δ • Web ͷٕज़͕࢖͑Δ • ϓϨϏϡʔπʔϧʹ͸ Web ΞϓϦͷ੒Ռ෺Λ࢖͍·Θ͍ͨ͠

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

HTML ೖྗࢧԉ • VSCode ͷ snippets ػೳΛ׆༻ • ίϯςϯπνʔϜ͕࢖͍͍ͨσβΠϯͷ༻్ʹ߹Θͤͯɺ  CSS ΛϑϩϯτΤϯυʹهड़͠ɺCSS ΛؚΜͩλάશମΛ snippets ͱͯ͠ఏڙ͢Δ • σβΠϯ͸σβΠφʔͱ΋૬ஊܾͯ͠ΊΔ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

ϓϨϏϡʔπʔϧ • ࡞ͬͨ໰୊σʔλΛϓϨϏϡʔ͢Δπʔϧ • ֶशը໘ Web ΞϓϦ͔ΒɺผͷϏϧυΛੜ੒͠ɺ  VSCode Extension ʹόϯυϧ͍ͯ͠Δ • ΞϓϦͰݟΔͷͱશ͘ಉ͡ݟͨ໨Ͱ͸ͳ͍͕ɺίϯϙʔωϯτ Λ࢖͍ճ͢͜ͱͰɺݟͨ໨ͷࠩ෼Λগͳ͍ͯ͘͠Δ

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

ΞʔΩςΫνϟ (ΤϯυϢʔβʔ޲͚) • content service ͸ Import εΫϦϓτ ͱ API (GraphQL) ʹ෼͔Ε͍ͯΔ • Import εΫϦϓτʹ YAML ϑΝΠϧͷ ॲཧ΋ؚ·ΕΔ

Slide 37

Slide 37 text

ΞʔΩςΫνϟ (ϓϨϏϡʔπʔϧ) • ϓϨϏϡʔ༻Ϗϧυͷ React Web ΞϓϦ͸ɺੜె޲͚ͷί ϯϙʔωϯτɾϩδοΫΛ࠶ར༻͍ͨ͠ • API ͱಉ͡ܗͷ JSON ͕ཉ͍͠ • YAML ϑΝΠϧͷॲཧ (JSON σʔλԽ) ͸ content service ʹ࣮૷͞Ε͍ͯΔͷͰɺ࠶ར༻͍ͨ͠ • ͸͡Ί content service ͷϩδοΫΛϥΠϒϥϦԽͯ͠ڞ ༗͍͕ͯͨ͠ɺϦϦʔείϯτϩʔϧͳͲ͕೉͍͠ • ϓϨϏϡʔπʔϧઐ༻ͷ API Λ content service ʹ༻ҙ͠ɺ ͦ͜Ͱ Import / Read API ྆ํͷϩδοΫΛݺͼग़͢Α͏ʹ ͨ͠

Slide 38

Slide 38 text

VSCode Extension ͷ࣮૷ • TypeScript Ͱ࣮૷͍ͯ͠Δ • όϯυϧͯ͋͠Δ Web ΞϓϦ (React) ͷઐ༻ϏϧυΛɺ  VSCode ಺ͷ webview panel ͱͯ͠Ξλον͢Δ • YAML ϑΝΠϧͷมߋΛݕ஌͠ɺ • YAML ͷσʔλΛ webview panel ʹจࣈྻͷ··౉͢ (postMessage) • webview ଆͰ Content API Λୟ͍ͯ YAML Λ JSON ʹม׵͢Δ • React Component ʹ JSON Λ౉͠ඳը͢Δ

Slide 39

Slide 39 text

Q. ίϯςϯπ࡞੒ऀ͸   YAML Λهड़Ͱ͖Δͷ͔?

Slide 40

Slide 40 text

Q. ίϯςϯπ࡞੒ऀ͸   YAML Λهड़Ͱ͖Δͷ͔? • A. Ͱ͖Δ

Slide 41

Slide 41 text

ॳظҊ: GUI (Form) ΋഑ஔ͢Δ • ͸͡Ί͸ʮYAML ॻ͔ͤΔͷ͸͕͢͞ʹແ஡ʯͱࢥ͍ͬͯͨ • YAML ೖྗͱಉظ͢Δ GUI (Form) ͷύωϧΛ഑ஔͨ͠ • react-jsonschema-form Λར༻ • YAML <=> Form ͸ 2-way binding

Slide 42

Slide 42 text

ॳظҊͷ՝୊ • ࣮૷͕ෳࡶʹͳͬͨ • YAML ϑΝΠϧͷopen΍editΛϑοΫʹɺผύωϧΛมԽͤ͞Δͷ͸ ൺֱత؆୯ • ͕ͩɺଞͷύωϧͷมߋΛ YAML ϑΝΠϧଆʹӨڹͤ͞Α͏ͱ͢Δ ͱߟྀ͢΂͖͜ͱ͕૿͑ͯෳࡶʹͳΔ • =>ʮϑΥʔϜ͍Βͳ͍ͷͰ͸?ʯͱ͍͏ΞΠσΟΞ͕ग़ͨ

Slide 43

Slide 43 text

΍ͬͨ͜ͱ • ίϯςϯπ࡞੒νʔϜͱͷϞϒ࡞ۀձ • ϢʔβʔςετɾώΞϦϯά • YAML ΍ͦͷதͷ HTML ͷิ׬ʹΑΓɺΤϯδχΞҎ֎Ͱ΋  े෼࡞ۀͰ͖Δ͜ͱ͕Θ͔ͬͨ • Ή͠Ζɺ׳Εͯ͠·͑͹ Form Ͱૢ࡞͢ΔΑΓͣͬͱָ • ҰൠతͳΤϯυϢʔβʔͱ͸ҧ͍ɺֶशίετ͸ڐ༰Ͱ͖Δ • => ʮ࢖͍΍͍͢ & ࣮૷ίετ௿͍ʯͱ͍͏େ͖ͳ੒Ռʹͭͳ͕ͬͨ

Slide 44

Slide 44 text

։ൃνʔϜͱίϯςϯπνʔϜͷڠಇ (1) ։ൃνʔϜͱͯ͠ɺҙࣝͨ͜͠ͱ: • ։ൃऀ͕ɺϓϩμΫτϚωδϝϯτͷ໾ׂΛड͚࣋ͭ • ։ൃن໛͕େ͖͘ɺશͯΛຊ৬ͷPMʹཔΔͷ͸೉͍͠ • ۃྗؾܰʹཁ๬Λड͚ɺվળ͢Δ • "ӡ༻ͰΧόʔ" ͞ΕΔͱɺσʔλͷෛ࠴ʹͳΓɺղফ͕೉͘͠ͳΔ • ίϯςϯπपΓʹରԠ͢ΔͨΊͷӡ༻ͷόδΣοτΛ͓͖࣋ͬͯɺ  ؆୯ͳमਖ਼͸ͦͷதͰରԠ͢ΔΑ͏ʹͨ͠ • όοΫϩάʹճ͢ͱɺଞͷλεΫͱͷ༏ઌॱҐ͚͕ͮ೉͘͠ͳΔͨΊ

Slide 45

Slide 45 text

։ൃνʔϜͱίϯςϯπνʔϜͷڠಇ (2) ࠷ۙͷಈ޲: • υϝΠϯۦಈઃܭͷ࣮ફ • ΑΓਖ਼֓͘͠೦Λཧղͯ͠ઃܭͨ͠Γɺ࢖͏ݴ༿Λ౷Ұ͢ΔΑ͏౒ྗத • ίϯςϯπνʔϜ͔ΒɺϓϩμΫτϚωδϝϯτΛࢤ͢ਓ͕ݱΕ͍ͯΔ • ։ൃऀͱͯ͠͸ΊͪΌ͋Γ͕͍ͨ • ΩϟϦΞύεͷଟ༷Խʹ΋ܨ͕ͬͯɺͱͯ΋͍͍࿩

Slide 46

Slide 46 text

·ͱΊ • ελσΟαϓϦͷ৽ن։ൃʹ͓͍ͯɺίϯςϯπ؅ཧͷطଘͷ՝୊ (ଟॏ؅ཧ໰୊, etc...) ʹ޲͖߹͖ͬͯͨ • طଘͷπʔϧ౳Λ͏·͘ར༻͠ɺ௿ίετͰ࣮ݱͨ͠ • ͦͷγεςϜͷҰ෦ͱͯ͠  VSCode Extension Λར༻ͯ͠πʔϧΛ࡞ͬͨ • ίϯςϯπνʔϜͱ։ൃνʔϜ͕ڠಇ͠ɺ  ΑΓศརͳ΋ͷΛ௿ίετͰ࡞ΕΔঢ়ଶΛ໨ࢦ͍ͯ͠Δ

Slide 47

Slide 47 text

ँࣙ • ࠓճ঺հͨ͠੒Ռ͸ɺ๻ݸਓʹଐ͢Δ΋ͷͰ͸ͳ͘ɺ  ελσΟαϓϦ։ൃνʔϜ / ίϯςϯπνʔϜ /  σβΠϯνʔϜ etc...ʹΑΔ΋ͷͰ͢ • ಛʹɺ։ൃνʔϜ @ywada526 @indigolain  ίϯςϯπνʔϜ @nozomikajimoto ͷߩݙʹײँ͍ͯ͠·͢

Slide 48

Slide 48 text

We're hiring! • GraphQL, Microservices ͸΋ͪΖΜ  ϑϩϯτΤϯυ͔ΒόοΫΤϯυ·Ͱ  ޿͍ٕज़ʹ৮ΕΒΕΔػձ͋Γ • ·ͣ͸ΧδϡΞϧ໘ஊ͔Βɺͥͻ͝Ԡื͍ͩ͘͞ 😁 • ελσΟαϓϦ௚௨ https://www.saiyo-dr.jp/recruit/Entry/top.jsp?id=357 • ϦΫϧʔτશମ https://recruit-saiyo.jp/technology/