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 で plugins を作る
Search
mikakane
June 22, 2019
Technology
0
690
nuxt.js で plugins を作る
mikakane
June 22, 2019
Tweet
Share
More Decks by mikakane
See All by mikakane
NestJS で始める怖くないバックエンド開発
mikakane
0
1k
コーディングがわからない
mikakane
0
120
Web制作現場のディレクションを支えるGitHub
mikakane
0
430
@ionic/vue で Web アプリを作ってみる
mikakane
0
2.6k
Laravel Package Development
mikakane
16
5.7k
Nuxt.js x Firebase で非同期に開発する
mikakane
0
2k
フロントエンドで作る理由
mikakane
1
1k
Firebase で作る Web アプリケーション
mikakane
1
130
技術顧問の現場から - 制作と教育、学習と生産
mikakane
0
670
Other Decks in Technology
See All in Technology
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
100
VS CodeでAWSを操作しよう
smt7174
7
1.6k
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
170
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
200
反実仮想機械学習とは何か
usaito
PRO
11
4.3k
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.5k
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
440
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
130
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
900
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
0
180
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Music & Morning Musume
bryan
41
5.6k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Web development in the modern age
philhawksworth
202
10k
How to name files
jennybc
65
93k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Navigating Team Friction
lara
178
13k
Into the Great Unknown - MozCon
thekraken
10
990
Done Done
chrislema
178
15k
What's new in Ruby 2.0
geeforr
337
31k
Transcript
chatbox.inc 後藤 知宏 Nuxt.js で plugin を作る
chatbox.inc 後 藤 知 宏 株式会社chatbox 代表取締役 関西フロントエンドUG代表 Twitter :
@_mikakane エンジニア / 技術顧問
chatbox.inc Nuxt.js Plugins Vue.js の plugins とはちょっと違う、Nuxt.js 独自の機能 https:/ /ja.nuxtjs.org/guide/plugins
chatbox.inc Nuxt.js Plugins Vue.js の plugins とはちょっと違う、Nuxt.js 独自の機能 Nuxt.js では
JavaScript プラグインを定義することができ、それはルートの Vue.js アプリケーション がインスタンス化される前に実行されます。この機能は、自前のライブラリや外部のモジュールを使 用する際にとりわけ有用です。
chatbox.inc sample plugin import Vue from 'vue' import SomePlugins from
‘some-vue-plugins’ Vue.use(SomePlugins) export default (ctx, inject) => { // ... some code } Vue.js の Plugin 読み込みなど Vue オブジェクトへの操作 関数をexport すると処理してもらえる
chatbox.inc use plugin // nuxt.config.js export default { // ...
plugins: ['~/plugins/some-plugin.js'] // ... } 自作の Plugin は plugins フォルダに格納して、 nuxt.config.js から読み込ませてロードすることができる。
chatbox.inc use plugin only in browser // nuxt.config.js export default
{ // ... plugins: [ '~/plugins/some-plugin.js', { src: '~/plugins/browser-plugin.js', ssr: false } ] } localStorage や Browser API を利用するなど、 ブラウザ側でのみ利用したい場合向けの ssr オプション
chatbox.inc Name conventional plugin export default { plugins: [ '~/plugins/foo.client.js',
// only in client side '~/plugins/bar.server.js', // only in server side '~/plugins/baz.js' // both client & server ] } ファイルの拡張子で only in client / server を自動認識させることもできる( Nuxt.js 2.4 以降。
chatbox.inc Extend Nuxt.js Nuxt.js に グローバルな機能を追加したい。 アラートやローディングなど システム全体で利用するようなもの
chatbox.inc Combined injection export default ({ store }, inject) =>
{ inject('loading', { on: () => { store.commit('loading/on') }, off: () => {store.commit('loading/off') } }) } Nuxt.js に `loading` という名前で オブジェクトを注入 引数から Nuxt.js のコンテキストにアクセスできる。
chatbox.inc use in vue component export default { async mounted(){
this.$loading.on() await this.loadUserList() this.$loading.off() } } `loader` という名前で注入したオブジェクトは、 `this.$loading` の形式で アクセスできる。
chatbox.inc use in vuex export const actions = { loadItemList
({ commit }) { this.$loader.on() // connect to REST API this.$loader.off() } } inject で注入したオブジェクトは、 Vuex Store内からもアクセスできる。
chatbox.inc Nuxt.js injection 一般的ある UI ライブラリで用いられるような Vue の prototype を操作する方法では、
Vue Compoent 内でしかその関数の恩恵が受けられない Nuxt.js 内で頻繁に登場するような共通処理を定義するのに便利 Plugin 経由で inject したオブジェクトは、 Nuxt.js の Vue Compoent から Vuex Storeまで 様々な箇所で用いることができる。
chatbox.inc 例 1 Store の操作 export default ({ store },
inject) => { inject('_loading', { on: () => { store.commit('loading/on') }, off: () => {store.commit('loading/off') } }) } 表示のON/OFF を Store で制御するタイプの UI Layout などで State をbind して v-if で表示制御
chatbox.inc 例2 コンポーネントの利用 import Vue from "vue"; import Alert from
"~/components/layout/Alert.vue" export default (ctx, inject) => { inject('_alert', { error(message){ const alert = new (Vue.extend(Alert))({ propsData: { message } }) alert.vm = alert.$mount() document.body.appendChild(alert.vm.$el) } }) }
chatbox.inc 例3 localStorage の操作 const tokenKey = "LOGINTOKEN" export default
({store}, inject) => { inject('_auth', { async user(){ if(store.state.user.user){ return store.state.user.user }else{ const token = localStorage.getItem(tokenKey) || "" const {user} = await store.dispatch("user/RELOGIN", token) return user } }, }) }
chatbox.inc コード分割のススメ Nuxt.js でのアプリケーションコーディングを、 もっとわかりやすく、もっと簡単に よりシンプルで、読みやすい Component の形を考える
chatbox.inc moduled functions Vue Component の methods や computed が荒ぶると
コードの可読性が著しく低下してくる。 単純な JS 関数はデータ処理には便利だが、 Vue のコンテキストを持っておらず不便 mixin はVue コンテキストを持った関数を注入できるが、 名前の衝突が不安 store の map は便利だが技術的なコンテキストが強い。
chatbox.inc Nuxt.js Injection inject を利用することで特定の処理系を分離 Vue Component は 注入名と操作方法のみを 知っていれば良くなり、実装を知る必要がなくなる
inject なら 必要な Nuxt コンテキストを 選択的に注入する事ができ、plugin の依存も明確 Vue.js の prototype 操作よりも運用可能な範囲が広く、 Store の Mapping よりも 技術的なコンテキストが薄い
chatbox.inc Plugin work well シンプルだがとても大事な設計のミソ Vue Component をよりシンプルに読みやすく ロジックを様々な形で分離する。
chatbox.inc Thanks!