ももの知恵の樹

JavaScript_プログラムの作成

JavaScriptについて

JavaScriptは、Webブラウザ上で動くプログラムを作るための言語です。

JavaScriptはWEBブラウザに実装されているので、特別な開発環境を要さずに、HTMLファイルに書き込むだけで実行できます。

JavaScript の仕様は標準化団体 Ecma International によって ECMAScript として定められています。


プログラムの作成

ファイルの拡張子

JavaScriptの拡張子は「.js」とします。 


ファイル名.js

記述ルール

  • 大文字・小文字を区別します。
  • 命令の最後にセミコロン（；）を必ず付けます。
  • 単語の途中での改行は記述できません。
  • 全角文字は使用できません。

文法チェック

JavaScriptは曖昧な実装や明確な実装ミスがエラーにならない場合があります。

これに対応するために、標準機構であるECMAScript version5(2009頃に策定)からStrict モード(厳格モード)機能が採択されました。

Strict モードではエラーのチェックが厳しくなるため、これまでエラーとならなかった曖昧な実装が動作しなくなります。


グローバルスコープのstrictモード

ファイルの先頭に「"use strict"」を記述すればファイル全体が Strictモードになります。

なお、宣言後に連結されたすべてのスクリプトもStrictモードになります。

strictモードに対応していないJSファイルがエラーとなる場合があるので注意が必要です。 


"use strict";

ローカルスコープのstrictモード

関数(メソッド)の中に「"use strict"」を記述すればローカルスコープ、つまりその関数の中だけstrictモードでレンダリングされます。 


function getMessage() {
    "use strict";

    var message = "Hello World";
    return message;
}

プログラムの実行

インラインスクリプト

インラインスクリプトとは、HTML内にJavaScriptを直接埋め込む方法です。

scriptタグを使用して、HTMLファイルにJavaScriptを記述します。

なお、HTML5からはtype属性を省略することが可能になりました。 


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script type="text/javascript">
      document.write("<p>インラインスクリプト</p>");
    </script>
  </body>
</html>

外部スクリプト

外部スクリプトをHTML内で読み込む場合、scriptタグにsrc属性を指定します。

src属性にはJavaScriptのファイル名を記述します。 


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p id="hoge"></p>

    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

JavaScrit(main.js)は以下の通りです。 


"use strict";

document.getElementById("hoge").innerHTML = "外部スクリプト";

タグの中に記述する方法

HTMLタグの中に記入する場合、aタグのhref属性を使ったり、イベントを用います。

aタグのhref属性を用いる場合は、JavaScriptであることを示すために「JavaScript:」を付けます。

ただし、ES6くらいからはタグ内に記述することは推奨されていません。 


<a href="JavaScript:ソースファイル名">Click!</a><br>

<input type="button" value="Click!" onclick="ソースファイル名">

scriptタグについて

scriptタグの位置について

CSSの場合は特殊な設定を入れない限りhead要素の中に記述する、という文法ルールがあります。

しかし、script要素はHTMLファイルの中の任意の場所に記述できます。

記述する場所は大きく分けて、「head要素の中」、「body要素の中」、「bodyタグの閉じタグの直前」の3つです。


scriptタグはbodyの最下部に記述するべき？

2000年代前半の、少数のスクリプトファイルで処理が完結していた牧歌的な時代においては、scriptタグをヘッダー部分に書くことが多かったと思います。

しかし、JavaScriptが複雑化した現在、ヘッダー部分に書くとスクリプトファイルを完全に読み込むまでbody内の読み込みは行なわれず、ページ表示に時間がかかってしまいます。

最近は、ページの読み込み速度が重視されるようになったため、 JavaScriptはbodyの一番下</body>の直前に記述することが多くなりました。


ただし、スクロールをしないとコンテンツが出現しないようなWEBサイトの場合には、headで読み込むようにするべきです。

JavaScriptをページ最後で読み込むようにすると、JavaScriptの読み込みが終わるまで、コンテンツが表示できなくなってしまうことがあります。

つまるところ、明確な仕様が策定されていないので、ケースバイケースで設定していきます。


複数スクリプトの読み込み

HTMLは、出現順序通りに（ファイルの先頭から）順次処理されます。

複数のscriptタグを記述した場合、HTML上での出現順序通りに順次処理されます。

以下は必ず「first.js→second.js」で処理が行われます。 


<script src="first.js"></script>
<script src="second.js"></script>

ただし、特定のスクリプトのロードに時間がかかってしまった場合、そのスクリプトのロード・実行が完了するまでは、次のスクリプトは実行されません。

描写遅延を起こさないように注意が必要です。


関連ページ