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
740
nuxt.js で plugins を作る
mikakane
June 22, 2019
Tweet
Share
More Decks by mikakane
See All by mikakane
NestJS で始める怖くないバックエンド開発
mikakane
1
1.2k
コーディングがわからない
mikakane
0
120
Web制作現場のディレクションを支えるGitHub
mikakane
0
490
@ionic/vue で Web アプリを作ってみる
mikakane
0
2.8k
Laravel Package Development
mikakane
16
6.1k
Nuxt.js x Firebase で非同期に開発する
mikakane
0
2k
フロントエンドで作る理由
mikakane
1
1.1k
Firebase で作る Web アプリケーション
mikakane
1
140
技術顧問の現場から - 制作と教育、学習と生産
mikakane
0
680
Other Decks in Technology
See All in Technology
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
180
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
Automated Promptingを目指すその前に / Before we can aim for Automated Prompting
rkaga
0
110
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
160
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
270
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
480
一休.comレストランにおけるRustの活用
kymmt90
3
580
バクラクにおける可観測性向上の取り組み
yuu26
3
410
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
110
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
220
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.8k
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
1
40
Adopting Sorbet at Scale
ufuk
73
9k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cult of Friendly URLs
andyhume
78
6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Building Adaptive Systems
keathley
38
2.2k
How GitHub (no longer) Works
holman
311
140k
Designing for humans not robots
tammielis
249
25k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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!