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

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

ただいまの
回答率

90.51%

  • JavaScript

    16480questions

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

  • HTML

    9004questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • TypeScript

    346questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

HTMLからJavascriptを呼び出す方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 178

takeshi1907

score 14

以下のように App.js の中の test 関数を index.htmlから実行したく思っていますが、「Uncaught ReferenceError: App is not defined」 というエラーが出て呼び出すことができません。
呼び出しは 「パターン1」 と 「パターン2」 の方法で試しました。
「パターン1」 の場合は return App; → return new App(); も試しました。

過去に似たような質問をしたのですが、同じ、App.js 内での test 関数の呼び出しは成功しました。
今回は HTML ファイルから呼び出せない状況となっています。

よろしくお願い致します。

▼ index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../static/js/app.js"></script>
</head>
<body>

<script type="txt/javascript">

// パターン1
// Uncaught ReferenceError: App is not defined エラー
    App.test();

// パターン2
// Uncaught ReferenceError: App is not defined エラー
    var a = new App.test();
    a.test();

</script>
</body>
</html>

▼ App.js

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
"use strict";
var module1_1 = require("./module1");
var module2_1 = require("./module2");
var App = /** @class */ (function () {
    function App() {
    }
    App.init = function () {
        alert(module2_1["default"]());
    };
    App.test = function () {
        var a = new module1_1.module1();
        alert(a.module1());
    };
    return App;
})();
module.exports = App;

},{"./module1":2,"./module2":3}],2:[function(require,module,exports){
"use strict";
exports.__esModule = true;
var module1 = /** @class */ (function () {
    function module1() {
    }
    module1.prototype.module1 = function () {
        return "module1";
    };
    return module1;
}());
exports.module1 = module1;

},{}],3:[function(require,module,exports){
"use strict";
exports.__esModule = true;
function default_1() {
    return "module2";
}
exports["default"] = default_1;

},{}]},{},[1]);
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

App クラスは即時関数のスコープに閉じられているのでアクセスできません。
Window オブジェクトにぶら下げさえすればアクセス出来そうですが。


ビルドツールに Webpack を使用していれば設定次第でグローバルに定義出来そうですね。

javascript - Webpack: export to existing module in window - Stack Overflow
output.libraryTarget

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/11 11:42 編集

    ありがとうございます。App.js は以下のtypescriptをコンパイルしたのですが、即時関数のスコープに入れないで外部からもアクセス出来る様にするのは、typescriptの方はどのような書き方にすれば良いでしょうか。

    "use strict";

    import { module1 } from "./module1";
    import module2 from "./module2";

    class App{
    public static init() {
    alert(module2());
    }

    public static test(){
    var a = new module1();
    alert(a.module1());
    }
    }

    export = App;

    キャンセル

  • 2018/07/11 11:47

    何を使用しているか知りませんがお使いのビルドツールの設定によるんじゃないですか? webpack なら グローバルに定義する設定があった気がします。モジュールバンドラーも使用しているように見えますが、わざわざビルドされた js に対して html に埋め込まれた js でアクセスするのはちょっと謎ですね。

    キャンセル

  • 2018/07/11 11:52

    ご丁寧に、ありがとうございます。まだ、勉強中で何が良いのかわからず、試行錯誤している状態です。
    色々と試してみますmm

    キャンセル

  • 2018/07/11 13:32

    >ビルドツールに Webpack を使用していれば設定次第でグローバルに定義出来そうですね。
    ありがとうございます。因みにビルドツールはGulpを使用しています。

    var gulp = require('gulp');
    var browserify = require('browserify');
    var source = require('vinyl-source-stream');

    gulp.task('build-ts', function () {
    return browserify({
    entries: './src/ts/app.ts'
    }).plugin('tsify')
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./static/js'));
    });

    キャンセル

  • 2018/07/11 14:18 編集

    browserify まだ生きていたのか… http://www.npmtrends.com/browserify-vs-webpack-vs-gulp

    キャンセル

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

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

関連した質問

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

  • JavaScript

    16480questions

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

  • HTML

    9004questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • TypeScript

    346questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。