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.2k
Firebase で作る Web アプリケーション
mikakane
1
140
技術顧問の現場から - 制作と教育、学習と生産
mikakane
0
680
Other Decks in Technology
See All in Technology
BLADE: An Attempt to Automate Penetration Testing Using Autonomous AI Agents
bbrbbq
0
290
スクラムチームを立ち上げる〜チーム開発で得られたもの・得られなかったもの〜
ohnoeight
2
350
[FOSS4G 2019 Niigata] AIによる効率的危険斜面抽出システムの開発について
nssv
0
310
社内で最大の技術的負債のリファクタリングに取り組んだお話し
kidooonn
1
550
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
380
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
Lambdaと地方とコミュニティ
miu_crescent
2
370
AGIについてChatGPTに聞いてみた
blueb
0
130
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
680
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
28
12k
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
190
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.6k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
88
5.7k
Making Projects Easy
brettharned
115
5.9k
A better future with KSS
kneath
238
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Agile that works and the tools we love
rasmusluckow
327
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
A Tale of Four Properties
chriscoyier
156
23k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
We Have a Design System, Now What?
morganepeng
50
7.2k
What's new in Ruby 2.0
geeforr
343
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!