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のベストプラクティスを考えてみる.pdf
Search
tanaka-yui
August 26, 2019
Programming
6
6.6k
Nuxt.jsのベストプラクティスを考えてみる.pdf
tanaka-yui
August 26, 2019
Tweet
Share
More Decks by tanaka-yui
See All by tanaka-yui
パラレルワーカーという働き方
tanakayui
1
1.3k
フルスタックエンジニアとしてゼロからサービスを作る時に考えていること
tanakayui
3
1.2k
Other Decks in Programming
See All in Programming
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
790
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
91
31k
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
160
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
AIともっと楽するE2Eテスト
myohei
7
2.8k
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
620
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
300
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.6k
Featured
See All Featured
A better future with KSS
kneath
238
17k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Music & Morning Musume
bryan
46
6.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Documentation Writing (for coders)
carmenintech
72
4.9k
Producing Creativity
orderedlist
PRO
346
40k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
How GitHub (no longer) Works
holman
314
140k
Gamification - CAS2011
davidbonilla
81
5.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Transcript
Nuxt.js+TypeScriptの ベストプラクティスを考えてみる
自己紹介 名前:田中 友彩(たなか ゆい) Twitter: @yuit1552 所属:株式会社サイバーエージェント アドテク本部 職種:フルスタックエンジニア (商談からはじめ、インフラ、バックエンド、 Webフロント、Android、iOSまで 一気通貫です) 最近よく使う技術:
Nuxt.js, Typescript, Golang, Kotlin, AWS, GCP, Terraform, Datadog, ML系 座右の名:成せば(大抵なんとか)なる
Nuxt.js + TypeScript でのAPIの利用について 考えます。 今回は
サードパーティクッキーの扱いが厳しく なったり、CORSが面倒だったり、別ドメイン のAPIを叩くケースが結構厳しくなってきた 感じがします。 近年の事情
そういった関係で、同一ドメインでAPIを 持った方が何かと扱いやすいケースが多い ですね。
APIを用意する手段として、いくつかの方法が あるかと思うので今回は、API周りのベスト プラクティスを考えて見ようとおもいます。
・@nuxtjs/proxyで、バックエンドのAPIをproxyする ・nginx等でAPIサーバーにproxyする ・express等でapi作る ・Nuxt.jsのserverMiddlewareを使う 等々 考えられる方法としては
用途としては ・クロスオリジン問題を回避したい ・http-onlyにしたクッキーを扱いたい ・クライアントから何本も叩いてるAPIを一本にまとめたい ・フロント仕様でレスポンスを加工したい 等々
Proxyとかでもいいですが、やっぱりNuxt.jsで Backends For Frontends(BFF)のAPI つくってしまったほうが効率がよく、
・バックエンドエンジニアにお願いする手間 が省ける ・画面に依存した仕様などをサクッとフロント 側でできる。
など、メリットがおおいと思うので、 Nuxt.jsでBFF APIを持つ場合の持ちかたを 考えてみます。
手段を考える 1つめ create-nuxt-app の、Use a custom server frameworkで express等を選んで使う
こんな感じのが生成 されますが、
あれ?importじゃない。。。 packageの nuxt.jsが 2.0.0。。。
しょうがない、 バージョン上げてimport使えるように設定 いじろう。
ts でexpressからNuxt動作させる場合、 ts-nodeを使います。
ts-nodeでimportを使う場合tsconfigの moduleを、commonjsにする必要ありますが、 変更してしまうと、vueまわりでエラーに。。。
ts-node用にtsconfig分けるのもなぁ。。。
煩雑になりそうだから、 expressから、nuxtを呼ぶのやめよう!
手段を考える 2つめ serverMiddleware を使う
公式だと (nuxt.config.js) これか
これ
と書いてありました。nuxt.config.jsにapiや ミドルウェアのパスを書くのは嫌だったので カスタムミドルウェアを使ってみよう! と思いました。
Nuxtのdocsには connectというライブラリのdocsを参照と 書いており、 connectはhttpサーバーっぽかったのですが、
ソースコードを読むと 老舗のexpressほど機能はなさそうでした。 さらに、 Nuxt.jsのconnectを呼んでる箇所みると
お?
渡したmiddlewareを そのまま読み込んでくれる感じになってる!
expressには慣れていたこともあり、expressの routerを使えると綺麗にapiを整理できそう!
あと、connectのgitみると https://github.com/senchalabs/connect#appusefn These middleware and libraries are officially supported by
the Connect/Express team: expressのミドルウェアサポートされてる!
ということで、こんな感じで実装します
nuxt.config.ts server/index.ts server/api/index.ts expressのRouter も使えます!
@nuxt/typescript (2.9.xからの新しいやつ) 起動スクリプト
補足ですが nuxt 2.9のnuxt-tsコマンドは、ここでcommonjs設定 してるから、importがつかえる
定番のミドルウェア含めNuxtの serverMiddlewareで、expressのRouterを 使ってAPIが動作しました! なんかベストプラクティスっぽい!
気がしますが、もう一つ気になる ことが。。。 私はIntelliJを使ってるのですが
ん???ts-nodeはtsconfigのpaths普通は 使えませんよ???
IntelliJさんの言う通りに変更してみると。。。
Cannot find module '~/utils/stringUtils'
そりゃそうですね、ts-nodeそのままじゃ 対応してないから。。。
そこで、エイリアスを使うために tsconfig-pathsを使いたい。 これ使うと、pathsが使えるのですが、 nuxt-tsは普通は -r オプション 対応してない。。。ですが
先週、私のQiitaの記事にも書いたんですが
こうすると、nuxt-tsコマンドでtsconfig-paths が使えますー
これでpathsも使えるし、綺麗にAPIが動いた! APIの仕組みはベストっぽい!
だけど、起動コマンドが美しくない。。。
綺麗にするには、nuxtの対応が必要。。。 そこで、勇気を振り絞って
nuxt-tsコマンド持ってる @nuxt/typescript-runtimeリポジトリに PRしてみました^^
結果は。。。
こんにちは!コアcliフックがサポートされるま で、このPRを保留する必要があると思いま す。
おしいw
まだマージされなかですが、core cli対応すれば 行けそうなので、core cliに向けてPR出す 予定です!
NuxtのserverMiddlewareで、 express-router等を読み込んでAPI作って nuxt-tsコマンド使うのが一番良さそう。 まとめ
BFF APIをNuxtで持っておくと、 何かと便利なので是非serverMiddleware 活用してみてください!
最後に
私のチームでは - フルスタックエンジニア or - フルスタックになりたいエンジニア (今使ってる言語は何でもいいです) を募集しています!
ご興味ある方はお声がけください^^ 後日の場合 twitter:@yuit1552 まで、お問い合わせいただければ!
ご静聴ありがとうございました。