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
79
コンテナクエリはコンテナ技術の話ではなく CSS の話です / 20240920-niigata-5min-tech
girigiribauer
1
62
公共交通のオープンデータ事始め / 20240823-niigata-5min-tech
girigiribauer
0
71
私と 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
95
時間配分を常に意識するために、通知する仕組みを作った話 / 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.2k
OPENLOGI Company Profile
hr01
0
60k
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
190
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
850
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
目標と時間軸 〜ベイビーステップでケイパビリティを高めよう〜
kakehashi
PRO
4
320
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
190
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
120
Change Managerを活用して本番環境へのセキュアなGUIアクセスを統制する / Control Secure GUI Access to the Production Environment with Change Manager
yuj1osm
0
100
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
1k
BBQ
matthewcrist
87
9.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Building an army of robots
kneath
303
45k
We Have a Design System, Now What?
morganepeng
51
7.4k
Code Reviewing Like a Champion
maltzj
521
39k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Writing Fast Ruby
sferik
628
61k
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 ԁ • ిɺ͘Β͍ܨ͕ͬͨ͠༳Εͦ͜·ͰͩͬͨͷͰ ࡞ۀͰ͖ͦ͏ɾɾɾʂ