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
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
970
生成AI時代のコンポーネントライブラリの作り方
touyou
1
250
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
14
5.1k
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
590
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
11
6.5k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
280
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
300
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
990
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
150
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
230
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
150
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
610
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Embracing the Ebb and Flow
colly
86
4.7k
Designing for humans not robots
tammielis
253
25k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
For a Future-Friendly Web
brad_frost
179
9.8k
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 まで、お問い合わせいただければ!
ご静聴ありがとうございました。