Slide 1
Slide 1 text
Nuxt.js + TypeScript = いいぞ
#Roppongi.js
2017/3/20
@suusan2go
Slide 2
Slide 2 text
自己紹介
● Kenta Suzuki / @suusan2go
● M3,inc / Software Engineer
● 経験値で言うとこんな感じ
○ Ruby > JavaScript > Kotlin(ServerSide) > Golang
● どちらかと言えばサーバーサイドエンジニアです！
● 最近のお気に入り映画は「バーフバリ 王の凱旋」です
Slide 3
Slide 3 text
いまの私の現場の紹介
● 大体10年前くらいに作られたらしいレガシーなJava(& 独自FW)システム
のリニューアル
● バックエンドはSpring Boot + Kotlinに書き換え
● フロントエンドは分離してNuxt.jsにした
Slide 4
Slide 4 text
どれくらいレガシーかというと
Slide 5
Slide 5 text
＿人人人人人人人人人人人人人人＿
＞ Internet Explorer 6.0以上 ＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣
※今回のリニューアルで見直されます
Slide 6
Slide 6 text
リニューアルで使っている技術
Kotlin + Spring Boot
API サーバ
REST APIでやりとり
Nuxt.js + TypeScript
SPA
※もともとはgRPC + grpc-gatewayだったりした
本番運用まで行かなかった gRPCの知見をまとめておく
Slide 7
Slide 7 text
なぜNuxt.jsなのか？
● Nuxt.js とはユニバーサルな Vue.js アプリケーションを構築するためのフ
レームワーク(公式より抜粋)長らくRCでしたが、1月に1.0が出ました。
● SSRだけでなく、Vue-Router / Vuex / Vue-Metaなど Vue.js関連ライブラ
リとのインテグレーションからビルドまでまるっと面倒みてくれる(= レール
を提供してくれる)
● SSRは必須でなかったが、フロントに精通した人間が多くない中でSPA作
る上でのレールが欲しかった
Slide 8
Slide 8 text
なぜTypeScriptなのか？
Kotlin + Spring Boot
API サーバ
Spring Foxで実装から
Swagger Definition作成
Swagger Codegenで
TSのAPIクライアントを自動生成
Slide 9
Slide 9 text
なぜTypeScriptなのか？
● TypeScript のAPIクライアントがSwagger Codegenが自動で型付きで生
成できる
● Nuxt.jsで高速にVueコンポーネントを開発しつつ、バックエンドとの接続部
分はTypeScriptでエディタ補完の恩恵を受けて作っていきたい。
● 開発中にAPIが大きく変わっても、フロントエンドで確実に追従できるように
したい。
Slide 10
Slide 10 text
今日話すこと
● Nuxt.js + TypeScirptでの開発の仕方
● Nuxt.js については、沢山紹介記事が出てるのでググってください
Slide 11
Slide 11 text
Nuxt.js + TypeScriptの始め方
Slide 12
Slide 12 text
Nuxt.jsでTypeScriptコードをビルドする
● Nuxt.jsはデフォルトではTypeScriptに対応していませんが、Modulesとい
う機構を使って、カスタムローダーが追加できるようになっています
https://ja.nuxtjs.org/guide/modules
● この機構を使って、typescript-loaderを追加します
Slide 13
Slide 13 text
● modules/typescript.tsに←を追加
● devDependenciesに以下を追加
○ typescript
○ ts-loader
● nuxt.config.jsにmodulesを追加
Slide 14
Slide 14 text
参考になるコード
● Nuxt.jsのリポジトリ配下に examplse/typescript があり、こちら
が１番活発にメンテナンスされています。
● 以下もよいですが、微妙にバージョンが古くて動かなかったりす
るので公式examples配下を参考にするのがおすすめです
https://github.com/nuxt-community/typescript-template
Slide 15
Slide 15 text
Nuxt.js + TypeScript + eslint
● TypeScriptなのでtslintだよねーと思っていた時期が私にもありました
● eslint-plugin-vue が公式から提供されているので、TypeScriptなんです
が、eslintを使った方がよさげです。
● typescript-eslint-parserでTypeScriptにeslintがかけられます
● この辺りはjoe_reさんのブログにかなり詳しく書かれてて参考にさせていた
だきました。
Vue + TypeScriptなプロジェクトにESLintを導入する
Slide 16
Slide 16 text
eslintrc.jsonはこんな感じ
Slide 17
Slide 17 text
Nuxt.js + TypeScriptでの
コンポーネント開発
Slide 18
Slide 18 text
TypeScriptでのコンポーネント開発
● メンバーの学習コストを考えて、シンタックスが大きく違うクラススタイル の
APIは使っていない
● Vue2.5からTypeScirptサポートが強化されたので、通常のオブジェクトリ
テラル構文でも殆ど問題なさそう
● ただし、Nuxt対応のためにいくつか型の定義を拡張してあげる必要があ
る
Slide 19
Slide 19 text
Nuxt.jsが拡張するコンポーネントのプロパティに対応する
● NuxtはVueのコンポーネントのオプションを色々と拡張しているので、その
ままだとコンパイルが通らない
○ layout, middleware, fetch, asyncData, key,watchQuery…
● 型の定義を追加してあげないと、コンパイルが通らない
Slide 20
Slide 20 text
● Contextは以下のページに詳細が記
載されています。
https://nuxtjs.org/api/context
※Storeはスペースの関係でAnyにしちゃいまし
たが、型定義推奨です
● 自分が使ってないだけでまだ何かあ
るかも？
Slide 21
Slide 21 text
process.client / process.server
● サーバーサイド(SSR)かブラウザ上かを判定するメソッド
● 1.0RCまであった以下のAPIは1.0releaseでdeprecatedに
○ context.isServer、context.isClient
● クライアント / サーバーの判定はどこでもできるようになったが、このままだ
とビルドが通らないので型の拡張が必要
Slide 22
Slide 22 text
色々自分で書いてしまったけど、公式で提供されていないのだろうか？
1.0がリリースされたときmediumでこんなアナウンスがあったのだけれど・・・・
知ってる人いたら教えてください :bow:
https://medium.com/@nuxt_js/nuxt-js-1-0-is-out-bab1af459972
@nuxtjs/typescriptは・・・？
Slide 23
Slide 23 text
Nuxt.js + TypeScriptの開発はこ
んな感じ
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
APIのパラメータが間違っていると教えてくれる
Slide 26
Slide 26 text
レスポンスに補完が効くようになる
Slide 27
Slide 27 text
まとめ
● Nuxt.js の TypeScript対応は簡単！
● API部分がTypeScriptになっていると、開発中に頻繁にAPIが変わっても
コンパイルが通れば問題なく動く状態になった
○ 事実、API部分をgRPC => REST に書き換えたときもコンパイルを通
すだけで問題なく動いた
● まずはAPI部分からでも、Nuxt.js + TypeScript = いいぞ！
Slide 28
Slide 28 text
ありがとうございました！