最初に学習するのは、コードの構成要素です。
ステートメントは、アクションを実行する構文およびコマンドです。
「Hello, world!」というメッセージを表示するステートメント、 alert('Hello, world!')
はすでに見てきました。
コード内には必要なだけステートメントを含めることができます。ステートメントはセミコロンで区切ることができます。
たとえば、ここでは「Hello World」を 2 つのアラートに分割しています。
アラート('こんにちは');アラート('世界');
通常、ステートメントはコードを読みやすくするために別の行に記述されます。
アラート('こんにちは'); アラート('世界');
改行が存在する場合、ほとんどの場合、セミコロンは省略できます。
これも機能します:
アラート('こんにちは') アラート('世界')
ここで、JavaScript は改行を「暗黙の」セミコロンとして解釈します。これは自動セミコロン挿入と呼ばれます。
ほとんどの場合、改行はセミコロンを意味します。しかし、「ほとんどの場合」は「常に」という意味ではありません。
改行がセミコロンを意味しない場合があります。例えば:
アラート(3 + 1 + 2);
JavaScript はここにセミコロンを挿入しないため、コードは6
出力します。行がプラス"+"
で終わっている場合、それは「不完全な式」であるため、セミコロンは正しくないことは直感的に明らかです。そしてこの場合、それは意図したとおりに機能します。
しかし、本当に必要なセミコロンを JavaScript が想定することが「できない」状況があります。
このような場合に発生するエラーは、見つけて修正するのが非常に困難です。
エラーの例
このようなエラーの具体的な例を知りたい場合は、次のコードをチェックしてください。
アラート("こんにちは"); [1, 2].forEach(アラート);
括弧[]
とforEach
の意味についてはまだ考える必要はありません。後で勉強します。ここでは、コードの実行結果を覚えておいてください。 Hello
、次に1
、次に2
表示されます。
次に、 alert
の後のセミコロンを削除しましょう。
アラート("こんにちは") [1, 2].forEach(アラート);
上記のコードとの違いは 1 文字だけです。最初の行の末尾にあるセミコロンがなくなっています。
このコードを実行すると、最初のHello
のみが表示されます (エラーが発生するため、コンソールを開いて表示する必要がある場合があります)。もう数字はありません。
これは、JavaScript が角括弧[...]
の前にセミコロンを想定していないためです。したがって、最後の例のコードは 1 つのステートメントとして扱われます。
エンジンがそれをどのように認識するかは次のとおりです。
alert("Hello")[1, 2].forEach(alert);
奇妙に見えますよね?この場合のそのような合併はまったく間違っています。コードが正しく動作するには、 alert
の後にセミコロンを付ける必要があります。
これは他の状況でも発生する可能性があります。
ステートメントが改行で区切られている場合でも、ステートメントの間にセミコロンを入れることをお勧めします。このルールはコミュニティで広く採用されています。もう一度注意してください – ほとんどの場合、セミコロンを省略することができます。しかし、特に初心者にとっては、それらを使用する方が安全です。
時間が経つにつれて、プログラムはますます複雑になります。コードの動作とその理由を説明するコメントを追加する必要があります。
コメントはスクリプトの任意の場所に挿入できます。エンジンはそれらを無視するだけなので、実行には影響しません。
1 行コメントは 2 つのスラッシュ文字//
で始まります。
行の残りの部分はコメントです。単独の行全体を占めることも、ステートメントの後に続くこともあります。
ここのように:
// このコメントは単独の行を占めています アラート('こんにちは'); アラート('世界'); // このコメントはステートメントの後に続きます
複数行のコメントはスラッシュとアスタリスク/*
で始まり、アスタリスクとスラッシュ*/
で終わります。
このような:
/* 2 つのメッセージを含む例。 これは複数行のコメントです。 */ アラート('こんにちは'); アラート('世界');
コメントの内容は無視されるため、 /* … */
内にコードを記述しても実行されません。
コードの一部を一時的に無効にすると便利な場合があります。
/* コードをコメントアウトします アラート('こんにちは'); */ アラート('世界');
ホットキーを使用してください!
ほとんどのエディタでは、単一行のコメントの場合はCtrl + /ホットキーを押し、複数行のコメントの場合はCtrl + Shift + / – などを押すことでコード行をコメントアウトできます (コードの一部を選択してホットキーを押します)。 Mac の場合は、 Ctrl の代わりにCmd を、 Shift の代わりにOption を試してください。
ネストされたコメントはサポートされていません。
/*...*/
別の/*...*/
内に含めることはできません。
このようなコードはエラーで終了します。
/* /* ネストされたコメント ?!? */ */ アラート( '世界' );
遠慮せずにコードにコメントしてください。
コメントによりコード全体のフットプリントが増加しますが、それはまったく問題ではありません。運用サーバーに公開する前にコードを縮小するツールは数多くあります。コメントは削除されるため、作業中のスクリプトには表示されません。したがって、コメントが制作に悪影響を与えることはまったくありません。
チュートリアルの後半には「コードの品質」の章があり、より良いコメントを書く方法についても説明します。