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

Transcript

1. TypeScript を活用して
 サービス構築頑張ってみた話 2019/09/06 v-sendai Vue.js/Nuxt.js meetup #3 @girigiribauer
2. 自己紹介 • ໊ݹ԰͔Β͖·ͨ͠ʢઋ୆͸ॳΊͯʂʣ • ݩʑएׯϑϩϯτΤϯυدΓͰ͕ͨ͠ɺ
 ͳΜͰ΋΍ΔϚϯʹ • ࠷ۙɺσδλϧσΟόΠυΛຒΊ͍ͨཉ͕
 ͋Γ·͢
3. コミュニティのご紹介 • Nagoya Frontend 
 User Group • ຖ݄1ճҎ্
 ϑϩϯτΤϯυ΋͘΋͘ձΛ΍͍ͬͯͯɺ
 ෆఆظͰൃදܗࣜ΋ • https://nfug.connpass.com/
4. ͜ͷίϛϡχςΟͷྑ͍ͱ͜Ζ • ӡӦ͕Μ͹Βͳ͍ • ໊ݹ԰ͷձࣾ͞Μ࣋ͪճΓͰॱʹ
 ձ৔Λ͓आΓ͍ͯ͠Δͱ͜ΖʢͳΜͱ7ࣾʂʣ • ಛఆݸਓʹґଘ͠ͳ͍Α͏΋ͬͱ
 ࢓૊ΈԽ͍͖͍ͯͨ͠
5. 勉強会の会場を 貸してくれる会社は 良い会社！
7. TypeScript を活用して
 サービス構築頑張ってみた話
8. Index • ͲΜͳײ͡ͷϓϩδΣΫτɾϓϩμΫτ
 ͳͷ͔ʁ • ࠷ॳʹ͢Δ΂͖͜ͱ • ΍ͬͯྑ͔ͬͨ͜ͱɺ͋·ΓޮՌ
 ͳ͔ͬͨ͜ͱ 聞いててもつまらない けど大事系 聞いてて面白い けど各論系
9. どんな感じのプロジェクト・
 プロダクトなのか？ • ٕज़తͳଆ໘ • ମ੍తͳଆ໘
10. 技術的な側面 • ྆ํ TypeScript • ϑϩϯτΤϯυ • Vue.js + TypeScript • Atomic Design + Storybook ͰΧλϩάԽ • όοΫΤϯυ • Express + TypeScript • AWS Λશ໘తʹ࠾༻ • OpenAPI Λར༻ͨ͠ API υΩϡϝϯτͷڞ༗
11. 体制的な側面 • Կ΋ܾ·͍ͬͯͳ͍ɺθϩ͔Βબఆ • ΤϯδχΞ͸ࣗ෼Ҏ֎΄΅୭΋͍ͳ͍ • ਓෆ଍ʹͳΔ͜ͱ͕෼͔͍ͬͯͨͷͰɺ
 ෭ۀͷํͰ΋ೖΓ΍͍͢ମ੍ʹ
 ʢࠓ͸Ͳ͜΋ਓෆ଍ɾɾɾʣ
12. 最初にするべきこと 聞いててもつまらない けど大事系
13. 最初にするべきこと • ٕज़બఆҎલͷ࿩ • ٕज़બఆͷ࿩ • ݁ہେࣄͩͬͨ͜ͱ 正解がないので 共有しづらい
14. ٕज़બఆҎલͷ࿩ • ͦ΋ͦ΋Կ΍Δʁతͳ࿩ɺ׬ྃͷఆٛɺϑΣʔζͷఆٛ • ࢓༷ࡦఆɺݴ༿ͷఆٛ • νʔϜϏϧσΟϯά etc… • ࢓༷ΛͲ͏ issue ୯Ґ·Ͱམͱ͠ࠐΉ͔ʁ • ͜͜·Ͱ࣋ͬͯ͜ΕΕ͹
 ޙ͸୭͔͕΍ͬͯ͘ΕΔɾɾɾ
15. • ͳͥͦΕΛબΜ͔ͩʁ • Ͳ͜·Ͱࣗ෼ͰܾΊͯɺͲ͔͜Β͓೚ͤ
 ͢Δ΂͖͔ʁ ٕज़બఆͷ࿩
16. ٕज़બఆͷ࿩ > ৚݅ • ͳͥͦΕΛબΜ͔ͩʁ͸৚݅ʹΑܾͬͯ·Δ • ෭ۀͷਓͰ΋ೖΓ΍͍͢ମ੍ʹ • ٕज़తͳϨΠϠʔΛബ͘ɾগͳ͍ͨ͘͠
 • มߋΛݕ஌͠΍͘͢ɺप஌͠΍͍ͨ͘͢͠
 • ৘ใڞ༗ͷ࣌ؒΛѹॖ͠ɺ͙͢ணखͰ͖ΔΑ͏ʹ

17. ٕज़બఆͷ࿩ > ৚݅ • ͳͥͦΕΛબΜ͔ͩʁ͸৚݅ʹΑܾͬͯ·Δ • ෭ۀͷਓͰ΋ೖΓ΍͍͢ମ੍ʹ • ٕज़తͳϨΠϠʔΛബ͘ɾগͳ͍ͨ͘͠
 → Α͘࢖ΘΕΔϑϨʔϜϫʔΫͷಋೖ΁ • มߋΛݕ஌͠΍͘͢ɺप஌͠΍͍ͨ͘͢͠
 → ࣮ߦ࣌ΤϥʔΑΓ΋ίϯύΠϧΤϥʔΛ • ৘ใڞ༗ͷ࣌ؒΛѹॖ͠ɺ͙͢ணखͰ͖ΔΑ͏ʹ
 →υΩϡϝϯςʔγϣϯͷॆ࣮
18. ٕज़બఆͷ࿩ > ৚݅ʢಛʹϑϩϯτΤϯυʣ • ͳͥͦΕΛબΜ͔ͩʁ͸৚݅ʹΑܾͬͯ·Δ • ෭ۀͷਓͰ΋ೖΓ΍͍͢ମ੍ʹ • ٕज़తͳϨΠϠʔΛബ͘ɾগͳ͍ͨ͘͠
 →Vue.jsͰϨʔϧʹ৐Γͭͭɺֶशίετ΋Լ͛Δ • มߋΛݕ஌͠΍͘͢ɺप஌͠΍͍ͨ͘͢͠
 → TypeScript ͰܕͷαϙʔτΛ • ৘ใڞ༗ͷ࣌ؒΛѹॖ͠ɺ͙͢ணखͰ͖ΔΑ͏ʹ
 →Atomic Design + Storybook ͰΧλϩάԽ
19. ٕज़બఆͷ࿩ > νʔϜϏϧσΟϯά • Ͳ͜·Ͱࣗ෼ͰܾΊͯɺͲ͔͜Β͓೚ͤ
 ͢Δ΂͖͔ʁ͸νʔϜϏϧσΟϯάʹΑͬͯ ܾ·Δ • ਓʹΑͬͯ޿͘ઙ͘ݟΔ͜ͱ͕Ͱ͖Δਓͱɺ
 ڱ͘ਂ͘ݟΔ͜ͱ͕Ͱ͖Δਓ͕͍Δ • ࠷௿ݶͷ޲͖͸ࣔ͢ɺ͋ͱ͸νʔϜʹΑΔ
20. 結局大事だったこと • ܾΊΔ͜ͱ • ߹͍ͬͯΔ͔ؒҧ͍ͬͯΔ͔ΑΓ΋ɺ
 ͦ͜ʹԿ͔͋Δ͜ͱ͕ॏཁ • ਓؒ͸ɺԿ͔͋Δͱࢍ੒ɾ൓ର͠΍͍͕͢ɺ Կ΋ͳ͍ঢ়ଶͰ͸தʑҙݟग़ͤͳ͍
22. やって良かったこと、
 あまり効果なかったこと 聞いてて面白い けど各論系
23. やって良かったこと、
 あまり効果なかったこと ݁Ռతʹ΍ͬͯྑ͔ͬͨ͜ͱɺ͋·Γ
 ޮՌͳ͔ͬͨ͜ͱΛ୨Էͯ͠͠Έ·͢
24. やって良かったこと、
 あまり効果なかったこと • [Great] Code Formatter ͷಋೖ • [Great] TypeScript ͷಋೖ • [Good] OpenAPI ͷಋೖ • [Good?] Vue.js ͷಋೖ • [No Good] ϦϙδτϦߏ੒ • [Good] υΩϡϝϯςʔγϣϯ
25. [Great] Code Formatter の導入 • Golang Ͱݴ͏ͱඪ४Ͱ༻ҙ͞Ε͍ͯΔ Gofmt • prettier Λશ໘తʹಋೖʢ prettier + ESLint ͷߏ੒ʣ • ͜Ε͸ͳ͍ͱμϝͳ΍ͭ • ύοέʔδ1ͭͰͬ͘͞ͱ࢖͑ΔΑ͏ʹͳͬͯཉ͍͠ • ༗໊Ͳ͜ΖͷϑϨʔϜϫʔΫ͸ඪ४Ͱೖͬͯͯ
 ཉ͍͠
26. [Great] TypeScript の導入 • ܕͷαϙʔτ͸ૉ੖Β͍͠ • ࢖͑Δͱ͜Ζ͔Β࢖ͬͪΌ͑͹ OK • OpenAPI ͱͷ૊Έ߹ΘͤͰܕͷมߋΛ
 ݕ஌Ͱ͖ΔͷͰɺมߋʹؾ͚ͮΔʢޙड़ʣ
27. [Good] OpenAPI の導入 • `openapi.yaml` Λॻ͍ͯ `openapi.d.ts` ͱ͍͏ܕఆٛϑΝΠϧΛు͖ग़͢Α͏ʹ • ෭ۀͷνʔϜϝϯόʔᐌ͘ɺݟͯͳ͍ؒʹ OpenAPI ͷఆ͕ٛมΘͬͯ΋ɺ
 ܕͷϛεϚονͰΤϥʔ͕ग़ΔͷͰมߋݕ஌͠΍͍͢ • ҰํͰ·ͩ OpenAPI generator Λ্ख͘׆༻ͯ͠͏Μ͵Μɺ
 Έ͍ͨͳͷ͸ग़དྷ͍ͯͳ͍ • όοΫΤϯυͰ͸ express-openapi Λ࠾༻͠Α͏ͱ͕ͨ͠ɺ্ख͘࢖͑ͳ͔ͬ ͨ • ݱࡏ͸ܕ৘ใΛ׆༻͢ΔͷͱɺυΩϡϝϯςʔγϣϯͷ2఺Ͱ࢖͍ͬͯΔঢ়ଶ
28. [Good] OpenAPI の導入 • dtsgenerator Λ࢖͏
 https://github.com/horiuchi/dtsgenerator • `dtsgen openapi.yaml -o ./src/@types/openapi.d.ts` Λ
 `npm run typegen` Ͱݺ΂ΔΑ͏ʹ 型情報を d.ts ファイルに変換 バックエンドで 使う フロントエンドで 使う（これから）
29. [Good?] Vue.js の導入 • ໰୊͕ى͖ͨͱ͖ɺͦΕ͸େ఍ Vue.js ͷ
 खલͰղܾ͢Δ΂͖໰୊͕ଟ͍ • Ϩʔϧʹ৐Δɺͱ͍͏ҙຯͰ͸େ͖ͳ໰୊͸ ى͖͍ͯͳ͍
30. [Good?] Vue.js の導入 • ॏཁͳͷ͸ Vue ϑΝΠϧ୯ҐͰɺ
 ͲΜͳ੹຿ɺͲΜͳೖྗɺͲΜͳදࣔ
 ͳͷ͔Λ໌֬ʹ͢Δ͜ͱ • Storybook Ͱίϯϙʔωϯτ୯ҐͰ
 ΧλϩάԽ • Atomic Design Λݫີʹ΍Γ͗͢ͳ͍
31. [No Good] リポジトリ構成 • ڞ௨ͷόοΫΤϯυʹରͯ͠ϑϩϯτΤϯυ
 ͕3ʙ4छྨɺͷ৔߹Ͳ͏͢Δʁ
32. [Good] ドキュメンテーション • Կ΋஌Βͳ͍ਓ͕ɺ͚ͩ͜͜ݟΕ͹
 Ұ௨Γ೺ѲͰ͖Δ΋ͷ • υΩϡϝϯςʔγϣϯ͓͡͞ΜʹͳΔ֮ޛ • GitLab ͩͱ mermaid.js 
 ʢγʔέϯεਤͱ͔ʣ͕࢖͑Δͧ
34. まとめ
35. まとめ • ʢ΋ͪΖΜਖ਼͍͠ํ͕ਖ਼͕ٛͩʣ
 Ծʹؒҧ͍ͬͯͨͱͯ͠΋ɺܾΊ͍ͯ͘͜ͱ Ͱ෺ࣄ͕ਐΉ • ·ܾͣΊͯଞͷਓ͔Βݟ͑ΔΑ͏ʹͯ͠ɺ
 ҙݟ΋Βͬͨํ͕ૣ͍
36. まとめ • νʔϜ಺Ͱڞ௨ೝࣝΛ࣋ͭɺڞ௨ೝࣝΛ࣋ͭͨΊͷ
 ࢓૊ΈΛಋೖ͢Δ • Vue.js ͰϨʔϧʹ৐ΓͭͭɺTypeScript Ͱܕͷαϙʔ τΛड͚ͭͭɺ Atomic Design + Storybook ͰΧλ ϩάԽɺυΩϡϝϯςʔγϣϯؤுΔͳͲɾɾɾ • ΠέͯΔ͔Βͱ͔Ͱ͸ͳ͘ɺ
 ৚݅΍νʔϜʹԠٕͨ͡ज़બఆΛ͢Δ
37. おまけ: 太平洋フェリー情報 • S৸୆ɺ࠷௿ݶͷϓϥΠόγʔ͸֬อͰ͖Δ • ໊ݹ԰ɾઋ୆ؒͰS৸୆ͳΒɺ
 1͔݄લͷૣׂͩͱ൒ֹͷ 5,000 ԁʢ͍҆ʣ • ͝൧࣋ͪࠐΜͰ΋͍͍ܰ͠৯΋͋Δ
 όΠΩϯά͸ேன 1,000 ԁɺ໷ 2,000 ԁ • ి೾ɺ൒෼͘Β͍ܨ͕ͬͨ͠༳Ε΋ͦ͜·ͰͩͬͨͷͰ
 ࡞ۀͰ͖ͦ͏ɾɾɾʂ