Nuxt.js + TypeScript = Great!

#roppongijs で登壇しました

Transcript

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

   View Slide

2. 自己紹介
   ● Kenta Suzuki / @suusan2go
   ● M3,inc / Software Engineer
   ● 経験値で言うとこんな感じ
   ○ Ruby > JavaScript > Kotlin(ServerSide) > Golang
   ● どちらかと言えばサーバーサイドエンジニアです！
   ● 最近のお気に入り映画は「バーフバリ 王の凱旋」です
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. リニューアルで使っている技術
   Kotlin + Spring Boot
   API サーバ
   REST APIでやりとり
   Nuxt.js + TypeScript
   SPA
   ※もともとはgRPC + grpc-gatewayだったりした
   本番運用まで行かなかった gRPCの知見をまとめておく
   

   View Slide

7. なぜNuxt.jsなのか？
   ● Nuxt.js とはユニバーサルな Vue.js アプリケーションを構築するためのフ
   レームワーク(公式より抜粋)長らくRCでしたが、1月に1.0が出ました。
   ● SSRだけでなく、Vue-Router / Vuex / Vue-Metaなど Vue.js関連ライブラ
   リとのインテグレーションからビルドまでまるっと面倒みてくれる(= レール
   を提供してくれる)
   ● SSRは必須でなかったが、フロントに精通した人間が多くない中でSPA作
   る上でのレールが欲しかった
   

   View Slide

8. なぜTypeScriptなのか？
   Kotlin + Spring Boot
   API サーバ
   Spring Foxで実装から
   Swagger Definition作成
   Swagger Codegenで
   TSのAPIクライアントを自動生成
   

   View Slide

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

   View Slide

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

    View Slide

11. Nuxt.js + TypeScriptの始め方
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. Nuxt.js + TypeScript + eslint
    ● TypeScriptなのでtslintだよねーと思っていた時期が私にもありました
    ● eslint-plugin-vue が公式から提供されているので、TypeScriptなんです
    が、eslintを使った方がよさげです。
    ● typescript-eslint-parserでTypeScriptにeslintがかけられます
    ● この辺りはjoe_reさんのブログにかなり詳しく書かれてて参考にさせていた
    だきました。
    Vue + TypeScriptなプロジェクトにESLintを導入する
    

    View Slide

16. eslintrc.jsonはこんな感じ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. process.client / process.server
    ● サーバーサイド(SSR)かブラウザ上かを判定するメソッド
    ● 1.0RCまであった以下のAPIは1.0releaseでdeprecatedに
    ○ context.isServer、context.isClient
    ● クライアント / サーバーの判定はどこでもできるようになったが、このままだ
    とビルドが通らないので型の拡張が必要
    

    View Slide

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

    View Slide

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

    View Slide

24. View Slide

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

    View Slide

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

    View Slide

27. まとめ
    ● Nuxt.js の TypeScript対応は簡単！
    ● API部分がTypeScriptになっていると、開発中に頻繁にAPIが変わっても
    コンパイルが通れば問題なく動く状態になった
    ○ 事実、API部分をgRPC => REST に書き換えたときもコンパイルを通
    すだけで問題なく動いた
    ● まずはAPI部分からでも、Nuxt.js + TypeScript = いいぞ！
    

    View Slide

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

    View Slide