Nuxt.jsでCompositionAPIを使う

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