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
41k
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
20k
rescue されない例外?! / A Exception not rescue #megurorb
suusan2go
0
2.6k
Rails サービスクラス再考 / have a rethink on Rails service class
suusan2go
6
9.5k
フロントエンドエンジニアも知っておきたいgRPC
suusan2go
19
11k
Flutterでアプリ作ってる話
suusan2go
2
2.8k
ポストRailsとしてのKotlin + Spring Boot #m3kt
suusan2go
4
1.9k
gRPC on Spring Boot
suusan2go
0
2.6k
ずっとRubyをやっていたエンジニアがGoに入門して挫折して再挑戦した話
suusan2go
2
5k
非SPAなRailsアプリでレールに乗りつつReactを使う話
suusan2go
6
7.4k
Other Decks in Programming
See All in Programming
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
500
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
390
Building a Smaller App Binary
kateinoigakukun
2
200
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
fsubal
14
3k
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
7.1k
Docker ハンズオン / docker-hands-on
suzukihoge
51
16k
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
OpenAPI を守るのは難しい
ohmori_yusuke
1
140
実践!RDRAを活用した既存システムの仕様変更 / Specification Changes in Existing Systems Utilizing RDRA
imamotohikaru
0
1.8k
Enhancing Applications with Accessibility API
kishikawakatsumi
3
830
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
330
PHP 8.3で追加されたjson_validate()を徹底的に深掘りしてみよう
mashirou1234
1
720
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
Building Applications with DynamoDB
mza
88
5.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
Building Your Own Lightsaber
phodgson
97
5.6k
Embracing the Ebb and Flow
colly
78
4.1k
How GitHub Uses GitHub to Build GitHub
holman
467
290k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Typedesign – Prime Four
hannesfritz
36
2k
Designing with Data
zakiwarfel
94
4.8k
In The Pink: A Labor of Love
frogandcode
137
21k
Faster Mobile Websites
deanohume
296
30k
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 = いいぞ!
ありがとうございました!