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
1k
k3sとラズパイでフロントエンド開発に挑戦した話 / Frontend Development with k3s and rpi
kenfdev
0
1.3k
k3sとラズパイでフロントエンド開発に挑戦した話
kenfdev
2
560
Algolia Searchの速さに鳥肌が立った話 / Algolia Search is Really Fast
kenfdev
0
1.6k
コンテナの疲れをk3sとRemoで癒やした話 / Having Fun with Containers
kenfdev
5
5k
LaravelとVueのi18nに困ってOSSに貢献した話 / Contributing to a Laravel+Vue i18n OSS Library
kenfdev
0
630
GoのOSSに貢献する話
kenfdev
2
530
Developerから観たOpenFaaSの可能性
kenfdev
2
630
OpenFaaS Workshop 20180928
kenfdev
1
250
Other Decks in Technology
See All in Technology
IoT x エッジAI - リアルタイ ムAI活用のPoCを今すぐ始め る方法 -
niizawat
0
120
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
460
KotlinConf 2025_イベントレポート
sony
1
140
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
Automating Web Accessibility Testing with AI Agents
maminami373
0
1.3k
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
3
590
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
320
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
240
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
3
200
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
いま注目のAIエージェントを作ってみよう
supermarimobros
0
360
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Navigating Team Friction
lara
189
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
How GitHub (no longer) Works
holman
315
140k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Docker and Python
trallard
46
3.6k
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