【JavaScript】プログラムの基本的な流れと書き方

JavaScript

プログラムは、いくつかの基本的な流れを組み合わせて構成されています。JavaScriptにおいても、これらの基本的な流れを理解することで、さまざまな処理を効果的に実装できます。この記事では、JavaScriptの基本的な流れとして、「順次構造」「条件分岐」「繰り返し」について解説します。

基本的な流れ3パータン

順次構造

順次構造は、プログラムが上から下へと順番に命令を実行する基本的な流れです。この構造では、コードがそのままの順番で実行され、特別な制御がない限り、上から下へと処理が進みます。

let x = 5;
let y = 10;
let sum = x + y;
console.log(sum); // 15

条件分岐

条件分岐は、プログラムの流れを分岐させる構造です。ある条件が満たされる場合に特定の処理を行い、満たされない場合には別の処理を行います。

繰り返し

繰り返しは、同じ処理を複数回実行する構造です。一定の条件が満たされるまで、または特定の回数だけ繰り返し処理を行います。

条件分岐

if文

if文は、指定された条件がtrueの場合にのみ、ブロック内のコードを実行します。elseを使うことで、条件がfalseの場合の処理も指定できます。

let score = 85;

if (score >= 90) {
    console.log("すばらしい!");
} else if (score >= 75) {
    console.log("がんばった!");
} else {
    console.log("もっとがんばろう!");
}

条件式

条件式は、if文などで使用する論理式のことです。条件式はtrueまたはfalseのいずれかを返し、その結果に応じてプログラムの流れを制御します。

let a = 10;
let b = 20;

if (a < b) {
    console.log("aはbより小さい");
} else {
    console.log("aはbより大きいまたは等しい");
}

switch case default

switch文は、1つの変数や式の値に基づいて、複数のケースの中から実行するブロックを選択します。defaultを指定することで、どのcaseにも一致しなかった場合の処理を記述できます。

let color = "red";

switch (color) {
    case "red":
        console.log("Color is red");
        break;
    case "blue":
        console.log("Color is blue");
        break;
    default:
        console.log("Color is unknown");
}

三項演算子

三項演算子(条件演算子)は、簡潔に条件分岐を記述できる演算子です。if文のように使いますが、1行で書けるのが特徴です。

let age = 20;
let message = (age >= 18) ? "成人" : "子供";
console.log(message); // "成人"

繰り返し

条件を決めて繰り返す While

whileループは、指定された条件がtrueである限り、繰り返しブロック内のコードを実行します。

let count = 0;

while (count < 5) {
    console.log(count);
    count++;
}

カウンター変数を使用して繰り返す for

forループは、カウンター変数を使用して特定の回数だけ繰り返し処理を行います。

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

繰り返しを中断する、スキップする

break文を使用してループを中断し、continue文を使用して現在の繰り返しをスキップして次の繰り返しに進むことができます。

for (let i = 0; i < 5; i++) {
    if (i === 3) {
        break; // ループを中断
    }
    console.log(i); // 0, 1, 2
}
for (let i = 0; i < 5; i++) {
    if (i === 3) {
        continue; // 3の時はスキップ
    }
    console.log(i); // 0, 1, 2, 4
}

配列の要素数だけ繰り返す

配列のすべての要素に対して繰り返し処理を行うには、forループやforEachメソッドを使用します。

let fruits = ["Apple", "Banana", "Cherry"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

fruits.forEach(function(fruit) {
    console.log(fruit);
});

まとめ

JavaScriptの制御構造を理解することで、プログラムの流れを制御し、より複雑な処理を実装することができます。順次構造、条件分岐、繰り返しの各パターンを適切に組み合わせることで、効率的なプログラムを作成しましょう。

           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

JavaScript
スポンサーリンク
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました