Slide 1
Slide 1 text
Nuxt.js+TypeScriptの
ベストプラクティスを考えてみる
Slide 2
Slide 2 text
自己紹介
名前：田中 友彩（たなか ゆい） Twitter: @yuit1552
所属：株式会社サイバーエージェント アドテク本部
職種：フルスタックエンジニア
（商談からはじめ、インフラ、バックエンド、 Webフロント、Android、iOSまで
一気通貫です）
最近よく使う技術：
Nuxt.js, Typescript, Golang, Kotlin, AWS, GCP, Terraform, Datadog, ML系
座右の名：成せば（大抵なんとか）なる
Slide 3
Slide 3 text
Nuxt.js + TypeScript でのAPIの利用について
考えます。
今回は
Slide 4
Slide 4 text
サードパーティクッキーの扱いが厳しく
なったり、CORSが面倒だったり、別ドメイン
のAPIを叩くケースが結構厳しくなってきた
感じがします。
近年の事情
Slide 5
Slide 5 text
そういった関係で、同一ドメインでAPIを
持った方が何かと扱いやすいケースが多い
ですね。
Slide 6
Slide 6 text
APIを用意する手段として、いくつかの方法が
あるかと思うので今回は、API周りのベスト
プラクティスを考えて見ようとおもいます。
Slide 7
Slide 7 text
・@nuxtjs/proxyで、バックエンドのAPIをproxyする
・nginx等でAPIサーバーにproxyする
・express等でapi作る
・Nuxt.jsのserverMiddlewareを使う
等々
考えられる方法としては
Slide 8
Slide 8 text
用途としては
・クロスオリジン問題を回避したい
・http-onlyにしたクッキーを扱いたい
・クライアントから何本も叩いてるAPIを一本にまとめたい
・フロント仕様でレスポンスを加工したい
等々
Slide 9
Slide 9 text
Proxyとかでもいいですが、やっぱりNuxt.jsで
Backends For Frontends（BFF）のAPI
つくってしまったほうが効率がよく、
Slide 10
Slide 10 text
・バックエンドエンジニアにお願いする手間
が省ける
・画面に依存した仕様などをサクッとフロント
側でできる。
Slide 11
Slide 11 text
など、メリットがおおいと思うので、
Nuxt.jsでBFF APIを持つ場合の持ちかたを
考えてみます。
Slide 12
Slide 12 text
手段を考える １つめ
create-nuxt-app
の、Use a custom server frameworkで
express等を選んで使う
Slide 13
Slide 13 text
こんな感じのが生成
されますが、
Slide 14
Slide 14 text
あれ？importじゃない。。。
packageの nuxt.jsが 2.0.0。。。
Slide 15
Slide 15 text
しょうがない、
バージョン上げてimport使えるように設定
いじろう。
Slide 16
Slide 16 text
ts でexpressからNuxt動作させる場合、
ts-nodeを使います。
Slide 17
Slide 17 text
ts-nodeでimportを使う場合tsconfigの
moduleを、commonjsにする必要ありますが、
変更してしまうと、vueまわりでエラーに。。。
Slide 18
Slide 18 text
ts-node用にtsconfig分けるのもなぁ。。。
Slide 19
Slide 19 text
煩雑になりそうだから、
expressから、nuxtを呼ぶのやめよう！
Slide 20
Slide 20 text
手段を考える ２つめ
serverMiddleware
を使う
Slide 21
Slide 21 text
公式だと (nuxt.config.js) これか
Slide 22
Slide 22 text
これ
Slide 23
Slide 23 text
と書いてありました。nuxt.config.jsにapiや
ミドルウェアのパスを書くのは嫌だったので
カスタムミドルウェアを使ってみよう！
と思いました。
Slide 24
Slide 24 text
Nuxtのdocsには
connectというライブラリのdocsを参照と
書いており、
connectはhttpサーバーっぽかったのですが、
Slide 25
Slide 25 text
ソースコードを読むと
老舗のexpressほど機能はなさそうでした。
さらに、
Nuxt.jsのconnectを呼んでる箇所みると
Slide 26
Slide 26 text
お？
Slide 27
Slide 27 text
渡したmiddlewareを
そのまま読み込んでくれる感じになってる！
Slide 28
Slide 28 text
expressには慣れていたこともあり、expressの
routerを使えると綺麗にapiを整理できそう！
Slide 29
Slide 29 text
あと、connectのgitみると
https://github.com/senchalabs/connect#appusefn
These middleware and libraries are officially supported by the
Connect/Express team:
expressのミドルウェアサポートされてる！
Slide 30
Slide 30 text
ということで、こんな感じで実装します
Slide 31
Slide 31 text
nuxt.config.ts
server/index.ts
server/api/index.ts expressのRouter
も使えます！
Slide 32
Slide 32 text
@nuxt/typescript
(2.9.xからの新しいやつ)
起動スクリプト
Slide 33
Slide 33 text
補足ですが
nuxt 2.9のnuxt-tsコマンドは、ここでcommonjs設定
してるから、importがつかえる
Slide 34
Slide 34 text
定番のミドルウェア含めNuxtの
serverMiddlewareで、expressのRouterを
使ってAPIが動作しました！
なんかベストプラクティスっぽい！
Slide 35
Slide 35 text
気がしますが、もう一つ気になる
ことが。。。
私はIntelliJを使ってるのですが
Slide 36
Slide 36 text
ん？？？ts-nodeはtsconfigのpaths普通は
使えませんよ？？？
Slide 37
Slide 37 text
IntelliJさんの言う通りに変更してみると。。。
Slide 38
Slide 38 text
Cannot find module '~/utils/stringUtils'
Slide 39
Slide 39 text
そりゃそうですね、ts-nodeそのままじゃ
対応してないから。。。
Slide 40
Slide 40 text
そこで、エイリアスを使うために
tsconfig-pathsを使いたい。
これ使うと、pathsが使えるのですが、
nuxt-tsは普通は -r オプション
対応してない。。。ですが
Slide 41
Slide 41 text
先週、私のQiitaの記事にも書いたんですが
Slide 42
Slide 42 text
こうすると、nuxt-tsコマンドでtsconfig-paths
が使えますー
Slide 43
Slide 43 text
これでpathsも使えるし、綺麗にAPIが動いた！
APIの仕組みはベストっぽい！
Slide 44
Slide 44 text
だけど、起動コマンドが美しくない。。。
Slide 45
Slide 45 text
綺麗にするには、nuxtの対応が必要。。。
そこで、勇気を振り絞って
Slide 46
Slide 46 text
nuxt-tsコマンド持ってる
@nuxt/typescript-runtimeリポジトリに
PRしてみました＾＾
Slide 47
Slide 47 text
結果は。。。
Slide 48
Slide 48 text
こんにちは！コアcliフックがサポートされるま
で、このPRを保留する必要があると思いま
す。
Slide 49
Slide 49 text
おしいw
Slide 50
Slide 50 text
まだマージされなかですが、core cli対応すれば
行けそうなので、core cliに向けてPR出す
予定です！
Slide 51
Slide 51 text
NuxtのserverMiddlewareで、
express-router等を読み込んでAPI作って
nuxt-tsコマンド使うのが一番良さそう。
まとめ
Slide 52
Slide 52 text
BFF APIをNuxtで持っておくと、
何かと便利なので是非serverMiddleware
活用してみてください！
Slide 53
Slide 53 text
最後に
Slide 54
Slide 54 text
私のチームでは
- フルスタックエンジニア or
- フルスタックになりたいエンジニア
（今使ってる言語は何でもいいです）
を募集しています！
Slide 55
Slide 55 text
ご興味ある方はお声がけください＾＾
後日の場合
twitter：@yuit1552
まで、お問い合わせいただければ！
Slide 56
Slide 56 text
ご静聴ありがとうございました。