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
41k
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
20k
rescue されない例外?! / A Exception not rescue #megurorb
suusan2go
0
2.6k
Rails サービスクラス再考 / have a rethink on Rails service class
suusan2go
6
9.6k
フロントエンドエンジニアも知っておきたいgRPC
suusan2go
19
11k
Flutterでアプリ作ってる話
suusan2go
2
2.8k
ポストRailsとしてのKotlin + Spring Boot #m3kt
suusan2go
4
1.9k
gRPC on Spring Boot
suusan2go
0
2.6k
ずっとRubyをやっていたエンジニアがGoに入門して挫折して再挑戦した話
suusan2go
2
5k
非SPAなRailsアプリでレールに乗りつつReactを使う話
suusan2go
6
7.4k
Other Decks in Programming
See All in Programming
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
840
ONE WEDGE_company_guide
1wedge_one
0
490
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
大規模UIKitベースアプリへのTCAの段階的導入/gradual-adoption-of-tca-in-a-large-scale-uikit-based-app
takehilo
1
180
Rethinking UI building strategies @ SFI 2024
letelete
0
270
雑に思考を整理する技術と効能
konifar
60
29k
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
190
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
940
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
2 週間で Twitter Bot を作ってみた
contour_gara
0
570
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
200
Hanami and htmx
bkuhlmann
0
210
Featured
See All Featured
Side Projects
sachag
451
41k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Infographics Made Easy
chrislema
238
18k
KATA
mclloyd
15
12k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Building Adaptive Systems
keathley
31
1.9k
Six Lessons from altMBA
skipperchong
21
3k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
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 = いいぞ!
ありがとうございました!