JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでindex.htmlページから非同期コードを呼び出す方法

HTMLページの読み込み時に非同期処理を実行したい場合は、<body>タグのonLoad属性と組み合わせて、asyncとawaitを使用します。これにより、ページとそのリソースが完全に読み込まれたタイミングで、非同期関数を安全に呼び出すことができます。

以下に、実際に動作するサンプルコードを示します。

サンプルコード

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body onLoad="callFunction()">
<script>
    async function callFunction(){
        await testFunction();
    }
    function testFunction(){
        console.log("Hi...");
    }
</script>
</body>
</html>

プログラムの実行方法

上記のプログラムを実行するには、まずファイルを「anyName.html（index.html）」という名前で保存します。次に、保存したファイルを右クリックし、VS Codeエディターのメニューから「Open with Live Server」を選択してブラウザーで開いてください。

実行結果

このプログラムを実行すると、ブラウザーの開発者ツールのコンソールに以下のメッセージが出力されます。

JavaScriptでindex.htmlページから非同期コードを呼び出す方法

ポイント解説

  • onLoad属性： ページ本体および画像などのリソースの読み込みがすべて完了した時点で、指定した関数が呼び出されます。
  • async関数： callFunction()をasync関数として定義することで、関数内でawaitキーワードが使えるようになります。
  • await： testFunction()がPromiseを返す非同期処理の場合、その処理が完了するまで待機してから次のステップへ進みます。

なお、より現代的な書き方としては、onLoad属性の代わりにwindow.addEventListener("load", callFunction)を使用する方法もあります。どちらの方法でも、ページ読み込み完了後に非同期処理を確実に実行できます。

  1. 【JavaScript入門】文字列を繰り返す方法 – Array()とjoin()を組み合わせた実装例

    JavaScriptである文字列を指定した回数だけ繰り返して表示したい場合、Array()コンストラクタとjoin()メソッドを組み合わせることで簡単に実現できます。 仕組みの解説 new Array(value + 1)は、要素数が「value + 1」個の空の配列を生成します。この空の配列に対してjoin(this)を実行すると、各要素の間に区切り文字として自分自身（対象の文字列）が挿入されます。要素が value + 1 個あれば間は value 個できるため、結果的に元の文字列が value 回繰り返されるという仕組みです。 サンプルコード 以下に実際のコード例を示します。 <!

  2. HTMLページからリダイレクトする方法を解説！metaタグの使い方

    ページリダイレクトとは？ ページリダイレクトとは、あるURLをクリックしてページXにアクセスしたにもかかわらず、内部的に別のページYへ自動的に転送される仕組みのことです。サイトの移転やURLの変更、メンテナンス中の一時的な誘導など、さまざまな場面で活用されています。 HTMLページでリダイレクトする基本：METAタグを使う HTMLページから別のページへリダイレクトさせるには、<meta>タグを使用します。<head>内に記述したmetaタグのhttp-equiv属性でHTTPヘッダーに相当する値を指定し、content属性で転送までの待機秒数と転送先URLを設定しま