プログラムを書こう!

実務や自作アプリ開発で習得した役に立つソフトウェア技術情報を発信するブログ

Vue.js で外部 JS ファイルの関数を呼び出す

この記事は 2021 年 03 月 03 日に投稿しました。

f:id:paveway:20190914064630j:plain

目次

  1. はじめに
  2. Vue.js で外部 JS ファイルの関数を呼び出す
  3. おわりに

1. はじめに

こんにちは、iOS のエディタアプリPWEditorの開発者の二俣です。
今回は業務で使用しているVue.jsで外部 JS ファイルの関数を呼び出す方法についてです。

目次へ

2. Vue.js で外部 JS ファイルの関数を呼び出す

Vue.jsで外部 JS ファイルの関数を呼び出すには、以下のような実装にします。

実装例

外部 JS ファイル(export.js)
// 関数を定義します。
function func1() {
  console.log("Good morning!");
}

// 別の関数を定義します。
function func2() {
  console.log("Good afternoon!");
}

// 関数をエクスポートします。
export default {
  func1,
  func2,
};
App.vue
<template>
  <v-app>
    <v-main> </v-main>
  </v-app>
</template>

<script>
  // 外部JSファイルのモジュールをインポートします。
  // モジュール名"Export"は任意です。
  // JSファイル名の".js"は記述しません。
  import Export from "./export";

  export default {
    name: "App",

    mounted() {
      // モジュール名.関数名で呼び出します。
      Export.func1();
      Export.func2();
    },
  };
</script>

実行結果

Good morning!
Good afternoon!

リファレンス

Vue.js

目次へ

3. おわりに

同じような関数を個々の vue ファイルに書いていたのですが、JS ファイルにまとめたいと思い、その方法を調査しました。

紹介している一部の記事のコードはGitlabで公開しています。
興味のある方は覗いてみてください。

目次へ


私が勤務しているニューラルでは、主に組み込み系ソフトの開発を行っております。
弊社製品のハイブリッド OS Bi-OSは高い技術力を評価されており、特に制御系や通信系を得意としています。
私自身はiOS モバイルアプリウィンドウズアプリを得意としております。
ソフトウェア開発に関して相談などございましたら、お気軽にご連絡ください。

また一緒に働きたい技術者の方も随時募集中です。
興味がありましたらご連絡ください。

EMAIL : info-nr@newral.co.jp / m-futamata@newral.co.jp
TEL : 042-523-3663
FAX : 042-540-1688

目次へ