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

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

ただいまの
回答率

88.79%

HTMLから外部のJavascriptファイルのfunctionを呼びたい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,217

you_19000

score 19

環境

ブラウザ:Chrome
モジュール:
"@types/node": "^12.0.2",
"ts-loader": "^6.0.1",
"tsconfig": "^7.0.0",
"typescript": "^3.4.5",
"webpack": "^4.32.0",
"webpack-cli": "^3.3.2"

質問

よろしくお願いします。
上記のモジュールをインストールし、HTML形式のアプリ開発の勉強をしています。

非常に初歩的なところで問題が発生しており、
申し訳ありませんがご相談させて頂けないでしょうか。

以下の組み合わせでHTMLからTypescriptに記述した、
関数「tst()」を呼びたいです。

しかし、以下のエラーが表示されます。

Uncaught ReferenceError: tst is not defined at HTMLInputElement.onclick 

ただし、以下のようにalertだけ記述すると、
画面を開いたタイミングでalertが呼び出されるため、ファイルの紐づけは相違ないと思っています。

alert("alert");

htmlから外部javascript内の関数を利用する場合、
これだけでは動かないでしょうか。

ご面倒ではございますが、ご教示いただけると幸いです。

以下該当のソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>

<body>
  <h1>ツール HOME</h1>
  <h2>お知らせ</h2>
  <ol>
   <li> news aaaaaaaaaaaaaaaaaaaa </li>
  </ol>
  <script src="./render.js"></script>
  <input type="button" value="alert" onclick="tst();" />
</body>

</html>
コード
function tst() {
 alert("alert");
}

webpack.config.js

module.exports = {
 entry: './src/render.ts',
 devtool: 'inline-source-map',
 target: 'electron-renderer',
 module: {
  rules: [
   {
    test: /\.tsx?$/,
    use: 'ts-loader',
    exclude: /node_modules/
   }
  ]
 },
 resolve: {
  extensions: ['.tsx', '.ts', '.js']
 },
 output: {
  filename: 'render.js',
  path: path.resolve(__dirname, 'dist')
 },
 node: {
  __dirname: false,
  __filename: false
 },
};

以下compile後の結果を貼り付けたもの

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";function n(){alert("alert")}r.r(t),r.d(t,"tst",function(){return n})}]);
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

Webpackでバンドルを行った場合、関数名などはWebpackに閉じてしまって、グローバルな名前として取ることは、デフォルトではできなくなります。

対策としては、以下の2つが考えられます。

  • イベント設定もWebpack内のコードから行う
  • window.tst = tst;のように、window経由で名前をグローバルに引っ張り出す

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/22 12:46

    大変ありがとうございます。
    以下の通り記載することで、関数を呼ぶことができました。

    interface Window { tst(): void; }
    declare var window: Window;
    window.tst = () => {
    alert("tst desu");
    };

    なお、ご参考までに教えていただきたいのですが、
    ・イベント設定もWebpack内のコードから行う
    というのは、イメージとしてはJquery等でイベントハンドラを用意しておき、
    イベントハンドラ内で関数を呼ぶ、ということでしょうか。

    【私の頭の中のイメージ】
    $('button').click(() => {
    alert("tst desu");
    });

    お手数ですが宜しくお願い致します。

    キャンセル

  • 2019/05/22 12:48

    別にjQueryでなく、生DOMを使ってaddEventListenerでも構いませんが、「JavaScriptからイベント関数を指定する」という形という意味では同じです。

    キャンセル

  • 2019/05/30 17:42

    承知しました。
    ご回答大変ありがとうございます!

    キャンセル

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

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

関連した質問

同じタグがついた質問を見る