Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.js + TypeScript = Great!
Search
Kenta Suzuki
March 20, 2018
Programming
8
42k
Nuxt.js + TypeScript = Great!
#roppongijs で登壇しました
Kenta Suzuki
March 20, 2018
Tweet
Share
More Decks by Kenta Suzuki
See All by Kenta Suzuki
レガシーアプリケーションのリニューアルにNuxt.jsで戦う #vuefes_reject
suusan2go
9
21k
rescue されない例外?! / A Exception not rescue #megurorb
suusan2go
0
2.9k
Rails サービスクラス再考 / have a rethink on Rails service class
suusan2go
8
11k
フロントエンドエンジニアも知っておきたいgRPC
suusan2go
18
11k
Flutterでアプリ作ってる話
suusan2go
2
2.9k
ポストRailsとしてのKotlin + Spring Boot #m3kt
suusan2go
4
2.2k
gRPC on Spring Boot
suusan2go
0
3k
ずっとRubyをやっていたエンジニアがGoに入門して挫折して再挑戦した話
suusan2go
2
5.3k
非SPAなRailsアプリでレールに乗りつつReactを使う話
suusan2go
6
7.8k
Other Decks in Programming
See All in Programming
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)
risatube
PRO
5
1.1k
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
1
340
What's new in AppKit on macOS 26
1024jp
0
170
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
330
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
twada
PRO
32
8.6k
テスト駆動Kaggle
isax1015
1
890
iOS開発スターターキットの作り方
akidon0000
0
190
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
130
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
990
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
17
6k
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
340
Featured
See All Featured
How to Ace a Technical Interview
jacobian
278
23k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Practical Orchestrator
shlominoach
189
11k
The Language of Interfaces
destraynor
158
25k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Optimizing for Happiness
mojombo
379
70k
Producing Creativity
orderedlist
PRO
346
40k
Gamification - CAS2011
davidbonilla
81
5.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Statistics for Hackers
jakevdp
799
220k
Code Review Best Practice
trishagee
69
19k
Transcript
Nuxt.js + TypeScript = いいぞ #Roppongi.js 2017/3/20 @suusan2go
自己紹介 • 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 Boot API サーバ REST APIでやりとり Nuxt.js
+ TypeScript SPA ※もともとは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 Boot API サーバ 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の開発はこ んな感じ
None
APIのパラメータが間違っていると教えてくれる
レスポンスに補完が効くようになる
まとめ • Nuxt.js の TypeScript対応は簡単! • API部分がTypeScriptになっていると、開発中に頻繁にAPIが変わっても コンパイルが通れば問題なく動く状態になった ◦ 事実、API部分をgRPC
=> REST に書き換えたときもコンパイルを通 すだけで問題なく動いた • まずはAPI部分からでも、Nuxt.js + TypeScript = いいぞ!
ありがとうございました!