Slide 1
Slide 1 text
v-kansai Vue.js/Nuxt.js meetup #2
2019.01.19
Nuxt.jsのinjectで
インジェクトしてみる話
@kenfdev
Slide 2
Slide 2 text
⾃⼰紹介
Slide 3
Slide 3 text
⾃⼰紹介
• 福⼭ 健
• フロント&バックエンドエンジニア
@サイダス
• Udemy講師
@kenfdev
• OSSに貢献するの好き
Slide 4
Slide 4 text
仲間募集中！
Slide 5
Slide 5 text
Nuxt.jsのinject？
Slide 6
Slide 6 text
Nuxt.jsのinject
https://ja.nuxtjs.org/guide/plugins#౷߹͞Εͨೖ
Slide 7
Slide 7 text
injectして
何がうれしいのか？
Slide 8
Slide 8 text
injectして何がうれしいのか？
https://bit.ly/2MhTen4
Slide 9
Slide 9 text
この発表で紹介したいこと
• Demoアプリでinjectの紹介
• 開発時に何がうれしくなりそうか
• テストがどのように書けそうか
• 使ってみて気になったこと
Slide 10
Slide 10 text
Demoアプリ
Slide 11
Slide 11 text
Demoアプリの概要
• 概要図
• リポジトリ
https://github.com/kenfdev/nuxt-inject-example
https://vuex.vuejs.org/ja/#ঢ়ଶཧύλʔϯ-ͱͳΜͰ͔͢ʁ
Gateway
Slide 12
Slide 12 text
injectの使い⽅
この設定でアプリ内様々な場
所から $deps として呼び出せ
るようになる
plugins/dependencies.ts nuxt.config.js
Slide 13
Slide 13 text
開発時に
うれしそうなこと
Slide 14
Slide 14 text
開発時にうれしいこと①
• Vuex内は要件の変化に強い
Gateway
Gateway
Gateway
GitHub
Gateway
対象リポジトリが
GitHubにある
GitLab
Gateway
対象リポジトリが
GitLabにある
GitLab
& GitHub
Gateway
対象リポジトリがGitHub
にもGitLabにある
Vuexのビジネスロジック
は変わらない！
リポジトリのスター数
とってきてー
Slide 15
Slide 15 text
• 環境変数を使うことで「npm run offline」のような開発
モードも簡単に実現できる。
開発時にうれしいこと②
Gateway
Gateway
Gateway
Stub
Gateway
固定値を返すスタブにし
てしまうことでローカル
ですべて完結！
どこでも開発できるよー
Slide 16
Slide 16 text
テストの雰囲気
Slide 17
Slide 17 text
Gatewa
y
テストでの使い⽅例
Mockを作って
Storeに差し込む！
ただし、せっかくTypeScript
使ってるのにすごく微妙…
ビジネスロジック
のテストに集中で
きる！
Slide 18
Slide 18 text
概ねいい感じだけど
気になったところ
Slide 19
Slide 19 text
気になったところ
• pluginsに書くと必ずメインのbundleに⼊っちゃう
（lazy load対象じゃない）
• Vuexを使う場合はstoreでしか使うことがないのでは？
（Vueインスタンスとcontextにも注⼊されてるけど）
• なのでstoreに直接差し込んじゃえばいい気もする
https://bit.ly/2MhTWR9
Slide 20
Slide 20 text
まとめ
Slide 21
Slide 21 text
まとめ
• injectの仕組みが最初から⽤意されているのはうれしい
• ある程度のアプリであればinjectでDIするのも⼀つの⼿段
• プラグインもLazyLoadできると⼤規模アプリで巨⼤な
dependenciesファイルにならずに済むかも？
• Vuexを使うアプリであればStoreにだけinjectする⼿段が
あれば良いだけな気もする（ここはまだ経験不⾜です）
Slide 22
Slide 22 text
ご清聴ありがとうございました！
@kenfdev