JavaScriptを学びたての人・久々にJavaScriptを触る人向けに、JavaScriptの構文ルールをまとめました。
イメージが沸くように簡単なサンプルコードを用いて解説します。
- JavaScriptでは：大文字と小文字が明確に区別される
- JavaScriptでは：空白（ブランク）と改行は無視される
- JavaScriptでは：文の区切り（終わり）には「；（セミコロン）」
- JavaScriptでは：「//」or「/* */」でコメントアウトされる
- JavaScriptでは：予約語と同じ命名は不可
１つ１つ丁寧に理解していけば、実はそんなに難しいことではありません。早速解説を始めます。
【前提】文と式とブロック
基本構文ルールの解説に移る前に、JavaScriptの基本思想を補足しておきます。
JavaScriptは、「文」と「式」と「ブロック」から成り立ちます。
JavaScriptの「文」とは？
「文」はJavaScriptの処理の単位です。逆に言えば、処理を実行する1ステップが１つの「文」になります。
人間に例えれば「歩く」とか、走る」とかですね。JavaScriptでは、この最小の処理単位を「文」と呼びます。（勉強するにつれて、その辺の内容は理解できるようになるので今は「へぇ～」と理解いただければOKです。）JavaScriptでは、この最小単位「文」が集まって複雑な処理を行うことができます。
分解できる最小の単位は「文」であると覚えておきましょう。
後述するように文は、最後に「；（セミコロン）」を付けて区別します。
JavaScriptの「式」とは？
式は「1+1」や「10*10」などのことです。
文の一部（例えば変数に入れる値など）に含まれます。
JavaScriptの「ブロック」とは？
ブロックは複数の「文」を１まとめにしたものです。
「{ }」で囲まれた範囲がブロックとなります。
{
var x = 1;
var y = 1;
var z = x + y;
console.log(z);
}以上の「文」と「式」と「ブロック」については、JavaScriptを学んでいく上で説明に使われていく用語なのでここでしっかりと理解しておきましょう。
①大文字と小文字が明確に区別される
JavaScriptでは、大文字と小文字が明確に区別されます。
var test; //"t"が小文字 var TesT; //"T"が大文字
したがって、上記２つの変数は全く異なるものとして扱われます。多くのプログラミング言語では、大文字・小文字は区別されるため、JavaScriptもそれと同様であると理解しておけば問題ありません。
②空白（ブランク）と改行は無視される
JavaScriptでは、ブランクや改行は基本的に無視されます。コードの見やすさに応じて、自由に改行したりインデントをそろえたりしてOKです。
以下２つのコードは全く同じ動きをします。
function repeatText(s,num) {
var t,n;
t = "";
for (n=0;n<num;n++) {
t += s;
}
return t;
}function repeatText(s,num) {var t,n; t = "";
for (n=0;n<num;n++) {t += s;}
return t;}③文の終わりには「；（セミコロン）」
文の終わりには、「;」セミコロンを記述します。
セミコロンを記述していれば、１行の中に複数の文を入れてもOKです。（が、見づらいのであまりおすすめはしません。）
var test0;
var test1,
test2;
var test3; var test4;補足ですが、セミコロンを打たなくても問題なくScriptが実行できる場合があります。
これは、JavaScriptに「文の終わりを自動的に判断する機能」が備わっているためです。ただし、この自動で判断する機能が正常に動かないこともよくあるため、基本的にはセミコロンを打つようにしましょう。
④「//」or「/* */」でコメントアウトされる
JavaScriptのコメントアウトは「//」or「/* */」を使います。
// 1行のコメント /* 複数行の コメント */
※コメントアウトとは、指定した行をコメント（つまり、コード上意味のないもの）にするということです。
//1行のコメントはスラッシュを２つ付けます
/* こんな感じにしてもコメントアウトされます */
function repeatText(s,num) {
var t,n; //スラッシュを２つつけると、この行の//以降はコメントアウトされます
t = "";
for (n=0;n<num;n++) {
t += s;
}
return t; //文の意味や処理の内容を説明する場合に用います。
}/*
全てコメントアウトされているので、以下のコードは全く動きません。
function repeatText(s,num) {
var t,n;
t = "";
for (n=0;n<num;n++) {
t += s;
}
return t;
}
*//*
/* コメントをネストさせる */
*/コメントのネストはNGです。ネストさせた場合、構文エラーとなります。
コメントアウトについては、可読性の向上を目的とする場合が多いですが、JavaScriptではデバッグをする際にも利用することが可能です。
⑤予約語と同じ命名は不可
ごく当たり前のことですが、予約語と同じ名前の関数や変数をつけることはできません。
たまに、予約語と被らせてしまう人がいるので、念のための解説です。予約語とは、JavaScriptにおいて既に何らかの意味が与えられている単語のことです。
したがって、例えば「var」という変数名は宣言できません。（varは、変数を宣言する際の命令です。）
JavaScriptを体系的に学びたい方は
プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。
各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。
