JavaScriptのコードは、Expressionと呼ばれる式とStatementと呼ばれる文の組み合わせで出来ています。このような構造の特徴を知っておくと、JavaScriptの技法を詳しく学んでいく際に理解に繋がりやすくなります。
式（Expression）と文（Statement）
冒頭にも述べたように、JavaScriptのコードは式（Expression）と文（Statement）の組み合わせで出来ていて、それぞれを分解するとさらに細かい要素で構成されています。
式とは、最終的に何らかの値を得るためのコードの集まりのことです。
かんたんに例えると、「5 + 3 = 7」という加算演算子を使用した式があります。
文とは、何らかの処理を行うためのコードの集まりのことです。
例えば、「if(式) {処理}」のようなif文が当てはまります。
次に、式や文がどのように構成されているのかに焦点を当てて見ていきましょう。
詳しい構文の書き方については別の記事で項目ごとに解説するため、ここでは全体的な構造をイメージできるように意識しましょう。
式（Expression）
式を分解すると、「識別子」「リテラル値」「演算子」の3つに分けることができます。
・識別子：変数名や関数名
・リテラル値：数値や文字列
・演算子：+、-、*、/など
評価した値を変数に代入できるものは式になります。
以下はすべて式の例です。
// 5という値を出力
console.log(5); // 5
// 5 + 3の結果の値を出力
console.log(5 + 3); // 8
// 85を変数に代入
const score = 85;
// 'こんにちは'という返り値を関数に代入
const hello = function() {
return 'こんにちは';
};
// helloという関数の評価値を出力
console.log(hello()); //こんにちは
もう少し詳しく見ていきましょう。
変数名と関数名
識別子は、変数や関数、プロパティなどを区別するための文字の並びのことを指します。かんたんに言えば、変数名や関数名ということになります。
// 「name」という変数名。’山田花子'という値を定義
let name = '山田花子';
// 「sayName」という関数名。上記で定義した名前を出力するための関数
function sayName() {
console.log(name);
}
sayName(); // '山田花子'
変数nameは、上記の例の「山田花子」という文字列を入れておく入れ物のことです。
関数sayNameは、上記の例の変数nameに格納された名前を出力するための処理を収納するものです。変数名と似ていますが、関数名の場合は単に入れ物の中身を指定するだけでなく、機能を関数として収納することができます。最終的に、関数名を呼び出すことで、収納しておいた機能が使えるようになります。
リテラル値
リテラル値とは、直接データに格納できる値のことです。数値や文字列が当てはまります。
// 'こんにちは'という文字列を格納
const hello = 'こんにちは';
console.log(hello); // 'こんにちは'
// 80という数値を格納
const score = 80;
console.log(score); // 80
上記では、「こんにちは」という文字列を格納するために、「hello」という変数名を定義しています。また、「80」という数値を「score」という変数名に格納しています。
演算子
演算子とは、演算処理を行うために記号で表したものです。足し算や引き算で扱う「+」「-」が演算子の一種です。
// 加算演算子
console.log(1 + 2); // 3
// 減算演算子
console.log(5 - 2); // 3
// 乗算演算子
console.log(3 * 5); // 15
// 除算演算子
console.log(8 / 4); // 2
// 剰余演算子
console.log(9 % 2); // 1
演算子は多くの種類があるため、ここではすべてを紹介することはできませんが、数学の計算を行うように、プログラミングでも計算を行う際に使われています。
ここまでで式を構成する要素同士の接点が見えてきましたね。
文
ある特定の処理を行うための1工程が1つの文です。文の末尾にはセミコロン;を使用し、それによって文を区切ることができます。
処理を行う文1;
処理を行う文2;
処理を行う文3;
文には、例えばif文、while文、for文などがあります。
以下はすべて文の例です。
if(式) { 処理 }
switch(式) { 処理 }
while(式) { 処理}
for(式) { 処理 }
function name (式) { 処理 }
文の一部として式を用いることも多くあります。
const fullScore = 100;
// fullScoreという式がif文で使われている
if (fullScore) {
// 省略
}
また、式とは異なり、文の場合には変数に代入することはできません。JavaScriptではエラーとなります。
const isHuman = true;
const myName = if (isHuman) { return '山田花子'} // エラーになる
ブロック文
ブロック{}で囲まれた文のことをブロック文と呼びます。
これにより、処理内容に対して複数の文を書くことができるようになります。
if (true) { // ブロック
console.log('文1'); // 文1
console.log('文2'); // 文2
console.log('文3'); // 文3
}
基本的には、文は末尾にセミコロン;を付けますが、ブロックで終わる文の場合には、セミコロンが不要とされています。
// ブロックで終わらない文。セミコロン要
if (true) console.log(true);
// ブロックで終わる文。セミコロン不要
if (true) {
console.log(true);
}
文の書き方は、時と場合、また人によってもさまざまです。
そのため、現段階では文の末尾にはセミコロンを付ける。ブロックで終わる文の場合にはセミコロンは不要。と頭に入れておくだけで問題ありません。
まとめ
今回は、JavaScriptの構造について解説しました。
JavaScriptのコードが式と文によって構成されているように、式と文もそれぞれの要素から成り立っています。分解していくと、それぞれの役割が見えてきます。
// ポイント
* 式は値を生成し、変数に代入できるもの
* 式は「識別子」「リテラル値」「演算子」の要素を持つ
* 文は処理を行う工程で、変数に代入できない
* 分の末尾にはセミコロンを付けるが、ブロックで終わる文はセミコロンを付けなくて良いまずはこれらのポイントを意識して、JavaScriptの技法を学んでいきましょう。
合わせて読みたいJavaScript事前知識シリーズ
第1回：はじめてのJavaScript
第2回：プログラムを実行する準備
第3回：JavaScriptの構造（当記事）
第4回：コードを書く時の基本ルール
第5回：コメントの書き方
コメント