Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.js + TypeScript = Great!

Nuxt.js + TypeScript = Great!

#roppongijs で登壇しました

Kenta Suzuki

March 20, 2018
Tweet

More Decks by Kenta Suzuki

Other Decks in Programming

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 があり、こちら
    が1番活発にメンテナンスされています。
    ● 以下もよいですが、微妙にバージョンが古くて動かなかったりす
    るので公式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