ミニロト 購入 コンビニk8 カジノ別ソースをインポートするには?[JavaScript/jQuery]仮想通貨カジノパチンコクロス オーバー ガンダム

ミニロト 購入 コンビニk8 カジノ別ソースをインポートするには?[JavaScript/jQuery]仮想通貨カジノパチンコクロス オーバー ガンダム

ビット コイン 出 金 手数料 比較k8 カジノ 「.NET TIPS」のインデックス

ポーカー キャッシュ連載目次

 JavaScriptのソースコードに別のソースコードを取り込みたいと思ったことはないだろうか? 例えば、JavaScriptのソースコードを複数のファイルに分けたいのだが、HTMLの<script>タグで指定するJavaScriptのファイルは1つだけにしておきたいといった場合だ。jQueryを使えば、それが簡単にできる。

 本稿では、jQueryを使ってソースコードを取り込む方法を解説するとともに、JavaScriptの新しい機能による方法も紹介する。

jQueryを使って別ソースをインポートするには?

 jQueryのajaxメソッドを使えばよい。

 同期的に取り込むには、次のコードのようにajaxメソッドを使う(本稿では紹介しないが、非同期処理でよければgetScriptメソッドの方が簡潔に書ける)。

$(window).load(function(){ "use strict"; // jQueryを使ってWebサーバからJavaScriptファイルを読み込む $.ajax({ url: "./sample01.js", // JavaScriptファイルのURL(内容は後述) dataType: "script", async: false, // 同期処理にする }) // 成功時の処理 .done(function (script, textStatus) { // 本来は、非同期処理にして、取り込んだ関数をここで使うことが望ましい console.log("done: " + textStatus); }) // 失敗時の処理 .fail(function (jqxhr, settings, exception) { console.log("fail: " + jqxhr.status + ", " + exception); }) // 終了時の処理(成功/失敗にかかわらず実行される) .always(function (script, textStatus, exception) { console.log("always: " + textStatus); }); // 同期処理を指定しているので、成功時にここへきたときには、 // sample01.jsファイル内の関数が使えるようになっている console.log("getTime(): " + getTime()); // 出力例⇒getTime():18:57 console.log("func1(3): " + func1(3)); // 出力⇒func1(3):これはfunc1です。値は3})

jQueryを使ってソースコードを取り込む例(JavaScript)取り込んでいるソースコード「sample01.js」ファイルの内容は、後に記載する。getTime関数とfunc1関数は、「sample01.js」ファイルに記述してある。ajaxメソッドのdataType引数に”script”を指定すると、JavaScriptファイルを読み込んで、それに含まれている関数を使えるようにしてくれる。async引数をfalseに設定すると、同期的に処理してくれる(既定値はtrue)。コメントにあるように、できれば非同期的に処理して、doneメソッド内で取り込んだ関数を使うようにする方がよい。

 なお、上の例で取り込んでいる「sample01.js」ファイルの内容は、次のようなものだ。ごく普通なJavaScriptのソースコ―ドである。

// 関数宣言(function文)function getTime() { "use strict"; // 現在時刻 var now = new Date(); // 時分秒に分割し、それぞれ2桁の文字列(先頭ゼロ埋め)にする var hh = ('0' + now.getHours()).toString().slice(-2); var mm = ('0' + now.getMinutes()).toString().slice(-2); // HH:mmという書式で現在時刻を返す return hh + ":" + mm;}// 関数式(function演算子)var func1 = function (n) { "use strict"; return "これはfunc1です。値は" + n;}

上のコードで取り込んでいる「sample01.js」ファイルの内容(JavaScript)ごく普通にJavaScriptの関数が記述してあるだけだ。JavaScriptのmodule機能を使って別ソースをインポートするには?

 以上のようにjQueryのajaxメソッドを使えば別ソースを取り込めるのだが、ちょっと面倒ではある。ところが、ECMAScript 2015のmodule機能がWebブラウザで使えるようになると、もっと簡潔に実現できるようになる。

 このmoduleとは、ECMAScript 2015仕様で定められている機能だ。ただし、本稿執筆時点では、メジャーなWebブラウザでこれを正式にサポートしているものはなく、一部で試験的なサポートが始まった段階である。ここではWindows 10 Insider Previewに搭載されているEdgeブラウザの試験的な実装を紹介しよう*1。

*1 Windows 10 Insider Preview Build 14342のEdgeから実装された。ただし、本稿執筆時点では既定では無効になっている。有効にするには、アドレスバーに「about:flags」と入力し、[試験的な JavaScript 機能を有効にする]チェックボックスにチェックを付けてから、Edgeを再起動する。

 まず、JavaScriptのファイルをmoduleとして扱うには、HTMLの<script>タグでtype属性に「module」と指定してWebページに取り込む(次のコード)。

<!– 従来の取り込み方 –><!– script type="text/javascript" src="./importSample.js"></script –><!– moduleとして取り込む方法 –><script type="module" src="./importSample.js" ></script>

JavaScriptファイルをmoduleとしてWebページに取り込む(HTML)現在は、<script>タグを利用し、type属性に「module」と指定する。将来は専用のタグが作られるかもしれない。

 moduleの中では、import/export文が利用できる。上で示した「importSample.js」ファイルの中で、別のファイル(後述する「sample02.js」ファイル)から関数と定数をインポートして使うコードは次のようになる。

// ファイル:importSample.js// sample02.jsに定義されている関数squareと定数piをインポートimport { square , pi, } from "/sample02.js";// 別名を付けることも可能(この場合は、square関数を「sq」という名前で利用する)//import { square as sq, pi, } from '/sample02.js';// 円の面積を求める(インポートした関数squareと定数piを使う)function getAreaOfCircle(radius) { return square(radius) * pi;}

import文で別のファイルから関数と定数をインポートするコードの例(JavaScript)import文は、ECMAScript 2015仕様で定められている機能だ。このようにして、他のmoduleでエクスポートされている関数や定数などを取り込める。import文の書き方には、この他に、エクスポートされているものを全て取り込む方法などがあるが、本稿執筆時点でEdgeが対応しているのはこの書き方だけのようである。

 上でインポートしている「sample02.js」ファイルは、次のコードのようになる。export文を使って明示的にエクスポートする。

// ファイル:sample02.js// 定数piをエクスポートexport const pi = Math.PI;// 関数squareをエクスポートexport function square(x) { return x * x;}

export文で関数と定数をエクスポートするコードの例(JavaScript)export文は、ECMAScript 2015仕様で定められている機能だ。このようにしてエクスポートしたものだけが、他のmoduleでインポートできる。この他に、default exportというものもある。これは無名関数などをmoduleで1つだけエクスポートする機能だ(本稿執筆時点のEdgeでは未対応のようだ)。

 最後に、WebページのJavaScriptからgetAreaOfCircle関数を呼び出す(次のコード)。

<script type="module" src="./importSample.js" ></script> <!– 上の<script>タグについては前述した –> <script type="text/javascript">$(window).load(function(){ "use strict"; console.log(getAreaOfCircle(2.0)); // 出力⇒12.5663706143592}) </script>

moduleに含まれる関数をWebページから呼び出すコードの例(JavaScript)WebページのJavaScriptからmoduleに含まれる関数を呼び出すコードは、従来通りだ。ただし、前述したように、moduleファイルを取り込む<script>タグのtype属性には「module」と指定する。まとめ

 jQueryのajaxメソッドを使うと、別のファイルに記述されたJavaScriptを読み込んで、そこに定義された関数などを呼び出せる。ただし、将来的にはJavaScriptのimport/export文を使って、より簡潔に記述できるようになる予定だ。

カテゴリ:JavaScript 処理対象:言語構文カテゴリ:JavaScript 処理対象:ファイルダウンロードカテゴリ:オープンソース・ライブラリ 処理対象:JavaScript使用ライブラリ:jQuery関連TIPS:Ajax(非同期通信)を実装するには?[JavaScript/jQuery]関連TIPS:strictモードとは?[JavaScript]

■この記事と関連性の高い別の.NET TIPSVisual Studioで静的HTMLページのJavaScriptコードをデバッグするには?ドロップダウンで選択された値とテキストを取得するには?[JavaScript/jQuery]Ajax(非同期通信)を実装するには?[JavaScript/jQuery]jQueryと「linq.js」を連携させてDOMをLINQにより処理するには?[Silverlight 2]HTMLページ内のJavaScriptコードを実行するには?「.NET TIPS」のインデックス

「.NET TIPS」

仮想通貨カジノパチンコaupay ポイント アップ

コメントを残す