JavaScript/字句構造

大文字小文字の区別

JavaScriptは大文字と小文字を区別します。つまり、Hello()はHELLO()やhello()、さらにはhEllo()とは同じではありません。

ホワイトスペース

ホワイトスペースとは、余分なインデント、改行、スペースのことです。JavaScriptでは無視されますが、コードを読みやすくするために使われます。

以下は、ホワイトスペースがほとんどないJavaScriptです。

function filterEmailKeys(event){
event||=window.event;
const charCode=event.charCode||event.keyCode;
const char=String.fromCharCode(charCode);
if(/[a-zA-Z0-9_\-\.@]/.exec(char))
return true;
return false;
}

以下は、同じJavaScriptに典型的な量のホワイトスペースを加えたものです。

function filterEmailKeys(event){
  event ||= window.event;
  const charCode = event.charCode || event.keyCode;
  const char = String.fromCharCode(charCode);
  if (/[a-zA-Z0-9_\-\.@]/.exec(char))
    return true;
  return false;
}

以下は、同じJavaScriptを空白を多くして表示したものです。

function filterEmailKeys (event) {

  event ||= window.event;
  const charCode = event.charCode || event.keyCode;
  const char = String.fromCharCode(charCode);

  if ((/[a-zA-Z0-9_\-\.@]/).exec(char)) {

    return true;

  }

  return false;

}

コメント

コメントを使うと、他の人がコードを理解しやすいようにコードにメモを残すことができます。また、パーサーからは隠したいが削除したくないコードをコメントアウトすることもできます。

単一行コメント

ダブルスラッシュ、//は、同じ行にある以下のテキストをすべて、JavaScriptインタープリターによって処理されないコメントに変えます。

// ウェルカムメッセージを表示します
alert("Hello, World!")

複数行のコメント

複数行のコメントは、スラッシュ・アスタリスク、/*で始まり、逆のアスタリスク・スラッシュ、*/で終わります。

ここでは、さまざまなタイプのコメント技術の使い方の例を示します。

/* これは、複数行のコメント
複数行のコメントテキストを含む
コメントのテキストが複数行含まれています。*/
let a = 1;
/* さらなるテストを行うためにコメントアウトされています
a = a + 2;
a = a / (a - 3); // ここがおかしい？
*/
alert('a: ' + a);

JSDoc

詳細は「JSDoc」を参照

JSDocは、JavaScriptのコード内にドキュメンテーションコメントを記述するためのツールです。JSDocを使用することで、JavaScriptの関数やクラス、メソッドなどのドキュメンテーションを自動化し、ドキュメント生成ツールなどで出力することができます。

JSDocは、以下のような形式でコメントを記述します。

/**
 * ここにコメントを記述します。
 */

また、関数やメソッドの引数や戻り値の型を指定することもできます。

/**
 * @param {string} name - 名前
 * @param {number} age - 年齢
 * @return {string} - メッセージ
 */
function sayHello(name, age) {
  return `こんにちは、${name}さん。あなたは${age}歳ですね。`;
}

このように、JSDocを使用することで、コード内に自己完結的なドキュメンテーションを記述することができます。また、JSDocに対応したドキュメント生成ツールを使用することで、簡単に読みやすいドキュメントを生成することができます。

以下は、クラス構文を使わずに複素数クラスを作成する例です。JSDocを使用して、コードの意味を説明します。

/**
 * 複素数クラス
 * @param {number} real 実部
 * @param {number} imag 虚部
 */
function Complex(real, imag) {
  this.real = real;
  this.imag = imag;
}

/**
 * 複素数の加算
 * @param {Complex} other 加算する複素数
 * @returns {Complex} 加算結果の複素数
 */
Complex.prototype.add = function(other) {
  return new Complex(this.real + other.real, this.imag + other.imag);
};

/**
 * 複素数の減算
 * @param {Complex} other 減算する複素数
 * @returns {Complex} 減算結果の複素数
 */
Complex.prototype.sub = function(other) {
  return new Complex(this.real - other.real, this.imag - other.imag);
};

/**
 * 複素数の積
 * @param {Complex} other 乗算する複素数
 * @returns {Complex} 乗算結果の複素数
 */
Complex.prototype.mul = function(other) {
  return new Complex(this.real * other.real - this.imag * other.imag, this.real * other.imag + this.imag * other.real);
};

/**
 * 複素数の絶対値
 * @returns {number} 複素数の絶対値
 */
Complex.prototype.abs = function() {
  return Math.hypot(this.real, this.imag);
};

このコードでは、Complexという関数を定義しています。この関数は、realとimagという2つの引数を受け取り、それらをプロパティとして持つオブジェクトを返します。また、Complexのプロトタイプに、add、sub、mul、absといったメソッドを定義しています。

それぞれのメソッドには、JSDocで説明を追加しています。例えば、addメソッドには、引数としてComplex型のオブジェクトを受け取り、戻り値としてもComplex型のオブジェクトを返すということを示す@paramと@returnsが含まれています。

このようにJSDocを使用することで、コードの意味を明確にすることができます。

セミコロン

多くのコンピュータ言語では、各コード文の最後にセミコロンが必要です。JavaScriptではセミコロンの使用は任意で、改行することで文の終わりを示します。これはセミコロンの自動挿入と呼ばれるもので、そのルールはかなり複雑です。 セミコロンを省きパーサーが自動的にセミコロンを挿入するようにすると複雑な問題が生じます。

a = b + c
(d + e).print()

上記のコードは、2つのステートメントとして解釈されません。2行目に括弧があるため、JavaScriptは上記を以下のように解釈します。

a = b + c(d + e).print();

と解釈するのではなく、次のように解釈することを意図していたのかもしれません。

a = b + c;
(d + e).print();

セミコロンは任意ですが、誤解を招かないためにも文の最後にはセミコロンを付けるのが望ましいです。

リテラル

リテラルとは、ハードコードされた値のことです。リテラルはスクリプトの中で特定の値を表現する手段となります。例えば代入の右辺には次のようなものがあります。

var myLiteral = "a fixed value";

リテラルにはいくつかの種類があります。最も一般的なのは文字列リテラルですが、他にも整数や浮動小数点のリテラル、長整数のリテラル、配列やブーリアンのリテラル、オブジェクトリテラルなどがあります。

オブジェクトリテラルの例

const myObject = { name: "value", anotherName: "anotherValue" };

これらの型の詳細については、変数で説明しています。

識別子

識別子とは、変数、配列、関数などのデータの一部を表す名前です。ルールがあります。

• 識別子には、アルファベット、ドルマーク、アンダースコア、数字が使用できます。
• 最初の文字は数字ではありません。

有効な識別子の例です。

• u
• $hello
• _Hello
• hello90

1A2B3Cは数字で始まっているため、無効な識別子です。

変数名の付け方

変数の名前をつけるにあたって、いくつかのルールがあります。

• アルファベットの大文字，小文字，アンダースコア，ドルマークが使用できます。
  • Unicode文字も使用できます。
• 最初の文字の後に数字が使えます。
• 変数名は大文字と小文字を区別します。大文字と小文字が異なる場合は変数名も異なります。
• 変数に予約語は使えません。