Movatterモバイル変換


[0]ホーム

URL:


Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Speaker DeckSpeaker Deck
Speaker Deck

最高のマスターデータ管理手法考察 & VSCode Extension を活用した話 / d...

Avatar for qsona qsona
November 18, 2021

最高のマスターデータ管理手法考察 & 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/

Avatar for qsona

qsona

November 18, 2021
Tweet

More Decks by qsona

See All by qsona

Other Decks in Technology

See All in Technology

Featured

See All Featured

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/

[8]ページ先頭

©2009-2025 Movatter.jp