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にはいくつかの基本的なデータ型があります。
- プリミティブ型
number
: 数値を表すデータ型。string
: 文字列を表すデータ型。boolean
: 真偽値を表すデータ型。true
またはfalse
。undefined
: 値が未定義の変数。null
: 意図的に空の値。symbol
: 一意な識別子。bigint
: 任意の精度の整数。
- オブジェクト型
- オブジェクトはプロパティとメソッドの集合。
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の機能を学んでいきましょう。