JavaScriptの基本要素☺️

こんにちは！　株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「JavaScriptの基本要素：変数、データ型、演算子、制御構造、関数」についてお伝えしていきます。

変数

変数はデータを格納するためのコンテナです。

JavaScriptでは、var、let、constの3つのキーワードを使用して変数を宣言できます。

var name = "John";  // 古い宣言方法（あまり使用されなくなりました）
let age = 30;       // ブロックスコープの変数宣言
const pi = 3.14;    // 定数宣言

変数の宣言方法には違いがあり、letとconstはブロックスコープを持ちます。

変数には文字列、数値、真偽値、オブジェクト、関数などさまざまなデータ型の値を格納できます。

データ型

JavaScriptは動的型付け言語であり、変数のデータ型は実行時に決まります。

主要なデータ型には以下があります。

文字列（String）: テキストデータを表現します。
数値（Number）: 整数や浮動小数点数を表現します。
真偽値（Boolean）: trueまたはfalseの論理値を表現します。
配列（Array）: 複数の値を格納するリストです。
オブジェクト（Object）: キーと値のペアを持つデータ構造です。
関数（Function）: 再利用可能なコードブロックを表現します。
その他: null、undefined、Symbolなどがあります。

let name = "Alice";            // 文字列
let age = 25;                  // 数値
let isStudent = true;          // 真偽値
let fruits = ["apple", "banana", "cherry"];  // 配列
let person = {                  // オブジェクト
  name: "Bob",
  age: 30,
};
function greet(name) {          // 関数
  return "Hello, " + name + "!";
}

演算子

演算子は値を操作するための記号やキーワードです。

JavaScriptには算術演算子、比較演算子、論理演算子などさまざまな演算子があります。

let x = 10;
let y = 5;

let sum = x + y;   // 加算
let difference = x - y;  // 減算
let product = x * y;  // 乗算
let quotient = x / y;  // 除算
let remainder = x % y;  // 剰余

let isEqual = x === y;  // 等しい
let isNotEqual = x !== y;  // 等しくない
let isGreater = x > y;  // より大きい
let isLess = x < y;  // より小さい

let andResult = true && false;  // 論理積 (AND)
let orResult = true || false;   // 論理和 (OR)
let notResult = !true;          // 論理否定 (NOT)

制御構造

制御構造はプログラムの実行フローを制御するために使用されます。

条件分岐とループが主な制御構造です。

条件分岐（if文）

条件に応じてコードを実行します。

if (condition) {
  // 条件が真の場合に実行されるコード
} else {
  // 条件が偽の場合に実行されるコード
}

ループ（forループ）

一連のコードを繰り返し実行します。

for (let i = 0; i < 5; i++) {
  // ループ内で実行されるコード
}

`switch`

switch 文は、ある式の値に基づいて異なるコードブロックを実行するために使用されます。

以下は、基本的な構文です。

switch (expression) {
  case value1:
    // value1 と一致する場合に実行されるコード
    break;
  case value2:
    // value2 と一致する場合に実行されるコード
    break;
  // 他のケース...
  default:
    // どのケースにも一致しない場合に実行されるコード
}

expression の値が case ラベルの値と一致する場合、その case ブロック内のコードが実行されます。

一致する case が見つかった後、break 文がない限り、その後の case ブロックも実行されます。

一致する case がない場合、default ブロックが実行されます。

以下は具体的な例です。

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("It's Monday!");
    break;
  case "Tuesday":
    console.log("It's Tuesday!");
    break;
  case "Wednesday":
    console.log("It's Wednesday!");
    break;
  default:
    console.log("It's another day of the week.");
}

この例では、day の値が "Monday" と一致するため、It's Monday! というメッセージが表示されます。

break を使用しない場合、他の case ブロックも実行されます。

関数の基本

JavaScriptの関数は、一連の処理ステートメントをまとめて名前をつけたものです。

関数は繰り返して使う可能性が高く、コードの構造化に役立ちます。

以下は、基本的な関数の宣言方法です。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("Alice"); // "Hello, Alice!" と表示される

この関数 greet は、name というパラメータを受け取り、それを使ってコンソールに表示します。

アロー関数

アロー関数は、ES6以降で導入された新しい関数の書き方です。

短縮された構文で関数を定義できます。

const add = (a, b) => {
  return a + b;
};

console.log(add(5, 3)); // 8 と表示される

アロー関数は通常、無名関数として使用され、コールバック関数や高階関数と組み合わせてよく使用されます。

関数式

関数式は、関数を変数に代入できる特徴的なJavaScriptの機能です。

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 7)); // 28 と表示される

この関数式は、multiply という名前の変数に関数を代入しています。

コールバック関数

JavaScriptでは、関数を引数として受け取ることができるため、コールバック関数をよく使用します。以下は簡単な例です。

function processArray(arr, callback) {
  const result = [];
  for (const item of arr) {
    result.push(callback(item));
  }
  return result;
}

const numbers = [1, 2, 3, 4, 5];
const doubled = processArray(numbers, (num) => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10] と表示される