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
280
TypeScript を活用してサービス構築頑張ってみた話 / 20190906_v-sendai_girigiribauer
girigiribauer
September 06, 2019
Tweet
Share
More Decks by girigiribauer
See All by girigiribauer
『Bluesky 公式アカウント移行まとめ』のアップデートをした話 / 20241018-niigata-5min-tech
girigiribauer
0
80
コンテナクエリはコンテナ技術の話ではなく CSS の話です / 20240920-niigata-5min-tech
girigiribauer
1
62
公共交通のオープンデータ事始め / 20240823-niigata-5min-tech
girigiribauer
0
72
私と Vim / 20240426-niigata-5min-tech
girigiribauer
2
160
がんばらない勉強会の続け方 / 20240426-niigata-5min-tech-omake
girigiribauer
1
540
初めての chrome extension で Plasmo 使ってみた / 20240329-niigata-5min-tech
girigiribauer
0
97
時間配分を常に意識するために、通知する仕組みを作った話 / 20220527-peacock-meets-up-01
girigiribauer
0
230
モーダルウィンドウを作るときは createPortal を選択肢に加えよう、という話 / 20200201-react-nagoya-learning
girigiribauer
0
100
コードフォーマッタを導入して プロジェクト内に平穏をもたらす話 / 20191025-v-okinawa
girigiribauer
0
160
Other Decks in Technology
See All in Technology
IAMのマニアックな話2025
nrinetcom
PRO
6
1.4k
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
210
Amazon Athenaから利用時のGlueのIcebergテーブルのメンテナンスについて
nayuts
0
110
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
240
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
410
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.5k
技術スタックだけじゃない、業務ドメイン知識のオンボーディングも同じくらいの量が必要な話
niftycorp
PRO
0
130
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5.3k
LayerXにおけるAI活用事例とその裏側(2025年2月) バクラクの目指す “業務の自動運転” の例 / layerx-ai-deim2025
yuya4
1
290
DevinでAI AWSエンジニア製造計画 序章 〜CDKを添えて〜/devin-load-to-aws-engineer
tomoki10
0
200
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
800
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
800
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Rails Girls Zürich Keynote
gr2m
94
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
4 Signs Your Business is Dying
shpigford
183
22k
Being A Developer After 40
akosma
89
590k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
GraphQLの誤解/rethinking-graphql
sonatard
69
10k
Facilitating Awesome Meetings
lara
53
6.3k
Optimizing for Happiness
mojombo
377
70k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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 ԁ • ిɺ͘Β͍ܨ͕ͬͨ͠༳Εͦ͜·ͰͩͬͨͷͰ ࡞ۀͰ͖ͦ͏ɾɾɾʂ