1
/
5

JavaScriptの基本要素☺️

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

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

変数

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

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

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

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

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

データ型

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

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

  • 文字列(String): テキストデータを表現します。
  • 数値(Number): 整数や浮動小数点数を表現します。
  • 真偽値(Boolean): trueまたはfalseの論理値を表現します。
  • 配列(Array): 複数の値を格納するリストです。
  • オブジェクト(Object): キーと値のペアを持つデータ構造です。
  • 関数(Function): 再利用可能なコードブロックを表現します。
  • その他: nullundefinedSymbolなどがあります。
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] と表示される

この例では、processArray 関数が配列とコールバック関数を受け取り、配列内の各要素に対してコールバック関数を実行します。


これらは基本的な関数の概念です。

JavaScriptプログラムを書く上で非常に重要ですので、覚えておきましょう。

株式会社アルシエ's job postings
2 Likes
2 Likes

Weekly ranking

Show other rankings
Invitation from 株式会社アルシエ
If this story triggered your interest, have a chat with the team?