Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TypeScript を活用してサービス構築頑張ってみた話 / 20190906_v-send...
Search
girigiribauer
September 06, 2019
Technology
1
290
TypeScript を活用してサービス構築頑張ってみた話 / 20190906_v-sendai_girigiribauer
girigiribauer
September 06, 2019
Tweet
Share
More Decks by girigiribauer
See All by girigiribauer
タスクにもストック型・フロー型があるということに Todoist を使い始めて気づいた話 / 20250725-niigata-5min-tech
girigiribauer
0
45
Bluesky のフィードを作ろう / 20250620-niigata-5min-tech
girigiribauer
0
42
『Bluesky 公式アカウント移行まとめ』のアップデートをした話 / 20241018-niigata-5min-tech
girigiribauer
0
100
コンテナクエリはコンテナ技術の話ではなく CSS の話です / 20240920-niigata-5min-tech
girigiribauer
1
86
公共交通のオープンデータ事始め / 20240823-niigata-5min-tech
girigiribauer
0
100
私と Vim / 20240426-niigata-5min-tech
girigiribauer
2
190
がんばらない勉強会の続け方 / 20240426-niigata-5min-tech-omake
girigiribauer
1
560
初めての chrome extension で Plasmo 使ってみた / 20240329-niigata-5min-tech
girigiribauer
0
120
時間配分を常に意識するために、通知する仕組みを作った話 / 20220527-peacock-meets-up-01
girigiribauer
0
250
Other Decks in Technology
See All in Technology
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
18
5.9k
自社製CMSからmicroCMSへのリプレースがプロダクトグロースを加速させた話
nextbeatdev
0
360
実践AIガバナンス
asei
3
230
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
130
ドキュメントはAIの味方!スタートアップのアジャイルを加速するADR
kawauso
3
470
Understanding Go GC #coefl_go_jp
bengo4com
1
1.1k
制約理論(ToC)入門
recruitengineers
PRO
8
3.5k
JavaScript 研修
recruitengineers
PRO
6
1.3k
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
180
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
220
生成AI時代に必要な価値ある意思決定を育てる「開発プロセス定義」を用いた中期戦略
kakehashi
PRO
1
220
まだ間に合う! StrandsとBedrock AgentCoreでAIエージェント構築に入門しよう
minorun365
PRO
10
510
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
GraphQLとの向き合い方2022年版
quramy
49
14k
Statistics for Hackers
jakevdp
799
220k
Embracing the Ebb and Flow
colly
87
4.8k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Transcript
TypeScript を活用して サービス構築頑張ってみた話 2019/09/06 v-sendai Vue.js/Nuxt.js meetup #3 @girigiribauer
自己紹介 • ໊ݹ͔Β͖·ͨ͠ʢઋॳΊͯʂʣ • ݩʑएׯϑϩϯτΤϯυدΓͰ͕ͨ͠ɺ ͳΜͰΔϚϯʹ • ࠷ۙɺσδλϧσΟόΠυΛຒΊ͍ͨཉ͕ ͋Γ·͢
コミュニティのご紹介 • Nagoya Frontend User Group • ຖ݄1ճҎ্ ϑϩϯτΤϯυ͘͘ձΛ͍ͬͯͯɺ
ෆఆظͰൃදܗࣜ • https://nfug.connpass.com/
͜ͷίϛϡχςΟͷྑ͍ͱ͜Ζ • ӡӦ͕ΜΒͳ͍ • ໊ݹͷձࣾ͞Μ࣋ͪճΓͰॱʹ ձΛ͓आΓ͍ͯ͠Δͱ͜ΖʢͳΜͱ7ࣾʂʣ • ಛఆݸਓʹґଘ͠ͳ͍Α͏ͬͱ ΈԽ͍͖͍ͯͨ͠
勉強会の会場を 貸してくれる会社は 良い会社!
None
TypeScript を活用して サービス構築頑張ってみた話
Index • ͲΜͳײ͡ͷϓϩδΣΫτɾϓϩμΫτ ͳͷ͔ʁ • ࠷ॳʹ͢Δ͖͜ͱ • ͬͯྑ͔ͬͨ͜ͱɺ͋·ΓޮՌ ͳ͔ͬͨ͜ͱ 聞いててもつまらない
けど大事系 聞いてて面白い けど各論系
どんな感じのプロジェクト・ プロダクトなのか? • ٕज़తͳଆ໘ • ମ੍తͳଆ໘
技術的な側面 • ྆ํ TypeScript • ϑϩϯτΤϯυ • Vue.js + TypeScript
• Atomic Design + Storybook ͰΧλϩάԽ • όοΫΤϯυ • Express + TypeScript • AWS Λશ໘తʹ࠾༻ • OpenAPI Λར༻ͨ͠ API υΩϡϝϯτͷڞ༗
体制的な側面 • Կܾ·͍ͬͯͳ͍ɺθϩ͔Βબఆ • ΤϯδχΞࣗҎ֎΄΅୭͍ͳ͍ • ਓෆʹͳΔ͜ͱ͕͔͍ͬͯͨͷͰɺ ෭ۀͷํͰೖΓ͍͢ମ੍ʹ ʢࠓͲ͜ਓෆɾɾɾʣ
最初にするべきこと 聞いててもつまらない けど大事系
最初にするべきこと • ٕज़બఆҎલͷ • ٕज़બఆͷ • ݁ہେࣄͩͬͨ͜ͱ 正解がないので 共有しづらい
ٕज़બఆҎલͷ • ͦͦԿΔʁతͳɺྃͷఆٛɺϑΣʔζͷఆٛ • ༷ࡦఆɺݴ༿ͷఆٛ • νʔϜϏϧσΟϯά etc… • ༷ΛͲ͏
issue ୯Ґ·Ͱམͱ͠ࠐΉ͔ʁ • ͜͜·Ͱ࣋ͬͯ͜ΕΕ ޙ୭͔͕ͬͯ͘ΕΔɾɾɾ
• ͳͥͦΕΛબΜ͔ͩʁ • Ͳ͜·ͰࣗͰܾΊͯɺͲ͔͜Β͓ͤ ͢Δ͖͔ʁ ٕज़બఆͷ
ٕज़બఆͷ > ݅ • ͳͥͦΕΛબΜ͔ͩʁ݅ʹΑܾͬͯ·Δ • ෭ۀͷਓͰೖΓ͍͢ମ੍ʹ • ٕज़తͳϨΠϠʔΛബ͘ɾগͳ͍ͨ͘͠ •
มߋΛݕ͘͢͠ɺप͍ͨ͘͢͠͠ • ใڞ༗ͷ࣌ؒΛѹॖ͠ɺ͙͢ணखͰ͖ΔΑ͏ʹ
ٕज़બఆͷ > ݅ • ͳͥͦΕΛબΜ͔ͩʁ݅ʹΑܾͬͯ·Δ • ෭ۀͷਓͰೖΓ͍͢ମ੍ʹ • ٕज़తͳϨΠϠʔΛബ͘ɾগͳ͍ͨ͘͠ →
Α͘ΘΕΔϑϨʔϜϫʔΫͷಋೖ • มߋΛݕ͘͢͠ɺप͍ͨ͘͢͠͠ → ࣮ߦ࣌ΤϥʔΑΓίϯύΠϧΤϥʔΛ • ใڞ༗ͷ࣌ؒΛѹॖ͠ɺ͙͢ணखͰ͖ΔΑ͏ʹ →υΩϡϝϯςʔγϣϯͷॆ࣮
ٕज़બఆͷ > ݅ʢಛʹϑϩϯτΤϯυʣ • ͳͥͦΕΛબΜ͔ͩʁ݅ʹΑܾͬͯ·Δ • ෭ۀͷਓͰೖΓ͍͢ମ੍ʹ • ٕज़తͳϨΠϠʔΛബ͘ɾগͳ͍ͨ͘͠ →Vue.jsͰϨʔϧʹΓͭͭɺֶशίετԼ͛Δ
• มߋΛݕ͘͢͠ɺप͍ͨ͘͢͠͠ → TypeScript ͰܕͷαϙʔτΛ • ใڞ༗ͷ࣌ؒΛѹॖ͠ɺ͙͢ணखͰ͖ΔΑ͏ʹ →Atomic Design + Storybook ͰΧλϩάԽ
ٕज़બఆͷ > νʔϜϏϧσΟϯά • Ͳ͜·ͰࣗͰܾΊͯɺͲ͔͜Β͓ͤ ͢Δ͖͔ʁνʔϜϏϧσΟϯάʹΑͬͯ ܾ·Δ • ਓʹΑͬͯ͘ઙ͘ݟΔ͜ͱ͕Ͱ͖Δਓͱɺ ڱ͘ਂ͘ݟΔ͜ͱ͕Ͱ͖Δਓ͕͍Δ
• ࠷ݶͷ͖ࣔ͢ɺ͋ͱνʔϜʹΑΔ
結局大事だったこと • ܾΊΔ͜ͱ • ߹͍ͬͯΔ͔ؒҧ͍ͬͯΔ͔ΑΓɺ ͦ͜ʹԿ͔͋Δ͜ͱ͕ॏཁ • ਓؒɺԿ͔͋Δͱࢍɾର͍͕͢͠ɺ Կͳ͍ঢ়ଶͰதʑҙݟग़ͤͳ͍
None
やって良かったこと、 あまり効果なかったこと 聞いてて面白い けど各論系
やって良かったこと、 あまり効果なかったこと ݁Ռతʹͬͯྑ͔ͬͨ͜ͱɺ͋·Γ ޮՌͳ͔ͬͨ͜ͱΛ୨Էͯ͠͠Έ·͢
やって良かったこと、 あまり効果なかったこと • [Great] Code Formatter ͷಋೖ • [Great] TypeScript
ͷಋೖ • [Good] OpenAPI ͷಋೖ • [Good?] Vue.js ͷಋೖ • [No Good] ϦϙδτϦߏ • [Good] υΩϡϝϯςʔγϣϯ
[Great] Code Formatter の導入 • Golang Ͱݴ͏ͱඪ४Ͱ༻ҙ͞Ε͍ͯΔ Gofmt • prettier
Λશ໘తʹಋೖʢ prettier + ESLint ͷߏʣ • ͜Εͳ͍ͱμϝͳͭ • ύοέʔδ1ͭͰͬ͘͞ͱ͑ΔΑ͏ʹͳͬͯཉ͍͠ • ༗໊Ͳ͜ΖͷϑϨʔϜϫʔΫඪ४Ͱೖͬͯͯ ཉ͍͠
[Great] TypeScript の導入 • ܕͷαϙʔτૉΒ͍͠ • ͑Δͱ͜Ζ͔ΒͬͪΌ͑ OK • OpenAPI
ͱͷΈ߹ΘͤͰܕͷมߋΛ ݕͰ͖ΔͷͰɺมߋʹؾ͚ͮΔʢޙड़ʣ
[Good] OpenAPI の導入 • `openapi.yaml` Λॻ͍ͯ `openapi.d.ts` ͱ͍͏ܕఆٛϑΝΠϧΛు͖ग़͢Α͏ʹ • ෭ۀͷνʔϜϝϯόʔᐌ͘ɺݟͯͳ͍ؒʹ
OpenAPI ͷఆ͕ٛมΘͬͯɺ ܕͷϛεϚονͰΤϥʔ͕ग़ΔͷͰมߋݕ͍͢͠ • ҰํͰ·ͩ OpenAPI generator Λ্ख͘׆༻ͯ͠͏Μ͵Μɺ Έ͍ͨͳͷग़དྷ͍ͯͳ͍ • όοΫΤϯυͰ express-openapi Λ࠾༻͠Α͏ͱ͕ͨ͠ɺ্ख͑͘ͳ͔ͬ ͨ • ݱࡏܕใΛ׆༻͢ΔͷͱɺυΩϡϝϯςʔγϣϯͷ2Ͱ͍ͬͯΔঢ়ଶ
[Good] OpenAPI の導入 • dtsgenerator Λ͏ https://github.com/horiuchi/dtsgenerator • `dtsgen openapi.yaml
-o ./src/@types/openapi.d.ts` Λ `npm run typegen` ͰݺΔΑ͏ʹ 型情報を d.ts ファイルに変換 バックエンドで 使う フロントエンドで 使う(これから)
[Good?] Vue.js の導入 • ͕ى͖ͨͱ͖ɺͦΕେ Vue.js ͷ खલͰղܾ͢Δ͖͕ଟ͍ • ϨʔϧʹΔɺͱ͍͏ҙຯͰେ͖ͳ
ى͖͍ͯͳ͍
[Good?] Vue.js の導入 • ॏཁͳͷ Vue ϑΝΠϧ୯ҐͰɺ ͲΜͳɺͲΜͳೖྗɺͲΜͳදࣔ ͳͷ͔Λ໌֬ʹ͢Δ͜ͱ •
Storybook Ͱίϯϙʔωϯτ୯ҐͰ ΧλϩάԽ • Atomic Design ΛݫີʹΓ͗͢ͳ͍
[No Good] リポジトリ構成 • ڞ௨ͷόοΫΤϯυʹରͯ͠ϑϩϯτΤϯυ ͕3ʙ4छྨɺͷ߹Ͳ͏͢Δʁ
[Good] ドキュメンテーション • ԿΒͳ͍ਓ͕ɺ͚ͩ͜͜ݟΕ Ұ௨ΓѲͰ͖Δͷ • υΩϡϝϯςʔγϣϯ͓͡͞ΜʹͳΔ֮ޛ • GitLab ͩͱ
mermaid.js ʢγʔέϯεਤͱ͔ʣ͕͑Δͧ
None
まとめ
まとめ • ʢͪΖΜਖ਼͍͠ํ͕ਖ਼͕ٛͩʣ Ծʹؒҧ͍ͬͯͨͱͯ͠ɺܾΊ͍ͯ͘͜ͱ Ͱࣄ͕ਐΉ • ·ܾͣΊͯଞͷਓ͔Βݟ͑ΔΑ͏ʹͯ͠ɺ ҙݟΒͬͨํ͕ૣ͍
まとめ • νʔϜͰڞ௨ೝࣝΛ࣋ͭɺڞ௨ೝࣝΛ࣋ͭͨΊͷ ΈΛಋೖ͢Δ • Vue.js ͰϨʔϧʹΓͭͭɺTypeScript Ͱܕͷαϙʔ τΛड͚ͭͭɺ Atomic
Design + Storybook ͰΧλ ϩάԽɺυΩϡϝϯςʔγϣϯؤுΔͳͲɾɾɾ • ΠέͯΔ͔Βͱ͔Ͱͳ͘ɺ ݅νʔϜʹԠٕͨ͡ज़બఆΛ͢Δ
おまけ: 太平洋フェリー情報 • S৸ɺ࠷ݶͷϓϥΠόγʔ֬อͰ͖Δ • ໊ݹɾઋؒͰS৸ͳΒɺ 1͔݄લͷૣׂͩͱֹͷ 5,000 ԁʢ͍҆ʣ •
͝൧࣋ͪࠐΜͰ͍͍ܰ͠৯͋Δ όΠΩϯάேன 1,000 ԁɺ 2,000 ԁ • ిɺ͘Β͍ܨ͕ͬͨ͠༳Εͦ͜·ͰͩͬͨͷͰ ࡞ۀͰ͖ͦ͏ɾɾɾʂ