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
テストを軸にした生き残り術
kworkdev
PRO
0
200
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
390
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
190
2025年になってもまだMySQLが好き
yoku0825
8
4.7k
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
130
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.5k
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
21
10k
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.2k
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
「Linux」という言葉が指すもの
sat
PRO
4
130
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
560
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Gamification - CAS2011
davidbonilla
81
5.4k
Typedesign – Prime Four
hannesfritz
42
2.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
Building Adaptive Systems
keathley
43
2.7k
The Invisible Side of Design
smashingmag
301
51k
The Cult of Friendly URLs
andyhume
79
6.6k
Practical Orchestrator
shlominoach
190
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
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