Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
nuxt.js で plugins を作る
mikakane
June 22, 2019
Technology
0
400
nuxt.js で plugins を作る
mikakane
June 22, 2019
Tweet
Share
More Decks by mikakane
See All by mikakane
コーディングがわからない
mikakane
0
92
Web制作現場のディレクションを支えるGitHub
mikakane
0
280
@ionic/vue で Web アプリを作ってみる
mikakane
0
2.3k
Laravel Package Development
mikakane
16
4.6k
Nuxt.js x Firebase で非同期に開発する
mikakane
0
1.7k
フロントエンドで作る理由
mikakane
1
890
Firebase で作る Web アプリケーション
mikakane
1
120
技術顧問の現場から - 制作と教育、学習と生産
mikakane
0
650
Other Decks in Technology
See All in Technology
2022 COSCUP - GKE Backend Cluster 除雷分享
brentchang
0
120
CityGMLとFBXの連携で地理空間のエンタメ化
soh_mitian
0
670
金融スタートアップの上場準備で大事にしたマインドセット / 2022-08-04-the-mindset-in-preparing-for-ipo
stajima
0
310
Amplifyで Webアプリケーションの 堅固な土台をサクッと構築する方法
kawasakiteruo
0
210
#awsbasics [LT] サーバレスECにおける Step Functions の使い方
miu_crescent
0
830
塩漬けにしているMySQL 8.0.xxをバージョンアップしたくなる、ここ数年でのMySQL 8.0の改善点 / MySQL Update 202208
yoshiakiyamasaki
1
590
プロダクトマネージャーの役割と育成、評価
middleokada
15
9.5k
QuickSight 触ってみた
tomuro
0
370
疎ベクトル検索と密ベクトル検索: 第68回 Machine Learning 15minutes! Broadcast
keyakkie
1
240
VS Code Meetup #21 - もう一度知りたい基礎編 - ファイル操作、コーディングの基本編
74th
0
180
脆弱性スキャナのOWASP ZAPを コードベースで扱ってみる / OWASP ZAP on a code base
task4233
1
220
SBOMを利用したソフトウェアサプライチェーンの保護
masahiro331
1
180
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1020
420k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
21
1.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.7k
Building Applications with DynamoDB
mza
84
4.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
980
What's new in Ruby 2.0
geeforr
335
30k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.5k
Web development in the modern age
philhawksworth
197
9.3k
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!