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

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

ただいまの
回答率

90.35%

  • JavaScript

    17461questions

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

JS内から外部JSを呼び出す方法

解決済

回答 2

投稿 編集

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

yuta0801

score 177

前提・実現したいこと

JavaScript内からCSSの@importのように外部JavaScriptを呼び出したいです
理由としては以下の様なのが複数行もあると見栄えが悪いし全部一つのJSファイルにまとめたいからです
回答よろしくお願いします

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

+3

事前にJavaScriptファイルをまとめる以外に無いと思います。2017年現在はscript要素を使う以外、インポートすることは出来ません。

import文は今後実装されるかもしれません。

【import - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import

注記: この機能は現在どのブラウザにも実装されていません。この機能は、Traceur CompilerやES6 Module Transpilerのようなトランスコンパイラで実装されています。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/04/09 05:35

    Safari 10.1(正式リリース済み)がES6 moduleを実装済みです。(2017年3月29日にリリースと動作を確認)
    http://caniuse.com/#search=module
    珍しくChromeの実装が遅れていますが、EdgeとFirefoxは年内に来そうです。

    キャンセル

  • 2017/04/09 07:07

    すいません、調べていたところrequireというのがあるらしいのですが使用できないのですか?

    キャンセル

  • 2017/04/09 08:49

    require()は、(ブラウザで使う場合)WebpackやBrowserifyで事前コンパイルを行う、あるいは非同期な形に書き直してRequireJSを使うなど、一筋縄では行きません。

    キャンセル

checkベストアンサー

+1

大きく分けて方法は二つです。

  • 動的に読み込める仕組みを使用する。【動的読込】
    後述する1例を除きブラウザ標準にはありません。それを実現するための何かしらのライブラリが必要です。
  • 予め一つにまとめる。【事前統合】
    使用するライブラリを含め全てを一つにまとめます。トランスパイルや圧縮等と一緒に行うことも可能です。

どちらも同じ書き方ができます(できないものもある)。後からどちらかに変更も可能ですので、まずは書き方、そして、それを実現するためのライブラリやツールを紹介していきます。

ES6 Module

ECMAScript2015(ES6)から採用されたimport/export文を使う方法です。ES6が制定された時点では構文のみでどのように読み込むのかは定義されていませんでした。現在、仕様のまとめに入っており、随時、開発中の各ブラウザで標準実装される予定です。(なお、Internet Explorerは開発が停止しているため、今後実装される可能性はほぼ0です)

Babel等で後述のCommonJS等に変換することで、ES6 Moduleに直接対応していないツールでも使用できます。また、TypeScriptでも採用されています。

【動的読込】ブラウザ標準(対応状況、2017年4月9日時点ではSafari10.1とiOS Safari 10.3のみ)、ES Module Loader Polyfil、Babel + SystemJS(読み込みのみ)、jspm(読み込みのみ)
【事前統合】Babel + webpack、Babel + Browserify

CommonJS

require関数を使う方法です。Node.jsでは標準対応しています。

【動的読込】Node.js標準、SystemJS(読み込みのみ)、jspm(読み込みのみ)
【事前統合】webpackBrowserify

AMD

CommonJSとは違い遅延読み込みなどができるようになっている物です。

【動的読込】RequireJSSystemJS(読み込みのみ)、jspm(読み込みのみ)
【事前統合】webpack

SystemJS

新しいモジュールロードの仕組みです。AngularJS2が採用しています。ツールであるSystemJS自体は、CommonJSやAMDのライブラリ読み込みにも対応しています。

【動的読込】SystemJSjspm

Sprockets

事前統合のみです。マジックコメントを用いて単純にJavaScriptを結合します。RailsやSinatra、Middleman等のRuby環境で使われる方法です。Rails等を使用していなければ、採用するメリットはありません。(最新のRails等では他の方法を採用できるようになっています)

【事前統合】Sprockets: Rack-based asset packaging


急ぎ調べたので、間違い等があればご指摘下さい。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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

  • JavaScript

    17461questions

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