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

Question

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Answer 1

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

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

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

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

Comments

[raccy]

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

[yuta0801]

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

[maisumakun]

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

Answer 2

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

• 動的に読み込める仕組みを使用する。【動的読込】

後述する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(読み込みのみ)
【事前統合】webpack、Browserify

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

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

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

【動的読込】SystemJS、jspm

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

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

---

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