JavaScript ステートメント

JavaScript ステートメント: 詳細とコード例 - 初心者向けチュートリアル

この包括的なガイドでは、JavaScript ステートメントのタイプ、構文、使用方法について詳しく説明します。豊富なコード例を通して、JavaScript ステートメントを深く理解し、実際のプロジェクトに適用できるよう支援します。

JavaScript ステートメントとは？

JavaScript ステートメントは、スクリプトを構成し、特定のタスクを実行するための命令です。プログラムの流れを制御し、データを操作し、インタラクションを実現するなど、さまざまな役割を担います。

例:

let x = 5; // 変数を宣言し、値を代入する

JavaScript ステートメントの種類

JavaScript ステートメントは、主に以下のタイプに分類されます。

1. 条件分岐ステートメント

ステートメント 説明 構文 コード例
if...else 条件に基づいてコードブロックを実行する 
if (条件) {
  // 条件がtrueの場合に実行されるコード
} else {
  // 条件がfalseの場合に実行されるコード
}

let age = 20;
if (age >= 18) {
  console.log("あなたは成人です");
} else {
  console.log("あなたは未成年です");
}
switch 複数の条件に基づいてコードブロックを実行する 
switch (式) {
  case 値1:
    // 式が値1と等しい場合に実行されるコード
    break;
  case 値2:
    // 式が値2と等しい場合に実行されるコード
    break;
  default:
    // どのcaseにも一致しない場合に実行されるコード
}

let day = new Date().getDay();
switch (day) {
  case 0:
    console.log("日曜日");
    break;
  case 6:
    console.log("土曜日");
    break;
  default:
    console.log("平日");
}

2. 繰り返しステートメント

ステートメント 説明 構文 コード例
for 指定回数だけコードブロックを繰り返す 
for (初期化式; 条件式; 更新式) {
  // 繰り返されるコード
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}
while 条件がtrueの間、コードブロックを繰り返す 
while (条件) {
  // 繰り返されるコード
}

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}
do...while 少なくとも1回はコードブロックを実行し、その後は条件がtrueの間繰り返す 
do {
  // 繰り返されるコード
} while (条件);

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

3. ジャンプステートメント

ステートメント 説明 コード例
break ループやswitch文を途中で終了する 
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // iが5になったらループを終了
  }
  console.log(i);
}
continue ループの次の反復処理に進む 
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue; // 偶数の場合は次の反復処理に進む
  }
  console.log(i);
}
return 関数から値を返す 
function add(a, b) {
  return a + b;
}

let sum = add(2, 3); // sumには5が代入される

4. 宣言ステートメント

ステートメント 説明 コード例
var 変数を宣言する（関数スコープ） 
var x = 10;
let 変数を宣言する（ブロックスコープ） 
let x = 10;
const 定数を宣言する（ブロックスコープ、再代入不可） 
const PI = 3.14159;

5. 式ステートメント

式ステートメントは、式を評価し、その結果を使用します。例えば、代入ステートメントや関数呼び出しなどが該当します。

let x = 5; // 代入ステートメント
console.log("Hello, world!"); // 関数呼び出し

6. その他のステートメント

ステートメント 説明
debugger デバッガーでコードの実行を一時停止する
with オブジェクトのプロパティに簡単にアクセスできるようにする（使用は非推奨）
throw 例外をスローする
try...catch 例外を処理する

JavaScript ステートメントの構文規則

  • ステートメントはセミコロン (;) で終わる。
  • ステートメントブロックは、中括弧 ({}) で囲む。 
  • スペースと改行は、コードの可読性を向上させるために使用できる。 
  • コメントは、コードの説明に使用できる。
  • 単一行コメント: // コメント
  • 複数行コメント: /* コメント */

JavaScript ステートメントのベストプラクティス

  • 読みやすいコードを書く: 意味のある変数名を使用し、コメントを追加する。 
  •  コードを簡潔にする: 冗長なコードを避け、簡潔な構文を使用する。
  • エラーを処理する: try...catch ステートメントを使用して例外をキャッチする。 
  •  厳格モードを使用する: "use strict"; を使用してコードの品質を向上させる。

JavaScript ステートメントの学習リソース

* MDN Web Docs * W3Schools

よくある質問

1. JavaScript ステートメントと式の違いは何ですか？

ステートメントは、スクリプトにアクションを実行するように指示します。式は、値に評価されます。

2. JavaScript で最も一般的なステートメントは何ですか？

最も一般的なステートメントには、if...else、for、while、switch などがあります。

3. JavaScript でステートメントを記述する際の一般的な間違いは何ですか？

一般的な間違いには、セミコロンの省略、中括弧の不適切な使用、意味のない変数名の使用などがあります。