Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
920
k3sとラズパイでフロントエンド開発に挑戦した話 / Frontend Development with k3s and rpi
kenfdev
0
1.1k
k3sとラズパイでフロントエンド開発に挑戦した話
kenfdev
2
510
Algolia Searchの速さに鳥肌が立った話 / Algolia Search is Really Fast
kenfdev
0
1.4k
コンテナの疲れをk3sとRemoで癒やした話 / Having Fun with Containers
kenfdev
5
4.7k
LaravelとVueのi18nに困ってOSSに貢献した話 / Contributing to a Laravel+Vue i18n OSS Library
kenfdev
0
540
GoのOSSに貢献する話
kenfdev
2
470
Developerから観たOpenFaaSの可能性
kenfdev
2
590
OpenFaaS Workshop 20180928
kenfdev
1
220
Other Decks in Technology
See All in Technology
Nihonbashi Test Talk #3_WebDriver BiDiと最新の実装状況 / WebDriver BiDi latest status
takeyaqa
1
160
ファインディの4年にわたる技術的負債の返済 / Repaying 4 Years of Technical Debt at Findy
ma3tk
7
3.8k
GitHub Actions의 다양한 기능 활용하기 - GitHub Universe '24 Recap
outsider
0
540
Amazon Bedrock Multi-Agent Collaboration Workshop の紹介 - ワークショップでAIエージェントを学ぼう
nasuvitz
3
350
問題を認識して解決できる人は何でもできる
i999rri
0
110
属人化したE2E自動テストを ひも解く
honamin09
1
110
2000年てづくりキーボードの旅
tagomoris
1
170
Autonomous Database サービス・アップデート (FY25)
oracle4engineer
PRO
0
270
B10-ひと目でわかる(といいなぁ)Microsoft Purview
seafay
PRO
0
540
Kubernetesを知る
logica0419
18
5.4k
開発者向けツールを魔改造してセキュリティ診断ツールを作っている話 - 第1回 セキュリティ若手の会 LT
pizzacat83
0
400
ドメインロジックで考えるテスタビリティ
leveragestech
1
280
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Into the Great Unknown - MozCon
thekraken
33
1.5k
Site-Speed That Sticks
csswizardry
1
160
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
Code Reviewing Like a Champion
maltzj
520
39k
It's Worth the Effort
3n
183
27k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
GraphQLとの向き合い方2022年版
quramy
44
13k
Gamification - CAS2011
davidbonilla
80
5.1k
Documentation Writing (for coders)
carmenintech
65
4.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
420
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