Nuxt.jsでCompositionAPIを使う

Roppongi.vue#5 LT

Transcript

1. Copyright © M&A Cloud All rights reserved. Roppongi.vue #5 @KenjiroKubota Nuxt.jsでCompositionAPIを使う 1
2. Copyright © M&A Cloud All rights reserved. Profile 2 久保田 賢二朗 kubotak-is kubotak_public kenjiro.kubota 株式会社M&Aクラウド所属 PHP JavaScript Go Scala
3. Copyright © M&A Cloud All rights reserved. 3 PR
4. 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を利用
5. Copyright © M&A Cloud All rights reserved. 前置き 5 Composition APIについては詳しく話さない もうみんな耳にタコができるくらい聞いていると思うのでCompositionAPIについ ては詳しく話しません。
6. Copyright © M&A Cloud All rights reserved. お品書き Nuxt.js + CompositionAPI 6 1 Nuxt.js + Typescript + Composition API 2 Nuxt.js + Vuex 3 Vuex + CompositionAPI
7. Copyright © M&A Cloud All rights reserved. Nuxt.js + Typescript 7 Typescript Nuxt.jsをTypescriptで開発する ためにNuxt Typescriptを利用し てスケルトンを作成
8. Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition API 8
9. Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition API 9 pluginsディレクトリにこんな感じのファイルを作成
10. Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition API 10 nuxt.config.tsのpluginsに作成したファイルを指定
11. Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition API 11
12. Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition API 12 SFCで普通にComposition APIが利用できる ※2020/02現在ではCompositionAPIライブラリが必須
13. Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition API 13 @nuxt/types/app/vue.d.tsにNuxt.js特有のSFCプロパティ の定義があるのでTypescriptの恩恵を受けられる
14. Copyright © M&A Cloud All rights reserved. 14 (o`･ω･´σ)σ　普通に使えそうやん と思ったが
15. Copyright © M&A Cloud All rights reserved. 15 (o`･ω･´σ)σ　普通に使えそうやん と思ったが そんなことはなかった　_:(´ཀ`」 ∠):
16. Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition API 16 Nuxt.js + Composition APIの問題点 Nuxtはサーバーサイドレンダリングの際に、サーバーサイドで取得し たデータをHTMLのscriptタグにwindow.__NUXT__.~に出力して、ク ライアントサイドでステートをマッピングすることができるが CompositionAPIを利用した際にはうまく出力されなかった・・・ （書き方を間違えているかもしれないのでホントはできるぞという方は 後で連絡ください）
17. Copyright © M&A Cloud All rights reserved. Nuxt.js + Composition API 17 Nuxt.js + Composition APIの問題点 templateに埋め込んでHTMLとしてサーバーサイドレンダリングはされ るのでSEOとしては利用できるが、その出力した変数情報は空になって しまうのでAPI通信などでデータ取得してる場合はクライアントサイド でも再度取得しなければならない・・・
18. Copyright © M&A Cloud All rights reserved. 18 ( ｰ`дｰ´)　ならばVuex
19. Copyright © M&A Cloud All rights reserved. Nuxt.js + Vuex 19 Nuxt.jsにはVuexコアが組み込まれている Vuexについてはみなさんもうご存知と思うので詳しく説明しません。 Nuxt.jsではstoreディレクトリにあるファイルをVuexとしてインポート する仕組みを持っている。 ここで状態管理がされたステートはwindow.__NUXT__.~を利用してク ライアントサイドでステートを引き継ぐことができる
20. Copyright © M&A Cloud All rights reserved. Nuxt.js + Vuex 20 VuexとTypescript Nuxt.jsでVuexをTypescriptで扱う場合は大きく以下の２パタンある • クラスベース • Vanilla
21. Copyright © M&A Cloud All rights reserved. Nuxt.js + Vuex 21 クラスベース vuex-module-decorators を利用する
22. Copyright © M&A Cloud All rights reserved. Nuxt.js + Vuex 22 Vanilla Vuexに用意されている型 定義を利用して素朴に記 述する
23. Copyright © M&A Cloud All rights reserved. 23 クラスベースに慣れてないので Vanillaを採用
24. Copyright © M&A Cloud All rights reserved. Nuxt.js + Vuex 24 nuxt-typed-vuex Vuexで型定義の恩恵を受けられるライブラリがあるらしいが検証でき てない（懇親会があったら聞きたかった・・・！）
25. Copyright © M&A Cloud All rights reserved. 25 （ ﾟдﾟ ）あれ？ Composition APIは？
26. Copyright © M&A Cloud All rights reserved. Vuex + Composition API 26 SFC Composition API Vuex SFCから直接Vuexにdispatchやgettersを実行せず、CompisitionAPI側 にVuexとの接続を隠蔽
27. Copyright © M&A Cloud All rights reserved. Vuex + Composition API 27 なぜCompositionAPIを挟むのか • 現状でVuexとのやりとりが文字ベースなので型情報が失われるの でCompositionAPIで型を定義し直す ◦ nuxt-typed-vuexで解決するかも • SFCが依存するものをCompositionAPIだけに制限したい • 将来的にサーバーとクライアントのステート共有が CompositionAPIだけになったらいいなという期待 • クライアントサイドだけで非同期通信して値を取得する場合は Vuexを使わず、CompositionAPIだけで完結させている
28. Copyright © M&A Cloud All rights reserved. Vuex + Composition API 28
29. Copyright © M&A Cloud All rights reserved. Vuex + Composition API 29 Vuexを利用している場合はCompositionAPIは右から左に バケツリレーするだけ
30. Copyright © M&A Cloud All rights reserved. Vuex + Composition APIのテスト 30 先程の構成のCompositionAPIをテストする（Jest）
31. Copyright © M&A Cloud All rights reserved. Vuex + Composition APIのテスト 31 LocalVueにVuexとCompositionAPIを登録
32. Copyright © M&A Cloud All rights reserved. Vuex + Composition APIのテスト 32 VuexStoreの登録
33. Copyright © M&A Cloud All rights reserved. Vuex + Composition APIのテスト 33 モジュールモードで登録されるように加工
34. Copyright © M&A Cloud All rights reserved. Vuex + Composition APIのテスト 34 APIレスポンスのモックを作成
35. Copyright © M&A Cloud All rights reserved. Vuex + Composition APIのテスト 35 モックの差し込み
36. Copyright © M&A Cloud All rights reserved. Vuex + Composition APIのテスト 36 簡単でしたね？
37. Copyright © M&A Cloud All rights reserved. まとめ 37 まとめ • Nuxt.js+CompositionAPIはサーバーサイドとクライアントサイド でのステート共有においてまだ使えないが、既存の仕組み(Vuex) と組み合わせることで問題なく使える • 懇親会で色々聞きたかった人生
38. Copyright © M&A Cloud All rights reserved. 38