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
Nuxt.js + TypeScript = Great!
Search
Kenta Suzuki
March 20, 2018
Programming
8
42k
Nuxt.js + TypeScript = Great!
#roppongijs で登壇しました
Kenta Suzuki
March 20, 2018
Tweet
Share
More Decks by Kenta Suzuki
See All by Kenta Suzuki
レガシーアプリケーションのリニューアルにNuxt.jsで戦う #vuefes_reject
suusan2go
9
21k
rescue されない例外?! / A Exception not rescue #megurorb
suusan2go
0
2.9k
Rails サービスクラス再考 / have a rethink on Rails service class
suusan2go
8
11k
フロントエンドエンジニアも知っておきたいgRPC
suusan2go
18
11k
Flutterでアプリ作ってる話
suusan2go
2
3k
ポストRailsとしてのKotlin + Spring Boot #m3kt
suusan2go
4
2.2k
gRPC on Spring Boot
suusan2go
0
3k
ずっとRubyをやっていたエンジニアがGoに入門して挫折して再挑戦した話
suusan2go
2
5.3k
非SPAなRailsアプリでレールに乗りつつReactを使う話
suusan2go
6
7.8k
Other Decks in Programming
See All in Programming
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
140
Six and a half ridiculous things to do with Quarkus
hollycummins
0
140
オープンソースソフトウェアへの解像度🔬
utam0k
11
2.3k
CSC509 Lecture 06
javiergs
PRO
0
260
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
390
CSC305 Lecture 06
javiergs
PRO
0
210
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
800
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
310
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
170
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
24
12k
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
200
Advance Your Career with Open Source
ivargrimstad
0
450
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Fireside Chat
paigeccino
40
3.7k
Embracing the Ebb and Flow
colly
88
4.8k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
What's in a price? How to price your products and services
michaelherold
246
12k
Site-Speed That Sticks
csswizardry
11
890
4 Signs Your Business is Dying
shpigford
185
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Transcript
Nuxt.js + TypeScript = いいぞ #Roppongi.js 2017/3/20 @suusan2go
自己紹介 • Kenta Suzuki / @suusan2go • M3,inc / Software
Engineer • 経験値で言うとこんな感じ ◦ Ruby > JavaScript > Kotlin(ServerSide) > Golang • どちらかと言えばサーバーサイドエンジニアです! • 最近のお気に入り映画は「バーフバリ 王の凱旋」です
いまの私の現場の紹介 • 大体10年前くらいに作られたらしいレガシーなJava(& 独自FW)システム のリニューアル • バックエンドはSpring Boot + Kotlinに書き換え
• フロントエンドは分離してNuxt.jsにした
どれくらいレガシーかというと
_人人人人人人人人人人人人人人_ > Internet Explorer 6.0以上 <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄ ※今回のリニューアルで見直されます
リニューアルで使っている技術 Kotlin + Spring Boot API サーバ REST APIでやりとり Nuxt.js
+ TypeScript SPA ※もともとはgRPC + grpc-gatewayだったりした 本番運用まで行かなかった gRPCの知見をまとめておく
なぜNuxt.jsなのか? • Nuxt.js とはユニバーサルな Vue.js アプリケーションを構築するためのフ レームワーク(公式より抜粋)長らくRCでしたが、1月に1.0が出ました。 • SSRだけでなく、Vue-Router /
Vuex / Vue-Metaなど Vue.js関連ライブラ リとのインテグレーションからビルドまでまるっと面倒みてくれる(= レール を提供してくれる) • SSRは必須でなかったが、フロントに精通した人間が多くない中でSPA作 る上でのレールが欲しかった
なぜTypeScriptなのか? Kotlin + Spring Boot API サーバ Spring Foxで実装から Swagger
Definition作成 Swagger Codegenで TSのAPIクライアントを自動生成
なぜTypeScriptなのか? • TypeScript のAPIクライアントがSwagger Codegenが自動で型付きで生 成できる • Nuxt.jsで高速にVueコンポーネントを開発しつつ、バックエンドとの接続部 分はTypeScriptでエディタ補完の恩恵を受けて作っていきたい。 •
開発中にAPIが大きく変わっても、フロントエンドで確実に追従できるように したい。
今日話すこと • Nuxt.js + TypeScirptでの開発の仕方 • Nuxt.js については、沢山紹介記事が出てるのでググってください
Nuxt.js + TypeScriptの始め方
Nuxt.jsでTypeScriptコードをビルドする • Nuxt.jsはデフォルトではTypeScriptに対応していませんが、Modulesとい う機構を使って、カスタムローダーが追加できるようになっています https://ja.nuxtjs.org/guide/modules • この機構を使って、typescript-loaderを追加します
• modules/typescript.tsに←を追加 • devDependenciesに以下を追加 ◦ typescript ◦ ts-loader • nuxt.config.jsにmodulesを追加
参考になるコード • Nuxt.jsのリポジトリ配下に examplse/typescript があり、こちら が1番活発にメンテナンスされています。 • 以下もよいですが、微妙にバージョンが古くて動かなかったりす るので公式examples配下を参考にするのがおすすめです https://github.com/nuxt-community/typescript-template
Nuxt.js + TypeScript + eslint • TypeScriptなのでtslintだよねーと思っていた時期が私にもありました • eslint-plugin-vue が公式から提供されているので、TypeScriptなんです
が、eslintを使った方がよさげです。 • typescript-eslint-parserでTypeScriptにeslintがかけられます • この辺りはjoe_reさんのブログにかなり詳しく書かれてて参考にさせていた だきました。 Vue + TypeScriptなプロジェクトにESLintを導入する
eslintrc.jsonはこんな感じ
Nuxt.js + TypeScriptでの コンポーネント開発
TypeScriptでのコンポーネント開発 • メンバーの学習コストを考えて、シンタックスが大きく違うクラススタイル の APIは使っていない • Vue2.5からTypeScirptサポートが強化されたので、通常のオブジェクトリ テラル構文でも殆ど問題なさそう • ただし、Nuxt対応のためにいくつか型の定義を拡張してあげる必要があ
る
Nuxt.jsが拡張するコンポーネントのプロパティに対応する • NuxtはVueのコンポーネントのオプションを色々と拡張しているので、その ままだとコンパイルが通らない ◦ layout, middleware, fetch, asyncData, key,watchQuery…
• 型の定義を追加してあげないと、コンパイルが通らない
• Contextは以下のページに詳細が記 載されています。 https://nuxtjs.org/api/context ※Storeはスペースの関係でAnyにしちゃいまし たが、型定義推奨です • 自分が使ってないだけでまだ何かあ るかも?
process.client / process.server • サーバーサイド(SSR)かブラウザ上かを判定するメソッド • 1.0RCまであった以下のAPIは1.0releaseでdeprecatedに ◦ context.isServer、context.isClient •
クライアント / サーバーの判定はどこでもできるようになったが、このままだ とビルドが通らないので型の拡張が必要
色々自分で書いてしまったけど、公式で提供されていないのだろうか? 1.0がリリースされたときmediumでこんなアナウンスがあったのだけれど・・・・ 知ってる人いたら教えてください :bow: https://medium.com/@nuxt_js/nuxt-js-1-0-is-out-bab1af459972 @nuxtjs/typescriptは・・・?
Nuxt.js + TypeScriptの開発はこ んな感じ
None
APIのパラメータが間違っていると教えてくれる
レスポンスに補完が効くようになる
まとめ • Nuxt.js の TypeScript対応は簡単! • API部分がTypeScriptになっていると、開発中に頻繁にAPIが変わっても コンパイルが通れば問題なく動く状態になった ◦ 事実、API部分をgRPC
=> REST に書き換えたときもコンパイルを通 すだけで問題なく動いた • まずはAPI部分からでも、Nuxt.js + TypeScript = いいぞ!
ありがとうございました!