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
800
k3sとラズパイでフロントエンド開発に挑戦した話 / Frontend Development with k3s and rpi
kenfdev
0
950
k3sとラズパイでフロントエンド開発に挑戦した話
kenfdev
2
440
Algolia Searchの速さに鳥肌が立った話 / Algolia Search is Really Fast
kenfdev
0
1.2k
コンテナの疲れをk3sとRemoで癒やした話 / Having Fun with Containers
kenfdev
5
4.5k
LaravelとVueのi18nに困ってOSSに貢献した話 / Contributing to a Laravel+Vue i18n OSS Library
kenfdev
0
460
GoのOSSに貢献する話
kenfdev
2
440
Developerから観たOpenFaaSの可能性
kenfdev
2
570
OpenFaaS Workshop 20180928
kenfdev
1
200
Other Decks in Technology
See All in Technology
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
120
Four keys改善の取り組み事例紹介
sansantech
PRO
3
230
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
340
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
160
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
1
200
DevOpsDays History and my DevOps story
kawaguti
PRO
8
1.6k
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
540
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
社内勉強会運営のコツ
senoo
6
1.1k
Algyan イベント振り返り
linyixian
0
190
ChatGPT for IT Service Management (IT Pro)
dahatake
2
160
Featured
See All Featured
Designing with Data
zakiwarfel
95
4.8k
[RailsConf 2023] Rails as a piece of cake
palkan
22
3.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Into the Great Unknown - MozCon
thekraken
10
980
Happy Clients
brianwarren
91
6.4k
Bash Introduction
62gerente
604
210k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Side Projects
sachag
451
41k
Product Roadmaps are Hard
iamctodd
43
9.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
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