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

TypeScript を活用してサービス構築頑張ってみた話 / 20190906_v-send...

girigiribauer
September 06, 2019

TypeScript を活用してサービス構築頑張ってみた話 / 20190906_v-sendai_girigiribauer

girigiribauer

September 06, 2019
Tweet

More Decks by girigiribauer

Other Decks in Technology

Transcript

  1. 技術的な側面 • ྆ํ TypeScript • ϑϩϯτΤϯυ • Vue.js + TypeScript

    • Atomic Design + Storybook ͰΧλϩάԽ • όοΫΤϯυ • Express + TypeScript • AWS Λશ໘తʹ࠾༻ • OpenAPI Λར༻ͨ͠ API υΩϡϝϯτͷڞ༗
  2. ٕज़બఆͷ࿩ > ৚݅ • ͳͥͦΕΛબΜ͔ͩʁ͸৚݅ʹΑܾͬͯ·Δ • ෭ۀͷਓͰ΋ೖΓ΍͍͢ମ੍ʹ • ٕज़తͳϨΠϠʔΛബ͘ɾগͳ͍ͨ͘͠
 →

    Α͘࢖ΘΕΔϑϨʔϜϫʔΫͷಋೖ΁ • มߋΛݕ஌͠΍͘͢ɺप஌͠΍͍ͨ͘͢͠
 → ࣮ߦ࣌ΤϥʔΑΓ΋ίϯύΠϧΤϥʔΛ • ৘ใڞ༗ͷ࣌ؒΛѹॖ͠ɺ͙͢ணखͰ͖ΔΑ͏ʹ
 →υΩϡϝϯςʔγϣϯͷॆ࣮
  3. ٕज़બఆͷ࿩ > ৚݅ʢಛʹϑϩϯτΤϯυʣ • ͳͥͦΕΛબΜ͔ͩʁ͸৚݅ʹΑܾͬͯ·Δ • ෭ۀͷਓͰ΋ೖΓ΍͍͢ମ੍ʹ • ٕज़తͳϨΠϠʔΛബ͘ɾগͳ͍ͨ͘͠
 →Vue.jsͰϨʔϧʹ৐Γͭͭɺֶशίετ΋Լ͛Δ

    • มߋΛݕ஌͠΍͘͢ɺप஌͠΍͍ͨ͘͢͠
 → TypeScript ͰܕͷαϙʔτΛ • ৘ใڞ༗ͷ࣌ؒΛѹॖ͠ɺ͙͢ணखͰ͖ΔΑ͏ʹ
 →Atomic Design + Storybook ͰΧλϩάԽ
  4. やって良かったこと、
 あまり効果なかったこと • [Great] Code Formatter ͷಋೖ • [Great] TypeScript

    ͷಋೖ • [Good] OpenAPI ͷಋೖ • [Good?] Vue.js ͷಋೖ • [No Good] ϦϙδτϦߏ੒ • [Good] υΩϡϝϯςʔγϣϯ
  5. [Great] Code Formatter の導入 • Golang Ͱݴ͏ͱඪ४Ͱ༻ҙ͞Ε͍ͯΔ Gofmt • prettier

    Λશ໘తʹಋೖʢ prettier + ESLint ͷߏ੒ʣ • ͜Ε͸ͳ͍ͱμϝͳ΍ͭ • ύοέʔδ1ͭͰͬ͘͞ͱ࢖͑ΔΑ͏ʹͳͬͯཉ͍͠ • ༗໊Ͳ͜ΖͷϑϨʔϜϫʔΫ͸ඪ४Ͱೖͬͯͯ
 ཉ͍͠
  6. [Great] TypeScript の導入 • ܕͷαϙʔτ͸ૉ੖Β͍͠ • ࢖͑Δͱ͜Ζ͔Β࢖ͬͪΌ͑͹ OK • OpenAPI

    ͱͷ૊Έ߹ΘͤͰܕͷมߋΛ
 ݕ஌Ͱ͖ΔͷͰɺมߋʹؾ͚ͮΔʢޙड़ʣ
  7. [Good] OpenAPI の導入 • `openapi.yaml` Λॻ͍ͯ `openapi.d.ts` ͱ͍͏ܕఆٛϑΝΠϧΛు͖ग़͢Α͏ʹ • ෭ۀͷνʔϜϝϯόʔᐌ͘ɺݟͯͳ͍ؒʹ

    OpenAPI ͷఆ͕ٛมΘͬͯ΋ɺ
 ܕͷϛεϚονͰΤϥʔ͕ग़ΔͷͰมߋݕ஌͠΍͍͢ • ҰํͰ·ͩ OpenAPI generator Λ্ख͘׆༻ͯ͠͏Μ͵Μɺ
 Έ͍ͨͳͷ͸ग़དྷ͍ͯͳ͍ • όοΫΤϯυͰ͸ express-openapi Λ࠾༻͠Α͏ͱ͕ͨ͠ɺ্ख͘࢖͑ͳ͔ͬ ͨ • ݱࡏ͸ܕ৘ใΛ׆༻͢ΔͷͱɺυΩϡϝϯςʔγϣϯͷ2఺Ͱ࢖͍ͬͯΔঢ়ଶ
  8. [Good] OpenAPI の導入 • dtsgenerator Λ࢖͏
 https://github.com/horiuchi/dtsgenerator • `dtsgen openapi.yaml

    -o ./src/@types/openapi.d.ts` Λ
 `npm run typegen` Ͱݺ΂ΔΑ͏ʹ 型情報を d.ts ファイルに変換 バックエンドで 使う フロントエンドで 使う(これから)
  9. まとめ • νʔϜ಺Ͱڞ௨ೝࣝΛ࣋ͭɺڞ௨ೝࣝΛ࣋ͭͨΊͷ
 ࢓૊ΈΛಋೖ͢Δ • Vue.js ͰϨʔϧʹ৐ΓͭͭɺTypeScript Ͱܕͷαϙʔ τΛड͚ͭͭɺ Atomic

    Design + Storybook ͰΧλ ϩάԽɺυΩϡϝϯςʔγϣϯؤுΔͳͲɾɾɾ • ΠέͯΔ͔Βͱ͔Ͱ͸ͳ͘ɺ
 ৚݅΍νʔϜʹԠٕͨ͡ज़બఆΛ͢Δ
  10. おまけ: 太平洋フェリー情報 • S৸୆ɺ࠷௿ݶͷϓϥΠόγʔ͸֬อͰ͖Δ • ໊ݹ԰ɾઋ୆ؒͰS৸୆ͳΒɺ
 1͔݄લͷૣׂͩͱ൒ֹͷ 5,000 ԁʢ͍҆ʣ •

    ͝൧࣋ͪࠐΜͰ΋͍͍ܰ͠৯΋͋Δ
 όΠΩϯά͸ேன 1,000 ԁɺ໷ 2,000 ԁ • ి೾ɺ൒෼͘Β͍ܨ͕ͬͨ͠༳Ε΋ͦ͜·ͰͩͬͨͷͰ
 ࡞ۀͰ͖ͦ͏ɾɾɾʂ