Nuxt.jsでCompositionAPIを使う

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Copyright © M&A Cloud All rights reserved. 前置き 4 LaravelからNuxt.jsへ Laravel(PHP)で作られたサイトをNuxt.jsに移行 LaravelでHTTP APIを作成し、Nuxt.jsでフロントエンドを作る ❏ フロントエンドはVue.jsを使っていたので学習コストが低いだろうと Nuxt.jsを選定 ❏ 型安全の恩恵を受けるためにTypescriptで開発 ❏ Vue.js version3で導入が決まっているCompositionAPIを利用

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition API 16 Nuxt.js + Composition APIの問題点 Nuxtはサーバーサイドレンダリングの際に、サーバーサイドで取得したデータをHTMLのscriptタグにwindow.__NUXT__.~に出力して、クライアントサイドでステートをマッピングすることができるが CompositionAPIを利用した際にはうまく出力されなかった・・・（書き方を間違えているかもしれないのでホントはできるぞという方は後で連絡ください）

Slide 17

Slide 17 text

Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition API 17 Nuxt.js + Composition APIの問題点 templateに埋め込んでHTMLとしてサーバーサイドレンダリングはされるのでSEOとしては利用できるが、その出力した変数情報は空になってしまうのでAPI通信などでデータ取得してる場合はクライアントサイドでも再度取得しなければならない・・・

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Copyright © M&A Cloud All rights reserved. Nuxt.js + Vuex 19 Nuxt.jsにはVuexコアが組み込まれている Vuexについてはみなさんもうご存知と思うので詳しく説明しません。 Nuxt.jsではstoreディレクトリにあるファイルをVuexとしてインポートする仕組みを持っている。ここで状態管理がされたステートはwindow.__NUXT__.~を利用してクライアントサイドでステートを引き継ぐことができる

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Copyright © M&A Cloud All rights reserved. Vuex + Composition API 27 なぜCompositionAPIを挟むのか ● 現状でVuexとのやりとりが文字ベースなので型情報が失われるのでCompositionAPIで型を定義し直す ○ nuxt-typed-vuexで解決するかも ● SFCが依存するものをCompositionAPIだけに制限したい ● 将来的にサーバーとクライアントのステート共有が CompositionAPIだけになったらいいなという期待 ● クライアントサイドだけで非同期通信して値を取得する場合は Vuexを使わず、CompositionAPIだけで完結させている