文と式

本格的に基本文法について学ぶ前に、JavaScriptというプログラミング言語がどのような要素からできているかを見ていきましょう。

JavaScriptは、文（Statement）と式（Expression）から構成されています。

式

式（Expression）を簡潔に述べると、値を生成し、変数に代入できるものを言います。

42のようなリテラルやfooといった変数、関数呼び出しが式です。また、1 + 1のような式と演算子の組み合わせも式と呼びます。

式の特徴として、式を評価すると結果の値を得ることができます。この結果の値を評価値と呼びます。

評価した結果を変数に代入できるものは式であるという理解で問題ありません。

// 1という式の評価値を表示
console.log(1); // => 1
// 1 + 1という式の評価値を表示
console.log(1 + 1); // => 2
// 式の評価値を変数に代入
const total = 1 + 1;
// 関数式の評価値(関数オブジェクト)を変数に代入
const fn = function() {
    return 1;
};
// fn() という式の評価値を表示
console.log(fn()); // => 1

文

文（Statement）を簡潔に述べると、処理する1ステップが1つの文といえます。 JavaScriptでは、文の末尾にセミコロン(;)を置くことで文と文に区切りを付けます。

ソースコードとして書かれた文を上から処理していくことで、プログラムが実行されます。

処理する文;
処理する文;
処理する文;

たとえば、if文やfor文などが文と呼ばれるものです。次のように、文の処理の一部として式を含むことがあります。

const isTrue = true;
// isTrueという式がif文の中に出てくる
if (isTrue) {
}

一方、if文などは文であり式になることはできません。

式ではないため、if文を変数へ代入できません。そのため、次のようなコードはSyntaxErrorとなります。

// 構文として間違っているため SyntaxError
var forIsNotExpression = if (true) { /* ifは文であるため式にはなれない */ }

式文

一方、式（Expression）は文（Statement）になることができます。文となった式のことを式文と呼び、基本的に文が書ける場所には式を書くことができます。

その際に、式文（Expression statement）は文の一種であるため、セミコロンで文を区切っています。

// 式文であるためセミコロンをつけている
式;

式は文となることができますが、先ほどのif文のように文は式となることができません。

ブロック文

次のような、文を{と}で囲んだ部分をブロックと言います。ブロックには、複数の文を書くことができます。

{
    文;
    文;
}

if文など文の中には、ブロックで終わるものがあります。

文の末尾にはセミコロンを付けるとしていましたが、例外としてブロックで終わる文の末尾には、セミコロンが不要となっています。

// ブロックで終わらない文なので、セミコロンが必要
if (true) console.log(true);
// ブロックで終わる文なので、セミコロンが不要
if (true) {
    console.log(true);
}

function宣言（文）とfunction式

「関数と宣言」の章において、関数を定義する方法を学びました。 functionキーワードから文を開始する関数宣言と、変数へ関数式を代入する方法があります。

関数宣言（文）と関数式は、どちらもfunctionというキーワードを利用しています。

// learn関数を宣言する関数宣言文
function learn() {
}
// 関数式をread変数へ代入
const read = function() {
};

この文と式の違いを見ると、関数宣言文にはセミコロンがなく、関数式にはセミコロンがあります。このような、違いがなぜ生まれるのかは、ここまでの内容を適用することで説明できます。

関数宣言文で定義したlearn関数には、セミコロンがありません。これは、ブロックで終わる文にはセミコロンが不要であるためです。

一方、関数式をread変数へ代入したものには、セミコロンがあります。

「ブロックで終わる関数であるためセミコロンが不要なのでは？」と思うかもしれません。

しかし、この匿名関数は式であり、この処理は変数を宣言する文の一部であることが分かります。つまり、次のように置き換えても同じといえるため、末尾にセミコロンが必要となります。

function fn() {}
// fn(式)の評価値を代入する変数宣言の文
const read = fn;

まとめ

この章では次のことについて学びました。

JavaScriptは文（Statement）と式（Expression）から構成される
文は式になることができない
式は文になることができる（式文）
文の末尾にはセミコロンを付ける
ブロックで終わる文は例外的にセミコロンを付けなくてよい

JavaScriptには、特殊なルールにもとづき、セミコロンがない文も行末に自動でセミコロンが挿入されるという仕組みがあります。しかし、この仕組みは構文を正しく解析できない場合に、セミコロンを足すという挙動を含みます。これにより、意図しない挙動を生むことがあります。そのため、必ず文の末尾にはセミコロンを書くようにします。

エディタやIDEの中にはセミコロンの入力の補助をしてくれるものや、ESLintなどのLintツールを使うことで、セミコロンが必要なのかをチェックできます。

セミコロンが必要か見分けるにはある程度慣れが必要ですが、ツールを使い静的にチェックできます。そのため、ツールなどの支援を受けて経験的に慣れていくこともよい方法といえます。