JavaScript徹底ガイド｜プログラムの基本的な書き方、ルールについて学ぶ

この記事では、JavaScriptのプログラムの書き方の基本を学びましょう。

JavaScriptのプログラムを書く場合、一定のルールがあり、それを守って書く必要があります。プログラムの記述方法を規定するルールの集まりを、プログラミング言語の字句構造といい、この字句構造について解説していきます。

文字コード

JavaScriptのプログラムはUnicode文字を使って記述します。Unicodeは、英数字/記号だけでなく、日本語（ひらがな）/（カタカナ）/（漢字）を含む全世界の文字を含みます。

大文字と小文字

JavaScriptのプログラムでは、英字の大文字と小文字を区別します。
例えば「console」「Console」は異なる文字列として扱われるため、console.logとすべきところをConsole.logとすると、以下のように参照エラーとなります。

Console.log("hoge")
 // → Uncaught ReferenceError: Console is not defined...

トークンと空白文字

トークン

プログラムを構成する最小単位をトークン（字句）と言います。JavaScriptではプログラムを実行する時に、まずプログラムをトークンに分解します（字句解析）。
そしてトークンの並びがJavaScriptの構文規約に照らして正しいものとなっているかの判定を行います（構文解析）。解析の結果、プログラムに問題がなければプログラムを実行します。

例）以下の文をトークンに分けてみましょう。

return n*fact(n-1);

縦棒（｜）でトークンを区切ってみると以下のようになります。

return ｜ n ｜ * ｜ fact ｜ ( ｜ n ｜ – ｜ 1 ｜ ) ｜ ;

空白文字

プログラミング言語では、トークンを空白文字で区切って並べます。
となり合うトークンを空白などを入れずに並べてしまうとトークンを判別できません。例えば「return n」の部分を、「returnn」とすると、「returnn」の部分がトークンと判定されます。すると構文解析により正しいプログラムとは解釈されずにエラーとなります。

空白文字の省略

トークンの間の空白文字がなくても、トークンを判定できる場合があります。このような場合、空白文字を省略できます。

a = 1 + 2 * 3 ; → a=1+2*3;
function fact ( n ) { → function fact(n) {
obj . x → obj.x
[ 1 , 2 , 3 ] → [1,2,3]

このように、=, +, *, /などの演算子の前後の空白文字、(){}[]などの括弧の空白文字、セミコロン（;）カンマ（,）コロン（:）ピリオド（.）の前後の空白文字は省略できます。

ステートメント

ステートメント（文）

トークンだけではプログラムで実行する命令を表現できません。トークンを並べて一つの文（ステートメント）を作り、それによってコンピューターへの命令を表現します。
例えば以下は一つのステートメントです。

Console.log(i + "! = " + fact(i))

『（）の中の値をコンソールに出力する』という命令を表しています。
ステートメントの最後には、必ずセミコロン（;）を記述するようにしましょう。また、特別な場合を除いて、ステートメントの後のセミコロンで改行し、行ごとにステートメントを記述するようにすることでプログラムが見やすくなります。

複合文

いくつかのステートメントを{}波括弧で囲んでまとめたものを、複合文（ブロック文）といいます。

{
  sum = sum + x;
  console.log("sum = " + x);
}

空文

空文はステートメントが何もない文のことをいいます。空文はセミコロンだけで記述されます。

セミコロンの自動挿入

JavaScriptではステートメントを別々の行に記述すると、行末にセミコロンがなくても自動挿入してくれることがあります。例えば、

console.log("hoge")
console.log("hoge hoge")

console.log("hoge");
console.log("hoge hoge");

コメント

プログラムを自分が後で見たとき、もしくは他人が見たときにわかるようにするために記述する注釈となります。
記述してから時間が経過したプログラム、他人が書いたプログラムは理解が困難になります。
そんなときに、プログラムの要所要所に適切なコメントがあれば、記述内容を理解する補助ができます。

JavaScriptでコメントを入れるには以下2つの方法があります。

/* コメント文 */
// コメント文

実際のコードの中にコメントを挿入してみましょう。

/*------------------------------------------
  階乗を求める
 *------------------------------------------*/
// nの階乗を求める関数
function fact(n) {
  if (n <= 1) return n; // 再帰を終了させる
  return n * fact(n - 1); // 再帰呼び出しを行う
}
// iの値を１から9まで変えて、iの階乗をコンソールに出力する
for (var i = 1; i < 10; i++) {
  console.log(i + "! = " + fact(i));
}

コメントは一時的にコードの一部分を無効にするためにも用いることができます。
以下のようにすれば、この部分はプログラムを実行する際に無視されます。

/*
if (n <= 1) return n;
return n * fact(n - 1);
*/

一行だけをコメントアウトする場合は、//を使ったほうが簡単です。

// if (n <= 1) return n;

まとめ

ここではJavaScriptを実際に書くときのルールについてご紹介しました。
まだどういった時に活用するかイメージが湧かないと思いますが、基本がわからないと、この先学習を続けても理解しきれません。
しっかり学んで次のステップに行きましょう。