最初の勉強は、コードの基本的な要素に関してです。

文(命令文)

文は、構文構造でアクションを実行するコマンドです。

私たちは既に alert('Hello, world!') という文を見ました。それはメッセージを表示します。

私たちは必要なだけ文をコードに含めることができます。文はセミコロンで区切ることができます。

たとえば、これはメッセージを2つに分けます:

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

通常、それぞれの文は別の行に書かれます – これによりコードの可読性が向上します。

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

セミコロン

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

これも動作します:

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

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

ほとんどのケースで改行はセミコロンを意味します。しかし “ほんどのケース” は “いつも” ではありません!

これは改行はセミコロンを意味しないケースです、例えば:

alert(3 +
1
+ 2);

このコードは 6 を出力します、なぜなら JavaScript はセミコロンを挿入しないからです。もし行の終わりがプラス "+" で終わっている場合、直感的には “不完全な表現” であり、セミコロンが必要ないのは明らかです。このケースでは、それは意図した通りに動作します。

しかしJavaScriptが、本当に必要なときにセミコロンを想定 “し損なう” ケースがあります。

このようなケースで発生するエラーは検出と修正が非常に難しいです。

エラーの例

このようなエラーの具体例に興味があるなら、このコードを確認してみてください:

[1, 2].forEach(alert)

角括弧 []forEach の意味についてはまだ考える必要はありません。それらについては後ほど勉強するので今のところ問題ではありません。ただ結果を覚えておきましょう: “1”, そして “2” が表示されます。

今、コードの前に alert を追加し、セミコロンで終わら “ない” ようにしましょう:

alert("There will be an error")

[1, 2].forEach(alert)

実行すると、最初の alert だけが表示され、エラーが発生するでしょう!

しかし、alert の後にセミコロンをつけた場合はすべてうまく行きます:

alert("All fine now");

[1, 2].forEach(alert)

これで “All fine now” メッセージ、そして 1, 2 が表示されます。

JavaScriptでは角括弧 [...] の前にはセミコロンを想定しません。そのため、セミコロンは自動挿入されないので最初の例のコードは1つの文として扱われます。 エンジンは次のように解釈しています:

alert("There will be an error")[1, 2].forEach(alert)

しかし、本来は1つではなく2つの文であるべきです。今回のケースのようなマージは間違っているのでエラーです。このようなことが起こるシチュエーションは他にもあります。

改行によって文が分割されるとしてもセミコロンを置くことを推奨します。このルールはコミュニティで広く採用されています。改めて留意しましょう – ほとんどの場合、セミコロンは除くことが 可能 です。しかし、特に初心者はセミコロンを使う方が安全です。

コメント

時が経つにつれて、プログラムはどんどん複雑になります。起こることと、なぜを説明するために コメント を追加し始める必要があります。

コメントはスクリプトのどの場所にも書くことができます。エンジンはそれらを無視するので、実行には影響しません。

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

残りの行はコメントです。それは行全体または文に従います。

このようになります:

// この行全体がコメントになります。
alert('Hello');

alert('World'); // このコメントは文の後に続いています。

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

このようになります:

/* 2つのメッセージを含む例。
これは複数行のコメントです。
*/
alert('Hello');
alert('World');

コメントの内容は無視されます、そのため、/* … */ の中にコードをおいても実行されません。

これはコードの一部を一時的に無効にしたいときに便利です:

/* コードのコメントアウト
alert('Hello');
*/
alert('World');
ホットキーを使いましょう!

ほとんどのエディタでは、コードの行は1行コメントとして Ctrl+/ ホットキーによりコメントアウトすることができます。そして Ctrl+Shift+/ で複数行コメントです(コードの一部を選択し、ホットキーを押します)。 Macでは、 Ctrl の代わりに Cmd を試してください。

入れ子のコメントはサポートされていません!

別の /*...*/ の中に /*...*/ はありません。。

このようなコードはエラーになります。

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

コードにコメントするのを躊躇わないでください。

コメントはコード規模を増加させますが、それは全く問題ではありません。プロダクションサーバへリリースする前にコードを minify する多くのツールがあります。それらはコメントを除去するので、実行されるスクリプトには現れません。そのため、コメント書くことによるネガティブな影響は全くありません。

さらにこのチュートリアルでは、より良いコメントの書き方を説明するチャプター コーディングスタイル もあります。

チュートリアルマップ

コメント

コメントをする前に読んでください…
  • 自由に記事への追加や質問を投稿をしたり、それらに回答してください。
  • 数語のコードを挿入するには、<code> タグを使ってください。複数行の場合は <pre> を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。
  • 記事の中で理解できないことがあれば、詳しく説明してください。