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

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

kenev
January 19, 2019

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

https://vuekansai.connpass.com/event/112900/

v-kansai Vue.js/Nuxt.js meetup #2で登壇した内容です。

kenev

January 19, 2019
Tweet

More Decks by kenev

Other Decks in Technology

Transcript

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

    View full-size slide

  2. ⾃⼰紹介

    View full-size slide

  3. ⾃⼰紹介
    • 福⼭ 健
    • フロント&バックエンドエンジニア

    @サイダス
    • Udemy講師
    @kenfdev
    • OSSに貢献するの好き

    View full-size slide

  4. 仲間募集中!

    View full-size slide

  5. Nuxt.jsのinject?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. Demoアプリ

    View full-size slide

  11. Demoアプリの概要
    • 概要図
    • リポジトリ

    https://github.com/kenfdev/nuxt-inject-example
    https://vuex.vuejs.org/ja/#ঢ়ଶ؅ཧύλʔϯ-ͱ͸ͳΜͰ͔͢ʁ
    Gateway

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  15. • 環境変数を使うことで「npm run offline」のような開発
    モードも簡単に実現できる。
    開発時にうれしいこと②
    Gateway
    Gateway
    Gateway
    Stub
    Gateway
    固定値を返すスタブにし
    てしまうことでローカル
    ですべて完結!
    どこでも開発できるよー

    View full-size slide

  16. テストの雰囲気

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. 気になったところ
    • pluginsに書くと必ずメインのbundleに⼊っちゃう

    (lazy load対象じゃない)
    • Vuexを使う場合はstoreでしか使うことがないのでは?

    (Vueインスタンスとcontextにも注⼊されてるけど)
    • なのでstoreに直接差し込んじゃえばいい気もする
    https://bit.ly/2MhTWR9

    View full-size slide

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

    View full-size slide

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

    View full-size slide