質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

454閲覧

Nuxt.jsで共通のJavascriptの処理を個別のJavascriptでも使えるようにしたい

s0h5511

総合スコア4

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/09/15 04:10

編集2022/09/15 20:59

Nuxt.jsで静的なサイトを作っています。
トップページでは初回表示の際にモーダルを表示します。
表示する際に、共通のjsに記載の背景固定の処理を実行したいのですが、
その際に以下のエラーメッセージが発生しました。

エラーメッセージ

Uncaught ReferenceError: common is not defined

実現したいこと

app.js内のcommonの処理が
個別のjsでも使えるようにしたいです。

該当のソースコード

nuxt.config.js

js

1export default { 2 srcDir: 'src/', 3 mode: 'universal', 4 /* 5 ** Plugins to load before mounting the App 6 */ 7 plugins: [ 8 { 9 src: '~/plugins/magnific.min.js', 10 mode: 'client' 11 } 12 ], 13 /* 14 ** Build configuration 15 */ 16 build: { 17 /* 18 ** You can extend webpack config here 19 */ 20 extend(config, ctx) { 21 config.externals = { 22 jquery: 'jQuery' 23 }; 24 }, 25 }, 26}

index.vue

js

1<script> 2import App from '~/assets/js/app'; 3import PageScript from '~/assets/js/pages/top/script'; 4export default { 5 head() { 6 return { 7 bodyAttrs: { 8 'data-page': 'top' 9 }, 10 script: [ 11 { 12 src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', 13 defer: true, 14 onload: this.onJqueryLoad() 15 }, 16 ] 17 } 18 }, 19 methods: { 20 onJqueryLoad() { 21 this.$nextTick(() => { 22 if (process.browser) { 23 App() 24 PageScript() 25 } 26 }) 27 } 28 } 29} 30</script>

app.js(共通のJS)

js

1export default function () { 2 3 "use strict"; 4 5 let common = {}; 6 common.event = {}; 7 let sc; 8 9 common = { 10 // ---------------------------------------- 11 // 背景固定 12 // ---------------------------------------- 13 fixed : { 14 init: function init() { 15 this.__Flag_open = false; 16 }, 17 open: function open() { 18 const _this = this; 19 _this.__Flag_open = true; 20 sc = $(window).scrollTop(); 21 $('html').css({ 22 minHeight: '100vh', 23 }); 24 $('body').css({ 25 width: '100%', 26 height: 'auto', 27 position: 'fixed', 28 top: -sc, 29 }); 30 $('html').attr('data-fixed', 'true'); 31 }, 32 close: function close() { 33 const _this = this; 34 _this.__Flag_open = false; 35 $('html').css({ 36 minHeight: '' 37 }); 38 $('body').css({ 39 width: '', 40 height: '', 41 position: '', 42 top: '', 43 paddingRight: '' 44 }); 45 $('html, body').prop({ 46 scrollTop: sc 47 }); 48 $('html').attr('data-fixed', 'false'); 49 } 50 }, 51 // ---------------------------------------- 52 // スクロールバーの出現によるガタつきを防ぐ 53 // ---------------------------------------- 54 scrollBarhide : { 55 init: function init() { 56 const body = document.getElementsByTagName('body')[0]; 57 const scrollBarwidth = window.innerWidth - document.body.clientWidth; 58 body.style.paddingRight = scrollBarwidth + 'px'; 59 } 60 }, 61 } 62}

script.js(個別のJS)

js

1export default function () { 2 'use strict'; 3 4 let PagesTop = {}; 5 PagesTop.event = {}; 6 7 $(function() { 8 PagesTop.firstModal.init(); 9 }); 10 11 PagesTop = { 12 firstModal: { 13 init: function init() { 14 $.magnificPopup.open({ 15 items: {src: '#modal-first'}, 16 type: 'inline', 17 mainClass: 'mfp-fade', 18 closeMarkup: '<button class="c-modal__close-button js-modal-close" type="button"><span class="c-modal__close-button-inner"><span class="c-modal__close-button-bars"><span class="c-modal__close-button-bar"></span><span class="c-modal__close-button-bar"></span></span></span></button>', 19 callbacks: { 20 open: function() { 21 $("html").attr("data-modal", "true"); 22 $('.mfp-wrap').css({ 23 position: 'fixed', 24 top: 0 25 }); 26 $('.js-modal-close').on('click', function (e) { 27 e.preventDefault(); 28 $.magnificPopup.close(); 29 }); 30 if (!common.fixed.__Flag_open) { 31 common.scrollBarhide.init(); 32 common.fixed.open(); 33 } 34 }, 35 close: function() { 36 $("html").attr("data-modal", "false"); 37 $('.mfp-wrap').attr({ 38 style: '' 39 }); 40 if (common.fixed.__Flag_open) { 41 common.fixed.close(); 42 } 43 }, 44 } 45 }); 46 }, 47 }, 48 } 49}

大変お手数ではございますがご教示頂ければ幸いと存じます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

commonを別ファイルで定義して、app.jsscript.jsの両方からimportするのが標準的な手段です。

投稿2022/09/15 07:49

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s0h5511

2022/09/15 08:00

ありがとうございます。別ファイルで定義ですね。 具体的にはどのような形になるのでしょうか。
maisumakun

2022/09/15 11:21

上のコードでもimportやexportをすでに使われているので、それを使えばいいだけなのですが、何が疑問でしょうか?
s0h5511

2022/09/15 11:54

下記のようにし、commonのエラーは解消しましたが、 Cannot read properties of undefined (reading '__Flag_open')と出ます。 common.jsを作成 ■common.js export default function () { let common = {}; common.event = {}; } script.jsに追記 ■script.js import * as common from '~/assets/js/common'
maisumakun

2022/09/15 11:59

なぜfunctionをexportしているのでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問