コード構造

最初に学ぶのは、コードの構成要素です。

ステートメント

ステートメントは、アクションを実行する構文構造とコマンドです。

すでにステートメントalert('Hello, world!')を見てきました。これは「Hello, world!」というメッセージを表示します。

コードには必要なだけステートメントを含めることができます。ステートメントはセミコロンで区切ることができます。

たとえば、ここでは「Hello World」を2つのアラートに分割しています

alert('Hello'); alert('World');

通常、ステートメントはコードを読みやすくするために別々の行に記述されます

alert('Hello');
alert('World');

セミコロン

ほとんどの場合、改行がある場合はセミコロンを省略できます。

これも機能します

alert('Hello')
alert('World')

ここで、JavaScriptは改行を「暗黙の」セミコロンとして解釈します。これは自動セミコロン挿入と呼ばれます。

ほとんどの場合、改行はセミコロンを意味します。しかし、「ほとんどの場合」は「常に」を意味するわけではありません！

改行がセミコロンを意味しない場合があります。例えば

alert(3 +
1
+ 2);

コードは6を出力します。なぜなら、JavaScriptはここではセミコロンを挿入しないからです。行がプラス"+"で終わる場合、それは「不完全な式」であるため、そこにセミコロンを置くのは正しくないことは直感的に明らかです。そしてこの場合、それは意図したとおりに機能します。

しかし、JavaScriptが実際に必要な場所にセミコロンを想定「できない」場合があります。

そのような場合に発生するエラーを見つけて修正するのは非常に困難です。

alert("Hello");

[1, 2].forEach(alert);

alert("Hello")

[1, 2].forEach(alert);

alert("Hello")[1, 2].forEach(alert);

ステートメントが改行で区切られている場合でも、ステートメントの間にセミコロンを配置することをお勧めします。このルールはコミュニティで広く採用されています。もう一度注意しておきましょう。ほとんどの場合、セミコロンを省略することは*可能です*。しかし、特に初心者にとっては、それらを使用する方が安全です。

コメント

時間が経つにつれて、プログラムはますます複雑になります。コードの機能とその理由を説明する*コメント*を追加する必要があります。

コメントはスクリプトの任意の場所に配置できます。エンジンは単にコメントを無視するため、スクリプトの実行には影響しません。

1行コメントは、2つのスラッシュ文字//で始まります。

行の残りはコメントです。行全体を占めることも、ステートメントの後に続くこともできます。

ここが好き

// This comment occupies a line of its own
alert('Hello');

alert('World'); // This comment follows the statement

複数行コメントはスラッシュとアスタリスク/*で始まり、アスタリスクとスラッシュ*/で終わります。

このように

/* An example with two messages.
This is a multiline comment.
*/
alert('Hello');
alert('World');

コメントの内容は無視されるため、/* … */内にコードを配置しても実行されません。

コードの一部を一時的に無効にするのは便利な場合があります

/* Commenting out the code
alert('Hello');
*/
alert('World');

/*
  /* nested comment ?!? */
*/
alert( 'World' );

遠慮なくコードにコメントを付けてください。

コメントはコード全体のフットプリントを増やしますが、それはまったく問題ありません。実稼働サーバーに公開する前にコードを縮小するツールはたくさんあります。コメントは削除されるため、動作中のスクリプトには表示されません。したがって、コメントは本番環境に悪影響を及ぼしません。

チュートリアルの後半には、より良いコメントの書き方も説明するコード品質の章があります。