JavaScriptの記述ルール

JavaScriptにはコードを記述する上での仕様が存在します。
今回はそれらの記述仕様についてまとめたいと思います。

また、変数や関数、クラスといったものには命名するためのルールがあります。
変数、関数、クラスについては今後の記事で解説する予定ですが、まずは命名ルールを先に把握しておきましょう。

JavaScriptコードの記述仕様

この節ではJavaScriptコードを書く上での記述仕様を説明します。
仕様なので、誤った記述をするとコードが正しく動かない原因になります。
以下の仕様をしっかりと覚えておきましょう。

大文字と小文字の区別

JavaScriptでは大文字と小文字は厳密に区別されます。
例えば変数を宣言する命令に「let」というものがありますが、これは全部小文字で記述しなければなりません。
「Let」あるいは「LET」などのように大文字を使用するとエラーになってしまいます。

let a = 1; // これはOK
Let b = 2; // これはエラーになる
LET c = 3; // これもエラーになる

また、変数名や関数名も大文字と小文字の区別で別の変数・関数と判断されます。

// それぞれ別の変数として扱われる
let hensuu = "小文字の変数";
let HENSUU = "大文字の変数";

全角と半角の区別

JavaScriptコードは半角英数字で記述する必要があります（文字列データは除く）。
全角文字はプログラムには利用できませんのでご注意ください。

let val = "半角英数字"; // これはOK
ｌｅｔ　ｖａｌ　＝　”全角文字”；　// これはエラーになる

よくあるエラーとして、プログラムに記述する半角スペースを全角スペースで打ってしまう誤りがあります。
コードを書く際には半角・全角の違いに注意しましょう。

let a = 100; // これはOK
let　b　= 101; // 誤って全角スペースを使ってしまうとエラーになる

改行の位置

JavaScriptでは単語の途中で改行を入れることはできません。
しかし、カッコ「()や{}、[]」、セミコロン「;」、ピリオド「.」、カンマ「,」、コロン「:」の前後であれば改行することができます。

「console.log」というログを出力する命令を例にすると下記のようになります。

// これはエラーになる
cons
ole.log('これはだめな例');

// これはOK
console
.
log(
'これはOKな例'
);

空白文字

JavaScriptではプログラムコード中の半角スペース、タブ、改行は区別されません（文字列データは除く）。
空白を入れてよい位置は、改行のできる位置と同じです。
プログラムを読みやすくするため、下記のように改行と空白を入れることができます。

console.log(
  '読みやすいようにインデントをつける'
);

文と文の区切り

JavaScriptでは一般的に文と文の区切りにセミコロン「;」を使います。

console.log('1つ目の文章');
console.log('2つ目の文章');

しかし、改行して別々の行に記述すればセミコロンを省略してもかまいません。

console.log('1つ目の文章')
console.log('2つ目の文章')

セミコロンで区切る場合は複数行を一行に書くことができます。この場合、文末を明確にするためにセミコロンは省略できません。

console.log('1つ目の文章'); console.log('2つ目の文章');

また、後の記事で解説する「return」「break」「continue」というキーワードを使われた場合は、改行を挟むとそこが文末と判断されて実行されます。
以下の自作関数「test1」と「test2」の実行結果が異なることに注意してください。

function test1() {
  return 1   // 「1」を返却
}

function test2() {
  return　　// ← ここで処理が終わってると判断されるため、「2」は無視される
  2
}

test1() // 実行結果は「1」
test2() // 実行結果はundefined

「return」では意図しない値が返却されないかは注意しましょう。

コメントの書き方

JavaScriptコード中に、コードとしては実行したくないが、コードの説明やメモを記述したいときがあります。
そのような場合、「//」や「/* */」という記号を使うことでただのメモ書きとして解釈させることができます。
そのようなメモ書きのことを「コメント」といいます。

一行コメントを書く場合は文の先頭に「//」をつけます。

// console.log('表示されません')　←　コメント行のため、実行されることはありません

複数行コメントを書きたい場合は文頭に「/*」を、文末に「*/」をつけて囲みます。

/*
囲まれた部分がコメントになります
途中で改行することができます
*/

プログラムのコードを一時的に動かないようにしたい場合に、コメントにすることで実行させないようにすることができます。
これを「コメントアウト」と言いますので、用語を覚えておきましょう。

識別子の命名規則

変数名や関数名など、他のものと区別するための名前を識別子と呼びます。
識別子には命名規則があり、それに従わない場合はエラーが発生します。

以下、識別子の命名規則について整理しましょう。

命名規則

識別子は、以下の命名規則に従う必要があります。

• 予約語は使用できない。
• 一文字目はアルファベット、アンダースコア、ドル記号（a～z、A~Z、_、$）から始めなければならない
• 二文字目以降は数値（0～9）も利用することができる
• 大文字と小文字は区別される

予約語

予約語というのは、JavaScriptであらかじめ用途が決められているキーワードのことです。
識別子として、予約語を利用することはできません。

以下が予約語の一覧になります。

識別子の命名例

以下、識別子の命名例です。

// 予約語を識別子として利用できません
break // NG

// 予約語を含む別の単語であれば、問題ありません
breakWord // OK

// 先頭にアンダースコアを使えます
_hennsuu // OK

// 先頭にドルマークを使えます
$hennsuu // OK

// 先頭に数字を使うことはできません
123hennsuu // NG

// 先頭以外であれば、数字を使うことができます
hennsuu123 // OK

一般的な命名規則

JavaScriptの開発者に広く共有された命名ルールというものがあります。
仕様では無いのでルールを破っても問題はありませんが、他人にも理解しやすいコードを記述することは大事なことです。
それほど難しくないので一緒に覚えておきましょう。

以下の記事についても参照してください。

変数名、関数名にはキャメルケースを使う

変数、または関数の名前にはキャメルケースを利用することが一般的です。
キャメルケースでは単語と単語を結合し、１つ目の単語は小文字で始め、２つ目以降の単語の先頭は大文字にします。

// 変数名の例
let personName = '山田太郎';

// 関数名の例
function executeCommand() {
  return 'exec';
}

クラス名にはパスカルケースを使う

クラスの命名にはパスカルケースを利用することが一般的です。
パスカルケースでは単語と単語を結合し、それぞれの単語の先頭を大文字にします。

// クラス名の例
class ClassExample {}

定数名にはアッパースネークケースを使う

定数名にはアッパースネークケースを利用することが一般的です。
アッパースネークケースでは単語と単語の間にアンダースコア「_」をはさみ、全ての文字を大文字にします。

// 定数名の例
const COUNTRY_NAME = 'Japan';

まとめ

以上、JavaScriptの記述ルールについて説明しました。

次回の記事では、JavaScriptの変数について説明します。