Nuxt.js + TypeScript = Great!

Transcript

1. Nuxt.js + TypeScript = いいぞ #Roppongi.js 2017/3/20 @suusan2go

2. 自己紹介 • Kenta Suzuki / @suusan2go • M3,inc / Software

   Engineer • 経験値で言うとこんな感じ ◦ Ruby > JavaScript > Kotlin(ServerSide) > Golang • どちらかと言えばサーバーサイドエンジニアです！ • 最近のお気に入り映画は「バーフバリ 王の凱旋」です

3. いまの私の現場の紹介 • 大体10年前くらいに作られたらしいレガシーなJava(& 独自FW)システム のリニューアル • バックエンドはSpring Boot + Kotlinに書き換え

   • フロントエンドは分離してNuxt.jsにした

4. どれくらいレガシーかというと

5. ＿人人人人人人人人人人人人人人＿ ＞　Internet Explorer 6.0以上　＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣ ※今回のリニューアルで見直されます

6. リニューアルで使っている技術 Kotlin + Spring Boot API サーバ REST APIでやりとり Nuxt.js

   + TypeScript SPA ※もともとはgRPC + grpc-gatewayだったりした 本番運用まで行かなかった gRPCの知見をまとめておく

7. なぜNuxt.jsなのか？ • Nuxt.js とはユニバーサルな Vue.js アプリケーションを構築するためのフ レームワーク(公式より抜粋)長らくRCでしたが、1月に1.0が出ました。 • SSRだけでなく、Vue-Router /

   Vuex / Vue-Metaなど Vue.js関連ライブラ リとのインテグレーションからビルドまでまるっと面倒みてくれる(= レール を提供してくれる) • SSRは必須でなかったが、フロントに精通した人間が多くない中でSPA作 る上でのレールが欲しかった

8. なぜTypeScriptなのか？ Kotlin + Spring Boot API サーバ Spring Foxで実装から Swagger

   Definition作成 Swagger Codegenで TSのAPIクライアントを自動生成

9. なぜTypeScriptなのか？ • TypeScript のAPIクライアントがSwagger Codegenが自動で型付きで生 成できる • Nuxt.jsで高速にVueコンポーネントを開発しつつ、バックエンドとの接続部 分はTypeScriptでエディタ補完の恩恵を受けて作っていきたい。 •

   開発中にAPIが大きく変わっても、フロントエンドで確実に追従できるように したい。

10. 今日話すこと • Nuxt.js + TypeScirptでの開発の仕方 • Nuxt.js については、沢山紹介記事が出てるのでググってください

11. Nuxt.js + TypeScriptの始め方

12. Nuxt.jsでTypeScriptコードをビルドする • Nuxt.jsはデフォルトではTypeScriptに対応していませんが、Modulesとい う機構を使って、カスタムローダーが追加できるようになっています https://ja.nuxtjs.org/guide/modules • この機構を使って、typescript-loaderを追加します

13. • modules/typescript.tsに←を追加 • devDependenciesに以下を追加 ◦ typescript ◦ ts-loader • nuxt.config.jsにmodulesを追加

14. 参考になるコード • Nuxt.jsのリポジトリ配下に examplse/typescript があり、こちら が１番活発にメンテナンスされています。 • 以下もよいですが、微妙にバージョンが古くて動かなかったりす るので公式examples配下を参考にするのがおすすめです https://github.com/nuxt-community/typescript-template

15. Nuxt.js + TypeScript + eslint • TypeScriptなのでtslintだよねーと思っていた時期が私にもありました • eslint-plugin-vue が公式から提供されているので、TypeScriptなんです

    が、eslintを使った方がよさげです。 • typescript-eslint-parserでTypeScriptにeslintがかけられます • この辺りはjoe_reさんのブログにかなり詳しく書かれてて参考にさせていた だきました。 Vue + TypeScriptなプロジェクトにESLintを導入する

16. eslintrc.jsonはこんな感じ

17. Nuxt.js + TypeScriptでの コンポーネント開発

18. TypeScriptでのコンポーネント開発 • メンバーの学習コストを考えて、シンタックスが大きく違うクラススタイル の APIは使っていない • Vue2.5からTypeScirptサポートが強化されたので、通常のオブジェクトリ テラル構文でも殆ど問題なさそう • ただし、Nuxt対応のためにいくつか型の定義を拡張してあげる必要があ

    る

19. Nuxt.jsが拡張するコンポーネントのプロパティに対応する • NuxtはVueのコンポーネントのオプションを色々と拡張しているので、その ままだとコンパイルが通らない ◦ layout, middleware, fetch, asyncData, key,watchQuery…

    • 型の定義を追加してあげないと、コンパイルが通らない

20. • Contextは以下のページに詳細が記 載されています。 https://nuxtjs.org/api/context ※Storeはスペースの関係でAnyにしちゃいまし たが、型定義推奨です • 自分が使ってないだけでまだ何かあ るかも？

21. process.client / process.server • サーバーサイド(SSR)かブラウザ上かを判定するメソッド • 1.0RCまであった以下のAPIは1.0releaseでdeprecatedに ◦ context.isServer、context.isClient •

    クライアント / サーバーの判定はどこでもできるようになったが、このままだ とビルドが通らないので型の拡張が必要

22. 色々自分で書いてしまったけど、公式で提供されていないのだろうか？ 1.0がリリースされたときmediumでこんなアナウンスがあったのだけれど・・・・ 知ってる人いたら教えてください :bow: https://medium.com/@nuxt_js/nuxt-js-1-0-is-out-bab1af459972 @nuxtjs/typescriptは・・・？

23. Nuxt.js + TypeScriptの開発はこ んな感じ

24. None

25. APIのパラメータが間違っていると教えてくれる

26. レスポンスに補完が効くようになる

27. まとめ • Nuxt.js の TypeScript対応は簡単！ • API部分がTypeScriptになっていると、開発中に頻繁にAPIが変わっても コンパイルが通れば問題なく動く状態になった ◦ 事実、API部分をgRPC

    => REST に書き換えたときもコンパイルを通 すだけで問題なく動いた • まずはAPI部分からでも、Nuxt.js + TypeScript = いいぞ！

28. ありがとうございました！