#roppongijs で登壇しました
Nuxt.js + TypeScript = いいぞ#Roppongi.js2017/3/20@suusan2go
View Slide
自己紹介● 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 BootAPI サーバREST APIでやりとりNuxt.js + TypeScriptSPA※もともとは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 BootAPI サーバ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の開発はこんな感じ
APIのパラメータが間違っていると教えてくれる
レスポンスに補完が効くようになる
まとめ● Nuxt.js の TypeScript対応は簡単!● API部分がTypeScriptになっていると、開発中に頻繁にAPIが変わってもコンパイルが通れば問題なく動く状態になった○ 事実、API部分をgRPC => REST に書き換えたときもコンパイルを通すだけで問題なく動いた● まずはAPI部分からでも、Nuxt.js + TypeScript = いいぞ!
ありがとうございました!