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
公共交通のオープンデータ事始め / 20240823-niigata-5min-tech
girigiribauer
0
49
私と Vim / 20240426-niigata-5min-tech
girigiribauer
2
140
がんばらない勉強会の続け方 / 20240426-niigata-5min-tech-omake
girigiribauer
1
510
初めての chrome extension で Plasmo 使ってみた / 20240329-niigata-5min-tech
girigiribauer
0
71
時間配分を常に意識するために、通知する仕組みを作った話 / 20220527-peacock-meets-up-01
girigiribauer
0
200
モーダルウィンドウを作るときは createPortal を選択肢に加えよう、という話 / 20200201-react-nagoya-learning
girigiribauer
0
98
コードフォーマッタを導入して プロジェクト内に平穏をもたらす話 / 20191025-v-okinawa
girigiribauer
0
160
TypeScript から JavaScript への変換が見えやすくするビューワーを作った話 / 20190403-typescript-studying
girigiribauer
1
530
沖縄のバスがつらすぎて自分でバスアプリ作った話 / ngk2018b-okinawabus
girigiribauer
2
1.4k
Other Decks in Technology
See All in Technology
社内の学びの場・コミュニティ形成とエンジニア同士のリレーションシップ構築/devreljapan2024
nishiuma
3
290
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
1.4k
LINEヤフーのフロントエンド組織・体制の紹介
lycorp_recruit_jp
1
1.2k
20240911_New_Relicダッシュボード活用例
speakerdeckfk
0
110
AI活用したくてもできなかった不動産SaaSの今とこれから
nealle
0
330
株式会社EventHub・エンジニア採用資料
eventhub
0
2.9k
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
230
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
効果的なオンコール対応と障害対応
ryuichi1208
6
3.1k
Google CloudのLLM活用の選択肢を広げるVertex AIのパートナーモデル
nayuts
0
130
タイミーのレコメンドにおける ABテストの運用
ozeshun
1
120
スタッフエンジニアの道: The Staff Engineer’s Path
snoozer05
PRO
44
14k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
110
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
Become a Pro
speakerdeck
PRO
22
4.9k
What's new in Ruby 2.0
geeforr
340
31k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
Done Done
chrislema
180
16k
Infographics Made Easy
chrislema
239
18k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
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 ԁ • ిɺ͘Β͍ܨ͕ͬͨ͠༳Εͦ͜·ͰͩͬͨͷͰ ࡞ۀͰ͖ͦ͏ɾɾɾʂ