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.8k
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.1k
gRPC on Spring Boot
suusan2go
0
2.9k
ずっとRubyをやっていたエンジニアがGoに入門して挫折して再挑戦した話
suusan2go
2
5.2k
非SPAなRailsアプリでレールに乗りつつReactを使う話
suusan2go
6
7.7k
Other Decks in Programming
See All in Programming
CI改善もDatadogとともに
taumu
0
190
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
150
Domain-Driven Transformation
hschwentner
2
1.9k
React 19アップデートのために必要なこと
uhyo
8
1.5k
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
260
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
Formの複雑さに立ち向かう
bmthd
1
930
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
860
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
920
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
16
3.9k
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
150
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
The Pragmatic Product Professional
lauravandoore
32
6.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Side Projects
sachag
452
42k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Designing Experiences People Love
moore
140
23k
Designing for Performance
lara
604
68k
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 = いいぞ!
ありがとうございました!