モダンJavaScript入門: JavaScript基本文法

はじめに

JavaScriptはWeb開発において重要な役割を果たしています。この記事では、JavaScriptの基本文法について解説します。

変数とデータ型

JavaScriptでは、変数を宣言して値を格納することができます。また、さまざまなデータ型を扱うことができます。

// 変数の宣言と初期化
let message = "Hello, world!";

// 文字列の連結
let name = "John";
let greeting = "Hello, " + name + "!";

// 数値の計算
let x = 10;
let y = 5;
let sum = x + y;

演算子

JavaScriptでは、さまざまな演算子を使用して計算や比較を行うことができます。

// 算術演算子
let x = 10;
let y = 5;
let sum = x + y;
let difference = x - y;
let product = x * y;
let quotient = x / y;

// 比較演算子
let a = 10;
let b = 5;
let result1 = a > b;
let result2 = a === b;
let result3 = a !== b;

制御構文

制御構文を使用することで、条件に応じてプログラムのフローを制御することができます。

// if文
let x = 10;
if (x > 5) {
  console.log("xは5より大きいです");
} else {
  console.log("xは5以下です");
}

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

// whileループ
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

関数

関数を使用することで、複数の処理をまとめて実行することができます。

// 関数の定義
function greet(name) {
  console.log("Hello, " + name + "!");
}

// 関数の呼び出し
greet("John");

配列とオブジェクト

配列やオブジェクトを使用することで、複数の値をまとめて扱うことができます。

// 配列
let fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // "apple"

// オブジェクト
let person = {
  name: "John",
  age: 30,
  city: "Tokyo"
};
console.log(person.name); // "John"

DOM操作

JavaScriptを使用して、HTMLの要素を操作することができます。

// 要素の取得
let element = document.getElementById("myElement");

// 要素のスタイルの変更
element.style.color = "red";

// イベントリスナーの追加
element.addEventListener("click", function() {
  console.log("クリックされました");
});

AIko Code Symphony