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

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

ただいまの
回答率

90.03%

外部jsを読み込むには?

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,111

chunwe

score 7

モジュール化されていないライブラリを読み込むには、
どのような手段が提供されているのでしょうか?

たとえば、グローバルスコープに関数を定義するようなライブラリを利用するケースでは、
下記のような構成では正しく読み込まれません。

  • nuxt.config.js
plugins: [
  '~/plugins/test.js'
],
  • pages/index.vue
<script>
export default {
    mounted: function() {
        func();
    }
}
</script>
  • plugins/test.js
var func = function() {
    console.log('call func');
}

手動でspaトップのhtmlファイルに書き起こせば良いのかもしれませんが、
可能であればNuxtで一元管理したいと考えています。

また、上記の質問ですが、プラグイン側のjsは編集できない前提でお願いします。
何卒よろしくお願い致します。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

chunweさんのコードでは、func関数をグローバルに宣言できていません。
plugins/test.jsのローカル関数になっています。
JSのモジュール(ファイル)は、それぞれスコープとなるので、exportしない限り、そのファイルでのみ有効です。このあたりは別途調べてみてください。

chunweさんのコードでは、mounted()func()を実行しています。このライフサイクルフックはクライアントでのみ実行されるので、ここでいう「グローバル」はwindowの事とします。
その場合、window.funcを定義する必要があります。

// plugins/test.js
window.func = function() { ... }

また、プラグインはクライアントサイドとサーバーサイドの両方で実行されますが、今回の場合サーバーサイドでは実行すべきでない(windowがない)ので、nuxt.config.jsでプラグインのssrfalseにします。

export default {
  plugins: [
    { src: '~/plugins/test', ssr: false }
  ]
}

追記(2018/12/23)

des.jsについて確認しました。
このプラグインがエラーになるのは「var宣言しないことでグローバルにする」など、現代では許容されない書きかたがされているのが問題です(かなりおおざっぱに言っているので、正確ではありません)。
サイト自体が2006年の更新でとまっているようですので、仕方ないかもしれません。
同じようなことをする別のプラグインを探すか、des.js自体を修正する必要があります。

// des.js
des = new function() { ... } // この時点で、前もって`des`が宣言されていないので、エラーになります。

「グローバル関数を展開するやりかた」自体は、上に自分が書いた方法でできます。
今回は、使おうとしているプラグイン側に問題があるようです。

追記(2018/12/23)

もう一つやり方があったので、追記します。
nuxt.config.jsheadオプションを利用する方法です。

この方法であれば、scriptタグとしてhead要素に展開されるので、モジュールシステムの外側でスクリプトを実装・実行できます。
クライアントサイドのVue関連の記述はbodyの最後に読み込まれるので、その実行時点ではheadで読み込んだJSを問題なく使用できると思います。

module.exports = {
  head: {
    script: [
      { src: 'http://user1.matsumoto.ne.jp/~goma/js/des.js' }
    ]
  }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/23 19:15

    すみません。グローバル関数という呼び方には語弊がありました。
    前述したグローバル関数とは、window下に暗黙的に展開される関数/変数を指します。

    以下のように、scriptタグでロードすると正しくwindow下に展開されます。
    <script src="plugins/test.js"></script>

    このような設計思想で実装されたライブラリを、
    いくつか利用したいと考えているのですが、可能でしょうか?

    一例として、des.jsをあげます。
    [des.js] http://user1.matsumoto.ne.jp/~goma/js/des.html

    こちらのライブラリでは、des変数がグローバルエリアに宣言されますが、
    nuxtで使用するにはどうしたら良いのでしょうか?

    キャンセル

  • 2018/12/23 20:31

    des.jsに関してはnuxt等のモジュールシステムの管理と相性が悪いということですね。しかし、これ以外にも同様の不具合でうまくロードされないライブラリが存在するためもう少し検討したいと思います。

    キャンセル

  • 2018/12/23 21:59

    headオプションでscriptタグを追加する方法は最初に利用しました。
    しかし、これらのオプションは飽くまでVueモジュールが展開されたあと読み込まれ、非同期的にライブラリが実行されるためVueは読み込み完了を待機しません。
    これについては、create/mounted契機でライブラリを呼び出せないことからも明らかです。
    以上の理由から、プラグインとして読み込み、かつモジュールの管理外に定義したいと考えております。

    キャンセル

  • 2018/12/23 23:23

    あー、script要素の埋め込みが同期的なだけで、読み込みは非同期でした。すみません。
    「手動でspaトップのhtmlファイルに書き起こせば良いのかもしれませんが、可能であればNuxtで一元管理したい」とのことなので、nuxt.config.jsのbuildオプションでwebpackの設定をいじって、HTMLにスクリプトタグを埋め込む感じにはできるかもしれませんが、手間を考えると手動とかわらなそうですね。
    お役に立てずすみません。

    キャンセル

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

  • ただいまの回答率 90.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる