Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt.jsでCompositionAPIを使う

1851e42555822b0fc915dbf3ef0c0f76?s=47 kubotak
February 25, 2020

 Nuxt.jsでCompositionAPIを使う

Roppongi.vue#5 LT

1851e42555822b0fc915dbf3ef0c0f76?s=128

kubotak

February 25, 2020
Tweet

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で扱う場合は大きく以下の2パタンある • クラスベース • 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