サイトアイコン WEBデザインMATOME

JavaScriptの構文と基本構造

JavaScriptは、ウェブ開発において不可欠なプログラミング言語であり、
動的なウェブコンテンツを作成するために広く使用されています。
このカリキュラムでは、JavaScriptの基本構造と構文について詳しく解説します。

JavaScriptの基本構造

JavaScriptのコードは、以下の基本構造を持ちます。

文(Statement): プログラムの最小単位。セミコロンで終わることが多い。

ブロック(Block): 複数の文をまとめるための構造。波括弧 {} で囲まれる。

関数(Function): 再利用可能なコードの集まり。function キーワードで定義する。

変数(Variable): データを格納するための容器。var, let, const を使って宣言する。

制御構造(Control Structures): プログラムの流れを制御する構文(例: if, for, while)。

変数と定数

JavaScriptでは、変数を宣言するために var, let, const の3つのキーワードが使用されます。

var: 変数を宣言するための古い方法。関数スコープを持つ。

var x = 10;
console.log(x); // 10

let: ブロックスコープを持つ変数を宣言するための新しい方法。

let y = 20;
if (true) {
  let y = 30;
  console.log(y); // 30
}
console.log(y); // 20

const: 一度値を設定すると変更できない定数を宣言するためのキーワード。

const z = 40;
console.log(z); // 40
// z = 50; // エラー: 再代入はできない

データ型

JavaScriptにはいくつかの基本的なデータ型があります。

let person = {
  name: "Alice",
  age: 30,
  greet: function() {
    console.log("Hello, " + this.name);
  }
};
console.log(person.name); // Alice
person.greet(); // Hello, Alice

演算子

JavaScriptには様々な演算子があります。

算術演算子: +, -, *, /, %

let a = 5;
let b = 2;
console.log(a + b); // 7
console.log(a - b); // 3
console.log(a * b); // 10
console.log(a / b); // 2.5
console.log(a % b); // 1

比較演算子: ==, ===, !=, !==, <, <=, >, >=

console.log(5 == "5"); // true
console.log(5 === "5"); // false
console.log(5 != "5"); // false
console.log(5 !== "5"); // true

論理演算子: &&, ||, !

let c = true;
let d = false;
console.log(c && d); // false
console.log(c || d); // true
console.log(!c); // false

条件文

JavaScriptでは、条件に応じてプログラムの実行を制御するために if, else if, else を使用します。

let score = 85;
if (score >= 90) {
console.log("Grade: A");
} else if (score >= 80) {
console.log("Grade: B");
} else if (score >= 70) {
console.log("Grade: C");
} else if (score >= 60) {
console.log("Grade: D");
} else {
console.log("Grade: F");
}

ループ

ループは、特定の条件が満たされるまでコードを繰り返し実行するために使用されます。

for ループ

for (let i = 0; i < 5; i++) {
  console.log(i);
}
// 0, 1, 2, 3, 4

while ループ

let j = 0;
while (j < 5) {
  console.log(j);
  j++;
}
// 0, 1, 2, 3, 4

do...while ループ:

let k = 0;
do {
  console.log(k);
  k++;
} while (k < 5);
// 0, 1, 2, 3, 4

関数

関数は、特定のタスクを実行するためのコードの塊です。

関数宣言

function greet(name) {
  return "Hello, " + name;
}
console.log(greet("Alice")); // Hello, Alice

関数式

const greet = function(name) {
  return "Hello, " + name;
};
console.log(greet("Bob")); // Hello, Bob

アロー関数

const greet = (name) => "Hello, " + name;
console.log(greet("Charlie")); // Hello, Charlie

配列

配列は、複数の値を一つの変数に格納するためのデータ構造です。

let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Apple
fruits.push("Date");
console.log(fruits); // ["Apple", "Banana", "Cherry", "Date"]
fruits.pop();
console.log(fruits); // ["Apple", "Banana", "Cherry"]

オブジェクト

オブジェクトは、キーと値のペアの集合です。

let car = {
brand: "Toyota",
model: "Corolla",
year: 2020
};
console.log(car.brand); // Toyota
car.year = 2021;
console.log(car.year); // 2021

DOM操作

JavaScriptは、HTML文書の内容を動的に変更するために使用されます。これを「DOM操作」と呼びます。

document.getElementById("myElement").textContent = "Hello, World!";

イベントリスナー

イベントリスナーを使うことで、ユーザーの操作に応じて動作を実行できます。

document.getElementById("myButton").addEventListener("click", function() {
alert("Button clicked!");
});

まとめ

このカリキュラムでは、JavaScriptの基本構造と構文について解説しました。
これらの基礎を理解することで、より複雑なプログラムを作成するための土台が築かれます。
次のステップでは、これらの基礎を応用して、より高度なJavaScriptの機能を学んでいきましょう。

モバイルバージョンを終了