@ JavaScript

JavaScript の基本的な記述ルール

文字コード

JavaScript プログラムは、Unicode 文字コードを使って記述します。16 ビットの Unicode 文字コードは地球上で使われているほぼすべての言語を表現できます。これは国際化に重要な機能です。特に英語圏以外のプログラマーにとっては重要です。

大文字小文字

JavaScript は、大文字と小文字を区別します。キーワード、変数名、関数名、識別子で大文字と小文字は厳密に区別されます。例えば、alert() メソッドであれば、必ず小文字で記述しなければなりません。Alert() や ALERT() は無効になります。

alert_01.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
alert("Hello World!");
</script>
</head>

<body>
</body>

</html>

demo

alert_02.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script>
Alert("Hello World!");
</script>
</head>

<body>
</body>

</html>

demo

変数名 online、Online、OnLine、ONLINE はそれぞれ異なる変数として扱われます。

JavaScript のオブジェクトやプロパティには、HTML のタグや属性と同じ名前が使われているものがたくさんあります。HTML では、これらのタグや属性で大文字と小文字は区別されません。しかし、JavaScrtip では一般的にこれらはすべて小文字で記述します。例えば HTML ではイベントハンドラ ONCLICK を onClick と記述することがありますが、JavaScript コードで記述する場合は、onclick と記述しなくてはなりません。

onclick_01.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>sample</title>
<style>
body {
  font-size: 50px;
  line-height: 1.5;
  margin: 100px auto;
  cursor: pointer;
  text-align: center;
}
</style>
</head>

<body>
  <div id="target" onClick=sayHello();>Click Me!</div>
  <script>
  function sayHello(){
    document.getElementById('target').innerHTML = 'Hello!';
  }
  </script>
</body>

</html>

demo

onclick_02.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>sample</title>
<style>
body {
  font-size: 50px;
  line-height: 1.5;
  margin: 100px auto;
  cursor: pointer;
  text-align: center;
}
</style>
</head>

<body>
  <div id="target">Click Me!</div>
  <script>
  function sayHello(){
    document.getElementById('target').innerHTML = 'Hello!';
  }
  document.getElementById('target').onclick=sayHello;
  </script>
</body>

</html>

demo

JavaScript では、プログラムのトークンを区切る空白、タブ、改行コードを無視します。つまり、プログラム中に空白やタブ、改行を自由に挿入できるので、整形やインデントを施しソースコードを読みやすくすることができます。

JavaScript の文は、最後に ;(セミコロン)を入れるのが普通です。このやり方は C や C++、Java と同じです。セミコロンは文と文の区切りを示します。しかし JavaScript の場合は、それぞれの文が別の行にあれば、特にセミコロンを入れる必要はありません。

例えば、以下の例ではセミコロンがなくてもかまいません。

a = 3;
b = 4;

しかし、以下のように同じ行に2つの文を記述する場合は、セミコロンが必要です。

a = 3; b = 4;

セミコロンを省略するのは、良いスタイルとはいえません。セミコロンを入れるようにしましょう。

JavaScript では、任意のトークンの間に改行を入れることができるのですが、JavaScript が自動的にセミコロンを挿入して解釈することがあります。

例えば、以下のように記述したとすると、

return
true;

JavaScript は上記ソースコードを次のように解釈します。

return;
true;

もし、true を返すという意味なら、次のように記述しなければなりません。

return true;

リテラル

JavaScript でプログラムに直接記述するデータ値のことをリテラルといいます。以下にリテラルの例を示します。

12  /* 数値 */
1.2  /* 数値 */
"Hello World"  /* 文字列 */
'Hi'  /* 文字列 */
true  /* 論理値 */
false  /* 論理値 */
/JavaScript/gi  /* 正規表現 */
null  /* オブジェクトがないことを表す */
{x:1, y:2}  /* オブジェクト */
[1,2,3,4]  /* 配列 */

コメント

JavaScript は、// から行末までにあるテキストをコメントとみなし、無視します。/* から */ までの文字もコメントとみなします。コメントは複数行にまたがることはできますが、入れ子にすることはできません。

// これは単一行のコメントです。
/* これもコメントです */  // ここから別のコメントが始まります。
/*
* ここからまた別のコメントが始まります。
* ここも引き続きコメントです。
*/

識別子

識別子というのは名前のことです。JavaScript では、識別子を使って変数や関数を指定します。

識別子に使える文字は、先頭の文字は、Unicode 文字と _(アンダースコア)、$ (ドルマーク)のいづれかでなかればなりません。その後は、Unicode 文字、数字、アンダースコア、ドルマークのいずれかでなければなりません。識別子の先頭に数字を使うことはできません。

識別子の例を以下に示します。

i
my_varables
v13
_dummy
$str

JavaScript で固有の意味を持つキーワードは、識別子として使うことはできません。このようなキーワードを予約語といいます。

予約語 – MDN

JavaScript を記述する場所

JavaScript を記述する場所は、大きく分けて3カ所です。

  • 1. HTML の要素内に直接記述する。
  • 2. script 要素を使って HTML 内に記述する。
  • 3. 外部ファイルに記述して HTML から読み込む。

1. HTML の要素内に直接記述する。

もっとも簡単な方法として、HTML 要素の中に記述する方法があります。

ただし、JavaScript が HTML 内に分散させて記述されることになり、メンテナンス性は低くなります。また、基本的に1行に記述することになりますので、複雑な JavaScript の実行には向きません。

rules_01.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
  <a href="javascript:alert('実行しました。');">Javascript を実行</a>
</body>

</html>

demo

2. script 要素を使って HTML 内に記述する。

この方法では、まとまった JavaScript を見やすく記述できます。

script 要素は body 要素の中にでも記述できます。

rules_02.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
</head>

<body>
<script>
alert('実行しました。');
</script>
</body>

</html>

demo

3. 外部ファイルに記述して HTML から読み込む。

次の例では、alert.js を HTML から読み込んで実行します。

Web サイト全体で同じ JavaScript を共有でき、メンテナンスの効率もよくなります。

rules_03.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<script src="alert.js"></script>
</head>

<body>
</body>

</html>

alert.js

alert('実行しました。');

demo