JavaScriptプログラムを保存する前に知っておかないと損するscript要素の基礎知識：初心者のためのWebアプリ開発超入門（5）（1/3 ページ）

初めてJavaScriptのWebアプリを作ってみたいという人に向けてscriptタグやsrc属性の書き方、.jsファイルの保存方法などについて解説する。

» 2016年09月20日 05時00分公開

※本稿は、秀和システム発行の書籍『JavaScript Web開発パーフェクトマスター（2015年6月27日発行）』の中から、特に＠IT読者に有用だと考えられる箇所を編集部が選び、著者及び出版社の許可を得て転載したものです。
ご注意：本稿は、タイトルを除き、書籍の内容を改変することなく、そのまま転載したものです。このため用字用語の統一ルールなどは＠ITのそれとは一致しません。あらかじめご了承ください。

　JavaScriptはスクリプト言語なので、テキストエディターで記述したソースコードをそのまま保存しておけば、Webブラウザーが読み込んだときにソースコードの部分をJavaScriptエンジンに引き渡して解析を依頼し、その結果プログラムが実行されます。

　ですが、問題は「どこに保存するのか」ですよね。JavaScriptのコードは、HTMLドキュメントの中に書けばHTMLと一緒に保存されますし、専用のファイルに書いておいて別ファイルとして保存しておくこともできます。

Point　JavaScriptプログラムを埋め込む場所

　JavaScriptのプログラムはプレーンテキストのデータなので、HTMLドキュメントのヘッダー情報、またはbody要素の内部の任意の場所に書き込むことができます。また、ソースコードの量が多い場合などは専用のファイルを用意して、この中に書き込むことができます。

　当然、テキストデータなので、ソースファイル自体もテキスト形式ファイルになりますが、拡張子は「.txt」ではなく、JavaScriptのソースファイルであることを表すために「.js」とすることと決められています。

　このようにすれば、必要に応じて数だけソースファイルを作成し、それぞれHTMLドキュメントの任意の場所で読み込ませてプログラムを実行することができます。

　ところで、HTMLドキュメントは「上から下へ順番に読み込まれる」という大前提があります。なので、JavaScriptのプログラムも、記述した場所によって実行されるタイミングが異なります。

　もし、HTMLの要素よりも前にJavaScriptのソースコードがあれば、プログラムが実行されてから次の行のHTML要素が読み込まれます。

　このような、JavaScriptプログラムが実行されるタイミングを知っておくことは、今後においてとても重要です。セクション後半では、HTMLの要素とJavaScriptプログラムを混在させて、それぞれが読み込まれる様子を実際に確かめることにします。

HTMLドキュメントの中にコードを記述する

　JavaScriptのコードは、HTMLドキュメントの内部に直接、書くことができます。これまでにもやってきたので、すでにおわかりかと思いますが、<script>タグの意味などはさらっと流してきましたので、ここでしっかり確認しておきたいと思います。

HTMLドキュメントにJavaScriptのコードを書くときは<scrpt>～</script>内部に記述する。

script要素としてHTMLドキュメント内部にコードを埋め込む

　HTMLドキュメントの中に、script要素の要素内容としてソースコードを埋め込む書き方は、手軽であることから最も広く使われています。ただし、ドキュメント内部にコードを書いてしまうわけですから、複雑なプログラムだとソースコードが長くなるので、ドキュメント全体がごちゃごちゃしてしまい、JavaScriptのコードもHTMLのコードも読みにくくなることがあります。

　話を戻して、JavaScriptのコードを記述するにはscript要素を使用してきました。

　もともとscriptは、JavaScriptだけでなくVBscriptなどのスクリプト（プレーンテキストのソースコード）をHTMLドキュメントに埋め込むための要素です。なので、JavaScriptを埋め込む場合は、開始タグの内部に「type="text/javascript"」のように記述します。typeは、「MIMEタイプ」と呼ばれる、データの内容を伝えるための識別情報を設定するための属性です。もし、埋め込むのがVBscriptであれば「type="text/vbscript"」のように記述するのですね。

　なお、このようなMIMEタイプの指定は、HTML 4.01では必須だったのですが、HTML5ではtype属性にtext/javascriptを設定する場合に限り、省略することが可能になりました。というわけで、ドキュメント冒頭で<!DOCTYPE html>が指定されたHTML5の場合は、次のように書くだけで済みます。