JavaScript構文入門：初心者向けに基本ルールをわかりやすく解説

JavaScriptの書き方を学びたいなら、ここがまさにうってつけの場所です。

すべてのプログラミング言語には、英語と同じように独自のルール（文法）があります。思い出してください。小学校の頃、私たちは文章を正しく組み立てるために文法のルールを学びましたよね。

プログラミング言語も同じです。もし全員が勝手に独自のルールを作ってしまったら、誰ともコミュニケーションが取れなくなります。プログラミング言語がルールに厳格なのは、書かれたコードが正しく実行できるようにするためなのです。

このガイドでは、JavaScriptの「構文（シンタックス）」について解説します。構文とは、JavaScriptでコードをどのように記述するかを定める一連のルールのことです。

なぜ構文が重要なのか？

JavaScriptには、守らなければならない構文ルールがいくつかあります。たとえば、開いた括弧を閉じ忘れるとエラーが返されます。コンピュータはあなたの指示を理解できず、プログラムの続行ができないからです。

ここで重要なのは、人間とコンピュータの違いです。人間は時折発生する誤りを見つけて読み飛ばすことができますが、コンピュータはどんなプログラミング言語のコードでも同じようには対応できません。だからこそ、使用する言語の構文に従ってコードを書くことが大切なのです。

また、構文はコードの可読性も高めてくれます。みんなが同じ構文を使っていれば、他人のプログラムも簡単に解釈できます。英語と同じで、基本のルールさえ押さえれば、読めないコードは一つもなくなるのです。

このガイドでは、次の5つの構文要素に焦点を当てます。

• 空白（ホワイトスペース）
• 変数の命名
• インデント
• コメント
• セミコロン

それでは始めましょう！

空白（ホワイトスペース）

プログラマーの間では、空白の使い方をめぐって議論が絶えない、非常に論争の多いテーマです。しかしその議論はひとまず脇に置いて、JavaScriptの構文として覚えておくべき重要なルールが1つあります。それは、「変数の間や、括弧の前後にはスペースを入れる」ということです。

たとえば、forループを書く場合を見てみましょう。

for (var i = 0; i < 4; i++) {
	console.log(i);
}

このループは、0から4までの範囲の数字をすべてコンソールに出力します。ご覧のとおり、forキーワードと開き括弧の間にはスペースがあり、閉じ括弧と開き波括弧（{）の間にもスペースが入っています。さらに、括弧内の各ステートメントの間にもスペースがあります。

• var i = 0;
• i < 4;

forループの外で変数に値を代入するときも、同じアプローチを使います。

var cookie = "Raspberry Chocolate Chip";

変数の間にスペースを入れることで、コードがぐっと読みやすくなります。

インデント

他の多くのプログラミング言語と違い、JavaScriptは理論上、プログラム全体を1行で書くこともできます。ただし、それではコードを読むのが非常に難しくなるため、おすすめはしません。

if文などの条件分岐やクラスといったコードブロックの中にあるステートメントは、必ずインデント（字下げ）しましょう。インデントとは、コードの行頭に半角スペース2つ・4つ、またはタブを追加することを指します。どの方式が最適かについてはプログラマーの間でも意見が分かれますが、コード全体で一貫性を保てば問題ありません。

インデントされたforループの例です。

for (var i = 0; i < 4; i++) {
	console.log(i);
}

console.log()がタブ1つ分インデントされているのがわかりますね。これは、波括弧の中に含まれているためです。これにより、forループの中身と他のコードを視覚的に区別できます。さらに別のコードブロック、たとえばif文がある場合は、その中身をより深くインデントします。

for (var i = 0; i < 4; i++) {
	if (i === 3) {
		console.log(i);
	}
}

このコードは、iが3と等しい場合にその値を出力し、そうでなければ何もしません。if文はforループの中にあるためタブ1つ分、console.log()はif文の中にあるためタブ2つ分インデントされています。このように、階層構造が一目でわかるのがインデントの利点です。

コメント

コメントとは、開発者が開発者のために書くステートメントのことです。技術的にはJavaScriptによって読み込まれますが、実行されることはありません。

コメントの目的は、開発者が自分のコードを把握しやすくすることです。複雑な関数を実装する際には、各部分が何をするのかメモとしてコメントを残しておくと便利です。また、チームでの共同作業では、コードを書いていない開発者でもプログラムを理解できるようにするために、コメントがよく活用されます。

JavaScriptでは、コメントはダブルスラッシュ（//）に続けて記述します。

// これはJavaScriptにスキップされるコメントです！

ダブルスラッシュ以降の文字は、すべてコメントとして扱われます。複数行にまたがるコメントを書きたい場合は、次の構文を使います。

/* これは
複数行にまたがるコメントです。 */

/* と */ の間にあるテキストは、JavaScriptエンジンによってすべて無視されます。

変数の命名

変数の名前の付け方にはさまざまなスタイルがありますが、最も一般的なのは「アッパーキャメルケース」「ローワーキャメルケース」「スネークケース（アンダースコア区切り）」の3つです。

JavaScriptでは、ほとんどの開発者がローワーキャメルケースを好んで使います。

firstName, surname, isAdmin

JavaScriptで変数を宣言する書き方は次のとおりです。

var firstName = "Tony";

変数の型（この例ではvar）に続けて変数名、イコール記号、そして代入したい値を順に書きます。

変数名の最初の単語は、1単語のみの場合でも必ず小文字で始めます。2番目以降の単語は大文字で始めます（上記の例を参照してください）。

スネークケース（first_name）やアッパーキャメルケース（FirstName）で書くことも可能ですが、JavaScriptの世界ではあまり一般的ではありません。

また、JavaScriptの変数は大文字と小文字が区別されます。つまり、firstNameとfirstnameは同じ文字を含んでいても、まったく別の変数として扱われるので注意が必要です。

さらに、「予約語」と呼ばれる特別なキーワードがあり、これらは変数名として使用できません。予約語はJavaScriptの中で特別な役割を持つ言葉です。たとえば「class」や「for」は言語自体で使われているため、変数名にすることはできません。

予約語の一覧は、Mozilla Developer Network（MDN）で確認できます。

セミコロン

英語では、すべての文はピリオド（句点）で終わります。これは、ある文を読み終えて次の文へ移るタイミングを教えてくれるものです。小学生の頃、「文は息継ぎをする場所」と習ったことを覚えているかもしれません。

コンピュータプログラムは息継ぎをする必要はありませんが、プログラム内でステートメントがどこで区切られているかを知る必要があります。JavaScriptでは、ほとんどのステートメントはセミコロンで終わります。

var cookie = "Chocolate Fudge";

ただし、ブロックステートメントの後ろにセミコロンをつける必要はありません。class、switch、do、if、forなどがこれに該当します。これらのステートメントは、波括弧でコードを囲む形になります。

function addNumbers(one, two) {
	return one + two;
}

このコードでは、returnステートメントがセミコロンで終わっています。関数の中にあるためです。一方、関数自体はセミコロンで終わっていません。

まとめ

JavaScriptには多くのルールがあります。これらのルールは、あなた自身とブラウザの両方がコードを読めるようにするためのものです。特にチームで開発する場合は、JavaScriptの構文ルールを守ることが非常に重要になります。

今回取り上げた主なルールをおさらいしましょう。

• 変数宣言や「for」「if」などのキーワードに続くステートメントは、空白で区切る。
• コードブロック（if、elseなど）内のステートメントはインデントする。
• 変数名はローワーキャメルケースを使い、予約語と同じ名前にしない。
• ブロックステートメント以外のすべてのステートメントは、セミコロンで終える。
• 1行コメントは // を、複数行コメントは /* */ を使う。

これで、あなたもプロの開発者のようにJavaScriptのコーディングを始める準備が整いました！