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
47
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
130
時間配分を常に意識するために、通知する仕組みを作った話 / 20220527-peacock-meets-up-01
girigiribauer
0
250
Other Decks in Technology
See All in Technology
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
750
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
roppongirb_20250911
igaiga
1
250
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
380
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
260
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.1k
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
500
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
2
260
Create Ruby native extension gem with Go
sue445
0
130
slog.Handlerのよくある実装ミス
sakiengineer
4
470
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Faster Mobile Websites
deanohume
309
31k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Agile that works and the tools we love
rasmusluckow
330
21k
Gamification - CAS2011
davidbonilla
81
5.4k
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 ԁ • ిɺ͘Β͍ܨ͕ͬͨ͠༳Εͦ͜·ͰͩͬͨͷͰ ࡞ۀͰ͖ͦ͏ɾɾɾʂ