JavaScript Hello World 例：JavaScript 入門

概要：このチュートリアルでは、JavaScript コードを HTML ページに埋め込む方法を示すことで、JavaScript の入門を支援します。

JavaScript を HTML ページに挿入するには、<script> 要素を使用します。HTML ページで <script> 要素を使用する方法は 2 つあります。

JavaScript コードを HTML ページに直接埋め込む。
外部 JavaScript コードファイルを参照する。

HTML ページへの JavaScript コードの埋め込み

<script> 要素内に JavaScript コードを直接配置することは推奨されず、概念実証またはテスト目的でのみ使用する必要があります。

<script> 要素内の JavaScript コードは、上から下に解釈されます。例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
    <script>
        alert('Hello, World!');
    </script>
</head>
<body>
</body>
</html>Code language: HTML, XML (xml)

<script> 要素では、alert() 関数を使用して Hello, World! メッセージを表示します。

外部 JavaScript ファイルのインクルード

外部ファイルから JavaScript をインクルードするには

まず、拡張子が .js のファイル（例：app.js）を作成し、js ディレクトリに配置します。js ディレクトリに JavaScript ファイルを配置する必要はありませんが、ベストプラクティスと考えられています。
次に、<script> 要素の src 属性に JavaScript ソースコードファイルの URL を使用します。

以下は、app.js ファイルの内容を示しています。

alert('Hello, World!');Code language: JavaScript (javascript)

以下は、helloworld.html ファイルの内容を表示します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
    <script src="js/app.js"></script>
</head>
<body>

</body>
</html>Code language: HTML, XML (xml)

Web ブラウザで helloworld.html ファイルを起動すると、Hello, World! メッセージを表示するアラートが表示されます。

リモートサーバーから JavaScript ファイルをロードすることもできます。これにより、コンテンツ配信ネットワーク（CDN）など、さまざまなドメインから JavaScript を提供して、ページの読み込み速度を向上させることができます。

ページに複数の JavaScript ファイルがある場合、JavaScript エンジンはファイルが記述されている順番に解釈します。例：

<script src="js/service.js"></script>
<script src="js/app.js"></script>Code language: HTML, XML (xml)

この例では、JavaScript エンジンは service.js ファイルと app.js ファイルを順番に解釈します。service.js ファイルの解釈が完了してから、app.js ファイルに移行します。

多くの外部 JavaScript ファイルを含むページでは、レンダリング中に空白ページが表示される可能性があります。

これを防ぐには、この例のように </body> タグの直前に JavaScript ファイルを含めます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Hello World Example</title>
</head>
<body>
 
   <!-- end of page content here-->
   <script src="js/service.js"></script>
   <script src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)

`async` 属性と `defer` 属性

ブラウザが JavaScript ファイルのロードと実行を行う方法を変更するには、<script> 要素の 2 つの属性のいずれかを使用します。`async` と `defer` です。これらの属性は、外部スクリプトファイルのみに有効です。

`async` 属性

`async` 属性は、Web ブラウザに JavaScript ファイルを非同期で実行するように指示します。ただし、スクリプトファイルが記述されている順番に実行されるとは限りません。例：

<script async src="service.js"></script>
<script async src="app.js"></script>Code language: HTML, XML (xml)

`app.js` ファイルが `service.js` ファイルの前に実行される可能性があります。したがって、それらの間に依存関係がないことを確認する必要があります。

`defer` 属性

`defer` 属性は、Web ブラウザに HTML ドキュメントの解析後にスクリプトファイルを実行するように要求します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript defer demonstration</title>
    <script defer src="defer-script.js"></script>
</head>
<body>
</body>
</html>Code language: HTML, XML (xml)

<script> 要素を <head> セクションに配置した場合でも、スクリプトはブラウザが </html> タグの閉じタグを受信するまで実行を待ちます。

まとめ

<script> 要素を使用して、HTML ページに JavaScript ファイルを含めます。
<script> 要素の `async` 属性は、Web ブラウザに JavaScript ファイルを並行して取得し、JavaScript ファイルが利用可能になり次第、解析して実行するように指示します。
<script> 要素の `defer` 属性により、Web ブラウザはドキュメントの解析後に JavaScript ファイルを実行できます。

クイズ

このチュートリアルは役に立ちましたか？