034.1 レッスン 1

Certificate:

Web開発の要点

Version:

1.0

Topic:

034 JavaScriptプログラミング

Objective:

034.1 JavaScriptの実行と構文

Lesson:

1 of 1

はじめに

Webページは、3つの標準的な技術を使って開発されています。HTML、CSS、JavaScriptです。JavaScriptとは、Webサイトのコンテンツをブラウザ上で動的に更新するためのプログラミング言語です。JavaScriptは通常、Webページを閲覧するのと同じブラウザで実行されます。つまり、CSSやHTMLと同様に、記述したコードの正確な動作はブラウザによって異なる可能性があります。しかし、ほとんどの一般的なブラウザは、 ECMAScript specification に準拠しています。これは、WebにおけるJavaScriptの使用方法を統一した規格で、ブラウザが実行するためにWebページにどのようにJavaScriptを記述する必要があるかを規定した HTML5 specification とともに、このレッスンの基礎となります。

ブラウザでJavaScriptを実行する

JavaScriptを実行するには、Webページを構成するHTMLの一部として直接コードを取得するか、スクリプトを実行する場所を示すURLをブラウザが取得する必要があります。

次の例は、HTMLファイルに直接コードを含める方法です。

<html>
  <head>
  </head>
  <body>
    <h1>Website Headline</h1>
    <p>Content</p>

    <script>
      console.log('test');
    </script>

  </body>
</html>

コードは <script> と </script> タグで囲まれています。これらのタグに含まれるすべてのものは、ページの読み込み時にブラウザによって直接実行されます。

ページ内の <script> 要素の位置によって、いつ実行されるかが決まります。HTML文書は上から下へと解析され、ブラウザは要素を画面に表示するタイミングを決定します。先ほどの例では、スクリプトが実行される前に、Webサイトの <h1> と <p> タグが解析され、表示される可能性があります。もし、 <script> タグ内のJavaScriptコードの実行に非常に時間がかかったとしても、ページは問題なく表示されます。しかし、スクリプトが他のタグよりも上位に配置されていた場合、Webページの閲覧者はスクリプトの実行が終わるまでページを見ることができません。このような理由から、 <script> タグは通常2つの場所のどちらかに配置されます。

スクリプトが最後に実行されるように、HTMLボディの一番最後に記述します。これは、コードがページに何かを追加し、コンテンツがなければ役に立たないような場合に行います。例えば、ボタンに機能を追加する場合、ボタンが存在しないと機能が意味をなさないからです。
HTMLの <head> 要素の中。これにより、HTMLの本文が解析される前にスクリプトが実行されるようになります。ページの読み込み動作を変更したい場合や、ページがまだ完全に読み込まれていない状態で実行しなければならないものがある場合は、ここにスクリプトを置くことができます。また、特定のスクリプトに依存する複数のスクリプトがある場合は、その共有スクリプトをヘッドに置くことで、他のスクリプトよりも先に実行されるようにすることができます。

管理のしやすさなど、さまざまな理由から、JavaScriptのコードをHTMLコードの外側に存在する別のファイルにまとめておくと便利です。外部のJavaScriptファイルは、以下のように、 src 属性を持つ <script> タグを使って含まれます。

<html>
  <head>
    <script src="/button-interaction.js"></script>
  </head>
  <body>
  </body>
</html>

src 属性は、ブラウザにソースの場所、つまり、JavaScriptのコードを含むファイルの場所を伝えます。この場所は、上記の例のように同じサーバ上のファイルでも、https://www.lpi.org/example.js のようなWebアクセス可能なURLでも構いません。 src 属性の値は、CSSや画像ファイルのインポートと同様に、相対パスか絶対パスかを指定します。 src 属性を持つscriptタグを見つけると、ブラウザはHTTPの GET リクエストを使ってソースファイルを取得しようとするので、外部ファイルにアクセスできる必要があります。

src 属性を使用すると、HTMLの仕様により、 <script>…</script> タグの間に書かれたコードやテキストは無視されます。

<html>
  <head>
    <script src="/button-interaction.js">
      console.log("test"); // <-- This is ignored
    </script>
  </head>
  <body>
  </body>
</html>

ブラウザがファイルをどのように取得し、その後どのように処理するかをさらに指定するために、 script タグに追加できる属性は他にもあります。以下のリストでは、より重要な属性について詳しく説明しています。

async

script タグで使用され、ブラウザにバックグラウンドでスクリプトを取得するように指示し、ページロードプロセスをブロックしないようにします。ブラウザがスクリプトを取得した後も、ブラウザがスクリプトを解析する必要があるため、ページの読み込みは中断されますが、これはスクリプトが完全に取得されるとすぐに行われます。この属性はブール値なので、タグを <script async src="/script.js"></script> のように記述すれば十分で、値を指定する必要はありません。

defer

これは async と同様に、スクリプトを取得している間のページロードプロセスをブロックしないようにブラウザに指示します。しかし、それに加えて、ブラウザはスクリプトの解析を延期します。ブラウザは HTML ドキュメント全体が解析されるまで待ちますが、その後、ドキュメントが完全に読み込まれたことを知らせる前にスクリプトを解析します。 async と同様に、 defer もブール属性で、同じように使用します。 defer は async を暗示するので、両方のタグを一緒に指定するのは便利ではありません。

Note	ページが完全に解析されると、ブラウザは `DOMContentLoaded` イベントをトリガーすることで、表示の準備が整ったことを示します。このイベントによって訪問者はドキュメントを見ることができます。したがって、 `<head>` イベントに含まれるJavaScriptは、 `defer` 属性を含んでいても、ページが表示される前に、常に行動するチャンスがあります。

type

タグの中でブラウザが期待するスクリプトの種類を示します。デフォルトはJavaScript（ type="application/javascript" ）なので、JavaScriptのコードを含める場合や、 src タグでJavaScriptのリソースを指定する場合には、この属性は必要ありません。一般に、すべてのMIMEタイプを指定することができますが、JavaScriptとして示されたスクリプトのみがブラウザで実行されます。この属性の現実的な使用例は2つあります。 type に template などの任意の値を設定することで、ブラウザにスクリプトを実行しないように伝える場合と、スクリプトが ES6 モジュールであることをブラウザに伝える場合です。このレッスンでは、ES6モジュールについては扱いません。

Warning

複数のスクリプトに async 属性を指定すると、ドキュメント内の script タグの順番ではなく、ダウンロードが完了した順に実行されます。一方、 defer 属性は、 script タグの順序を維持します。

ブラウザコンソール

通常、Webサイトの一部として実行されるJavaScriptですが、別の方法もあります。ブラウザのコンソールを使って実行する方法です。最近のデスクトップブラウザには、ブラウザのJavaScriptエンジンでJavaScriptコードを実行するためのメニューが用意されています。これは通常、新しいコードをテストしたり、既存のWebサイトをデバッグしたりするために行われます。

ブラウザのコンソールにアクセスする方法は、ブラウザによって複数あります。最も簡単な方法は、キーボードショートカットを使うことです。現在使用されているいくつかのブラウザのキーボードショートカットを以下に示します。

Chrome: Ctrl+Shift+J （Macでは、 Cmd+Option+J ）
Firefox: Ctrl+Shift+K （Macでは、 Cmd+Option+K ）
Safari: Ctrl+Shift+? （Macでは、 Cmd+Option+? ）

また、Webページを右クリックして、メニューから “検証” （Chrome）または “調査” （Firefox）または “要素の詳細を表示” （Safari）を選択すると、別のブラウザツールであるインスペクタが開きます。インスペクタが開くと、新しいパネルが表示されます。このパネルで “Console” タブを選択すると、ブラウザのコンソールが表示されます。

コンソールを表示すると、入力フィールドに直接JavaScriptを入力することで、ページ上でJavaScriptを実行することができます。実行されたコードの結果は、別の行に表示されます。

JavaScriptステートメント

スクリプトの実行を開始する方法がわかったところで、実際にスクリプトがどのように実行されるのか、その基本的な部分を説明します。JavaScriptスクリプトは、ステートメントとブロックの集合体です。ステートメントの例として、 console.log('test') があります。この命令は、ブラウザのコンソールに単語 test を出力するように指示します。

JavaScriptのすべてのステートメントは、セミコロン（ ; ）で終了します。これにより、ブラウザはそのステートメントが終了し、新たなステートメントを開始できることを伝えます。次のようなスクリプトを考えてみましょう。

var message = "test"; console.log(message);

2つのステートメントを書きました。すべてのステートメントは、セミコロンまたはスクリプトの終わりによって終了します。読みやすくするために、文を別の行に書くこともできます。この方法としては、スクリプトを次のように書くこともできます。

var message = "test";
console.log(message);

これは、ステートメントの間にあるスペース、改行、タブなどのホワイトスペースがすべて無視されるためです。また、ステートメント内の個々のキーワードの間にもホワイトスペースを入れることができますが、これについては次回のレッスンで詳しく説明します。ステートメントは、空のものや、ホワイトスペースのみで構成することもできます。

文がセミコロンで終端されていないために無効な場合、ECMAScriptは複雑なルールに基づいて、自動的に適切なセミコロンを挿入しようと試みます。最も重要なルールは次の通りです。無効なステートメントが、改行で区切られた2つの有効なステートメントで構成されている場合、改行部分にセミコロンを挿入します。例えば、以下のコードは有効なステートメントを形成していません。

console.log("hello")
console.log("world")

しかし、最新のブラウザでは、適切なセミコロンで書かれているかのように自動的に実行されます。

console.log("hello");
console.log("world");

そのため、場合によってはセミコロンを省略することも可能です。しかし、セミコロンの自動挿入のルールは複雑なので、不要なエラーを避けるために、常にステートメントを適切に終了させることをお勧めします。

JavaScriptコメント

大きなスクリプトは非常に複雑になります。他の人や将来の自分のためにスクリプトを読みやすくするために、自分が書いていることにコメントをつけたいと思うかもしれません。また、著作権情報や、いつ、何のために書かれたかなどのメタ情報をスクリプトに入れたい場合もあるでしょう。

このようなメタ情報を含めることを可能にするために、JavaScriptは コメント をサポートしています。開発者は、スクリプトの特定の部分をコメントとして示す特別な文字をスクリプトに含めることができ、実行時にはスキップされます。次の例は、先ほどのスクリプトにコメントを多用したものです。

/*
 This script was written by the author of this lesson in May, 2020.
 It has exactly the same effect as the previous script, but includes comments.
*/

// First, we define a message.
var message = "test";

console.log(message); // Then, we output the message to the console.

コメントはステートメントではないので、セミコロンで終端する必要はありません。その代わり、コメントの書き方に応じて、独自の終了ルールがあります。JavaScriptでコメントを書くには2つの方法があります。

複数行コメント

複数行のコメントの開始と終了を知らせるには、 /* と */ を使います。以降、最初に出現する */ まではすべて無視されます。この種のコメントは、一般的に複数行にまたがって使用されますが、次のように単一行、あるいは一行の中で使用することもできます。

console.log(/* what we want to log: */ "hello world")

コメントの目的は一般的にスクリプトの可読性を高めることなので、1行の中でこのコメントスタイルを使用することは避けるべきです。

単一行コメント

一行を コメントアウト するには、 // （2つのスラッシュ）を使います。同じ行のダブルスラッシュの後の部分はすべて無視されます。先ほどの例では、まずこのパターンで行全体をコメントアウトしています。そして、 console.log(message); の後に、残りの行にコメントを書くために使われています。

一般的には、他の方法で使用できる場合でも、単一行のコメントは単一行で、複数行のコメントは複数行で使用すべきです。文章の中にコメントを入れることは避けるべきです。

コメントは、次のように実際のコードの行を一時的に削除するためにも使用できます。

// We temporarily want to use a different message
// var message = "test";
var message = "something else";

演習

ColorName という変数を作成し、それに値 RED を割り当ててください。

次のスクリプトのどれが有効ですか？

console.log("hello") console.log("world");

console.log("hello"); console.log("world");

// console.log("hello") console.log("world");

console.log("hello"); console.log("world") //;

console.log("hello"); /* console.log("world") */

発展演習

セミコロンを使用せずに1行にいくつのJavaScriptステートメントを記述できますか？
x と y という名前の2つの変数を作成し、それらの合計をコンソールに出力します。

まとめ

このレッスンでは、JavaScriptを実行するさまざまな方法と、スクリプトの読み込み動作を変更する方法を学びました。また、スクリプトの構成とコメントの基本的な概念を学び、 console.log() コマンドの使い方も学びました。

このレッスンで使用したHTML：

<script>: script タグを使って、JavaScriptを直接、あるいは src 属性でファイルを指定して含むことができます。スクリプトの読み込み方法は async と defer 属性で変更することができます。

このレッスンで使用したJavaScriptのコンセプト：

;: セミコロンは文を区切るために使われます。セミコロンは省略できる場合がありますが、基本的には省略してはいけません。
// 、 /*…*/: コメントは、スクリプトファイルにコメントやメタ情報を追加したり、ステートメントが実行されないようにするために使用できます。
console.log("text"): ブラウザのコンソールにテキストを出力するには、 console.log() コマンドを使います。

演習の回答

Create a variable called ColorName and assign the value RED to it.
```
var ColorName = "RED";
```

次のスクリプトのどれが有効ですか？

console.log("hello") console.log("world");

無効です。最初の console.log() コマンドが正しく終了しておらず、行全体が有効なステートメントを形成していません。注）新しいブラウザでは自動的に ; が補完されるため有効

console.log("hello"); console.log("world");

有効です。各ステートメントは適切に終了しています。

// console.log("hello") console.log("world");

有効です。コメントであるため、コード全体が無視されます。

console.log("hello"); console.log("world") //;

無効です。最後の文にセミコロンがありません。一番最後のセミコロンはコメントされているので無視されます。注）新しいブラウザでは自動的に ; が補完されるため有効

console.log("hello"); /* console.log("world") */

有効です。有効なステートメントの後には、コメント付きのコードが続きますが、これは無視されます。

発展演習の回答

セミコロンを使用せずに1行にいくつのJavaScriptステートメントを記述できますか？

スクリプトの最後にある場合は、1つのステートメントを書けば、ファイルの最後で終了します。それ以外の場合は、これまでに学んだ構文ではセミコロンのない文を書くことはできません。
x と y という名前の2つの変数を作成し、それらの合計をコンソールに出力します。
```
var x = 5;
var y = 10;
console.log(x+y);
```