Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.jsのinjectでインジェクトしてみる話
Search
kenev
January 19, 2019
Technology
3
16k
Nuxt.jsのinjectでインジェクトしてみる話
https://vuekansai.connpass.com/event/112900/
v-kansai Vue.js/Nuxt.js meetup #2で登壇した内容です。
kenev
January 19, 2019
Tweet
Share
More Decks by kenev
See All by kenev
CircleCIのconfig.ymlを守ろうとした話 / Securing the CircleCI config.yml
kenfdev
0
860
k3sとラズパイでフロントエンド開発に挑戦した話 / Frontend Development with k3s and rpi
kenfdev
0
1k
k3sとラズパイでフロントエンド開発に挑戦した話
kenfdev
2
470
Algolia Searchの速さに鳥肌が立った話 / Algolia Search is Really Fast
kenfdev
0
1.3k
コンテナの疲れをk3sとRemoで癒やした話 / Having Fun with Containers
kenfdev
5
4.6k
LaravelとVueのi18nに困ってOSSに貢献した話 / Contributing to a Laravel+Vue i18n OSS Library
kenfdev
0
500
GoのOSSに貢献する話
kenfdev
2
460
Developerから観たOpenFaaSの可能性
kenfdev
2
570
OpenFaaS Workshop 20180928
kenfdev
1
220
Other Decks in Technology
See All in Technology
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
ここがすごいよ! AWS Systems Manager!
saichan11
0
1.8k
Azure AI ことはじめ
tsubakimoto_s
0
130
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
データベース研修 DB基礎【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
210
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
130
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
簡単に始めるSnowflakeの機械学習
nayuts
1
190
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
RailsConf 2023
tenderlove
16
720
Music & Morning Musume
bryan
43
5.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Become a Pro
speakerdeck
PRO
15
4.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Docker and Python
trallard
37
2.9k
The Cult of Friendly URLs
andyhume
75
5.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Git: the NoSQL Database
bkeepers
PRO
423
64k
Transcript
v-kansai Vue.js/Nuxt.js meetup #2 2019.01.19 Nuxt.jsのinjectで インジェクトしてみる話 @kenfdev
⾃⼰紹介
⾃⼰紹介 • 福⼭ 健 • フロント&バックエンドエンジニア @サイダス • Udemy講師 @kenfdev
• OSSに貢献するの好き
仲間募集中!
Nuxt.jsのinject?
Nuxt.jsのinject https://ja.nuxtjs.org/guide/plugins#౷߹͞Εͨೖ
injectして 何がうれしいのか?
injectして何がうれしいのか? https://bit.ly/2MhTen4
この発表で紹介したいこと • Demoアプリでinjectの紹介 • 開発時に何がうれしくなりそうか • テストがどのように書けそうか • 使ってみて気になったこと
Demoアプリ
Demoアプリの概要 • 概要図 • リポジトリ https://github.com/kenfdev/nuxt-inject-example https://vuex.vuejs.org/ja/#ঢ়ଶཧύλʔϯ-ͱͳΜͰ͔͢ʁ Gateway
injectの使い⽅ この設定でアプリ内様々な場 所から $deps として呼び出せ るようになる plugins/dependencies.ts nuxt.config.js
開発時に うれしそうなこと
開発時にうれしいこと① • Vuex内は要件の変化に強い Gateway Gateway Gateway GitHub Gateway 対象リポジトリが GitHubにある
GitLab Gateway 対象リポジトリが GitLabにある GitLab & GitHub Gateway 対象リポジトリがGitHub にもGitLabにある Vuexのビジネスロジック は変わらない! リポジトリのスター数 とってきてー
• 環境変数を使うことで「npm run offline」のような開発 モードも簡単に実現できる。 開発時にうれしいこと② Gateway Gateway Gateway Stub
Gateway 固定値を返すスタブにし てしまうことでローカル ですべて完結! どこでも開発できるよー
テストの雰囲気
Gatewa y テストでの使い⽅例 Mockを作って Storeに差し込む! ただし、せっかくTypeScript 使ってるのにすごく微妙… ビジネスロジック のテストに集中で きる!
概ねいい感じだけど 気になったところ
気になったところ • pluginsに書くと必ずメインのbundleに⼊っちゃう (lazy load対象じゃない) • Vuexを使う場合はstoreでしか使うことがないのでは? (Vueインスタンスとcontextにも注⼊されてるけど) • なのでstoreに直接差し込んじゃえばいい気もする
https://bit.ly/2MhTWR9
まとめ
まとめ • injectの仕組みが最初から⽤意されているのはうれしい • ある程度のアプリであればinjectでDIするのも⼀つの⼿段 • プラグインもLazyLoadできると⼤規模アプリで巨⼤な dependenciesファイルにならずに済むかも? • Vuexを使うアプリであればStoreにだけinjectする⼿段が
あれば良いだけな気もする(ここはまだ経験不⾜です)
ご清聴ありがとうございました! @kenfdev