Nuxt.jsのinjectでインジェクトしてみる話

Transcript

1. v-kansai Vue.js/Nuxt.js meetup #2 2019.01.19 Nuxt.jsのinjectで インジェクトしてみる話 @kenfdev

2. ⾃⼰紹介

3. ⾃⼰紹介 • 福⼭ 健 • フロント&バックエンドエンジニア
 @サイダス • Udemy講師 @kenfdev

   • OSSに貢献するの好き

4. 仲間募集中！

5. Nuxt.jsのinject？

6. Nuxt.jsのinject https://ja.nuxtjs.org/guide/plugins#౷߹͞Εͨ஫ೖ

7. injectして 何がうれしいのか？

8. injectして何がうれしいのか？ https://bit.ly/2MhTen4

9. この発表で紹介したいこと • Demoアプリでinjectの紹介 • 開発時に何がうれしくなりそうか • テストがどのように書けそうか • 使ってみて気になったこと

10. Demoアプリ

11. Demoアプリの概要 • 概要図 • リポジトリ
 https://github.com/kenfdev/nuxt-inject-example https://vuex.vuejs.org/ja/#ঢ়ଶ؅ཧύλʔϯ-ͱ͸ͳΜͰ͔͢ʁ Gateway

12. injectの使い⽅ この設定でアプリ内様々な場 所から $deps として呼び出せ るようになる plugins/dependencies.ts nuxt.config.js

13. 開発時に うれしそうなこと

14. 開発時にうれしいこと① • Vuex内は要件の変化に強い Gateway Gateway Gateway GitHub Gateway 対象リポジトリが GitHubにある

    GitLab Gateway 対象リポジトリが GitLabにある GitLab
 & GitHub Gateway 対象リポジトリがGitHub にもGitLabにある Vuexのビジネスロジック は変わらない！ リポジトリのスター数 とってきてー

15. • 環境変数を使うことで「npm run offline」のような開発 モードも簡単に実現できる。 開発時にうれしいこと② Gateway Gateway Gateway Stub

    Gateway 固定値を返すスタブにし てしまうことでローカル ですべて完結！ どこでも開発できるよー

16. テストの雰囲気

17. Gatewa y テストでの使い⽅例 Mockを作って Storeに差し込む！ ただし、せっかくTypeScript 使ってるのにすごく微妙… ビジネスロジック のテストに集中で きる！

18. 概ねいい感じだけど 気になったところ

19. 気になったところ • pluginsに書くと必ずメインのbundleに⼊っちゃう
 （lazy load対象じゃない） • Vuexを使う場合はstoreでしか使うことがないのでは？
 （Vueインスタンスとcontextにも注⼊されてるけど） • なのでstoreに直接差し込んじゃえばいい気もする

    https://bit.ly/2MhTWR9

20. まとめ

21. まとめ • injectの仕組みが最初から⽤意されているのはうれしい • ある程度のアプリであればinjectでDIするのも⼀つの⼿段 • プラグインもLazyLoadできると⼤規模アプリで巨⼤な dependenciesファイルにならずに済むかも？ • Vuexを使うアプリであればStoreにだけinjectする⼿段が

    あれば良いだけな気もする（ここはまだ経験不⾜です）

22. ご清聴ありがとうございました！ @kenfdev