目次
トピック034からはJavaScriptについて学習していきますが、Web Development Essentialsでは、本トピックの内容が最も出題範囲が広く、一番の山場かなと思います。次のトピック035で学習するNode.jsの基礎となってくるので、しっかりと知識を深めましょう。
JavaScriptの埋め込み
JavaScriptとは、Webブラウザ上で実行され、Webページを動的に操作するために使用されるプログラミング言語の１つです。HTMLやCSSで構成されたWebページにJavaScriptを組み込むことで、ページ内の要素を動的に変化させることができます。
例えば、ボタンをクリックした時にページ上のテキストの色を変更させたり、動かしたりすることができます。
ブラウザ上でJavaScriptを実行するには、CSSと同様にHTMLの中に直接コードを記述するか、外部ファイルを読み込ませることで実行させることができます。
<script>タグ内にJavaScriptを記述する方法
HTMLファイル内でJavaScriptを実行するには「<script>」タグを使用し、開始タグと終了タグに囲まれた範囲内にJavaScriptコードを記述します。
記述例は下記のとおりです。
■記述例（HTML）
<body>
<p>ページ内容</p>
<script>console.log("こんにちは");</script>
</body><script>タグは以前まで、type属性に「text/javascript」と記述する必要がありましたが、現在では、省略することが推奨されています。
外部ファイルの読み込み
HTMLファイルとは別にJavaScriptファイルを作成すると、HTMLとJavaScriptを分離できるので可読性が向上し、管理が行いやすいメリットがあります。JavaScriptファイルを作成するには拡張子に「.js」を指定し、使用したいファイルで読み込むことで、JavaScriptを実行できます。
HTMLファイル内で別JavaScriptファイルの内容を実行する場合、<script>タグに「src」属性を指定し、値にJavaScriptファイルのパスを記述します。JavaScriptファイルを読み込んだ<script>タグは、開始タグと終了タグの間にJavaScriptコードを記述しても、タグ内のコードは読み込まれない為、注意しましょう。
下記は、sample.jsファイルをHTMLファイルに読み込ませた例となります。
■記述例（HTML）
<body>
<p>ページ内容</p>
<script src="sample.js"></script>
</body>script実行のタイミング
JavaScriptが実行されるタイミングは、<script>タグの記述位置で決まります。HTMLドキュメントは上から順に読み込まれるため、もし<script>タグがHTMLドキュメントの上の方に配置されている場合、JavaScriptコードの実行が完了するまで次の要素の読込が行われず、Webページ全体の表示に時間がかかります。
そのため、<script>タグの記述位置は次の2つの場所に設置することが一般的です。
<head>タグの中
<head>タグ内で<script>タグを読み込み、実行します。実行が完了するまでの間はHTMLの解析が停止するため、Webページの表示には時間がかかります。
そのため、<head>タグに記述するのは、複数のWebページに共通のコードを実行させたい場合や、Webページが完全に読み込まれる前に何かしたい場合（例えば、「NowLoading」や「しばらくお待ち下さい」といった表示をさせたい場合）などに適しています。
記述例は以下の通りです。
■記述例（HTML）
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="sample.js"></script> <!-- <head>タグ内でここで読み込む -->
</head><body>タグの最後
<body>タグの終了タグの直前に記述します。HTML要素の解析が全て終了した後、<script>タグが実行されるため、Webページの表示に時間がかかるといった問題は生じません。厳密にはJavaScriptコードが解析途中の場合、JavaScriptによって機能するボタンをクリックしても反応しないといったエラーとなりますが、解析時間は長くても数秒程度なので、特定の動作を行う場合を除き、<body>タグの終了タグの直前に書くことが推奨されています。
記述例は以下の通りです。
■記述例（HTML）
<body>
<p>ページ内容</p>
<script src="sample.js"></script><!-- <body>タグの終了タグの直前で読み込む -->
</body>ブラウザコンソール
ブラウザコンソールとはブラウザに内蔵されている開発者用の機能（開発者用ブラウザツール）の一部で、JavaScriptのコードを実行したり、既存のWebサイトをテストする際に使用します。
ブラウザコンソールのアクセス方法はいくつかありますが、一般的にはブラウザ上でメニューを開き、該当する項目を選択します。
以下はGoogle Chromeのブラウザコンソールの開き方と表示例となります。
①ブラウザの画面上で右クリックすると「検証」という項目が表示されるので、これをクリックします。
②「検証」をクリックすると、上記のような「開発者用ブラウザツール」が表示されます。
③「Console」タブをクリックすると、ブラウザコンソールが開きます。
その他、主なブラウザの開発者ツールの開き方は以下になります。
| ブラウザ名 | 右クリック後のメニュー内項目名 |
|---|---|
| Google Chrome | 検証 |
| Firefox | 調査 |
| Microsoft Edge | 開発者ツールで調査する |
| safari | 要素の詳細を表示 |
JavaScriptステートメント
ステートメントとは、プログラミング言語における基本的な構成要素の一つで、コンピュータへの命令を表す文です。JavaScriptでは、ステートメントの終わりに「;（セミコロン）」を入力します。
下記は、変数messageに「テスト」を代入するステートメントと、その結果をコンソールに表示するステートメントが書かれたJavaScriptの記述例と表示結果です。
「console.log()」はプログラムの変数の中身を確認したり、不具合が発生した箇所をエラーメッセージで表示する際などに使用されます。（※変数messageの行頭にあるletというキーワードについては、今後の記事で説明を行います。）
■記述例（JavaScript）
let message = "テスト"; console.log(message);
JavaScriptコードを記述する際は、ステートメント間のスペース、タブ、改行などは全て無視されます。そのため、このコードは読みやすくするために、次のように書き換えることもできます。
■記述例（JavaScript）
let message = "テスト";
console.log(message);なお、セミコロンが記述されていない場合、そのステートメントは完全に終了していないと見なされ、本来であれば動作することはありません。しかし、JavaScriptでは文末のセミコロンを省略し、次のステートメントを改行すると、ブラウザがセミコロンの足りない場所を見つけて、正しく書かれたコードのように実行してくれます。
ただし、場合によっては改行がセミコロンと解釈されない場合があり、予期しない動作を引き起こす可能性があるため、常にセミコロンを忘れずに記述することを推奨します。
下記はその記述例です。
■記述例（JavaScript）
let message = "テスト" //セミコロンが未記入
console.log(message);JavaScriptのコメントについて
プログラムを書いていくと、複雑なコードを記述することがあり、後で見直したときに、どこに何が書いてあるのかを理解するのに時間がかかります。更に、1つのソースコードを複数人で作成することも多く、誰がどこに何を書いたのかを確認したい時があります。
このような場合に、ソースコードの中に直接コメントを記述することで、自身や第三者にソースコードの情報を提供することができます。また、著作権などの情報をソースコードに含めるために使用することもあります。
なお、「コメント」として記述した部分は実行時に無視されるので、JavaScriptコードの実行に影響は与えません。（HTMLとCSSにも、「コメント」について解説していますので、HTMLはこちらの記事、CSSはこちらの記事からご確認ください。)
以下は、JavaScriptでコメントを使った例です。
■記述例（JavaScript）
/*
* このプログラムは本章の作成者が記述しました。
* このコメントはプログラムの実行に影響しません。
*/
//ここで message の内容を定義しています。
let message = "こんにちは";
console.log(message);// message の値をコンソールに出力しています。コメントの記述方法
JavaScriptでは、コメントには2つの形式があります。
複数行コメント
「/*」と「*/」で囲まれている部分は全てコメントとして扱われ、「/*」が記述されてから最初の「*/」までに記載された全ての行は、JavaScriptコードの実行時には無視されます。
この記述は通常、複数行にまたがるコメントを記述する際に使用されますが、以下のように単一の行、または行内で使用することも可能です。
記述例は以下の通りです。
■記述例（JavaScript）
console.log(/* 行内に記述したコメント */"こんにちは");1行コメント
2つのスラッシュ「//」を記述すると「//」の後の右側の行全てが、JavaScriptコードの実行時に無視されます。行の先頭に記述すれば、その行全てがコードの実行時に無視されます。
以下のように使用すると、コメントを利用して実際のコード行を一時的に無効にすることもできます。
■記述例（JavaScript）
// この定義は一旦削除する
// let message = "こんにちは";
let message = "新しいメッセージ";JavaScriptは文法の間違い一つで動作しなくなるため、躓くことが多い範囲かもしれません。
しかし、JavaScriptはWebページ制作を行う上で欠かせない言語となり、実際のテストでも一番の山場です。機能性に富んだWebページ制作が出来るように、着実に学習を進めて行きましょう！
それでは、今回はここまで〜。
