SNSをチェック

JavaScriptの基礎構文：完全ガイド01

SHARE

1. JavaScriptとは？

JavaScriptは、動的なウェブページを作成するためのプログラミング言語です。HTMLやCSSとともに、ウェブ開発の三大要素の一つとされ、ユーザーとのインタラクションやデータ処理を行うために使われます。

JavaScriptはクライアントサイドで動作することが多く、ブラウザ上で直接実行されます。また、Node.jsを使用することでサーバーサイドでも利用可能です。

2. 変数の宣言とデータ型

変数の宣言方法

JavaScriptでは、変数を使用してデータを保持します。変数の宣言には、var、let、constという3つのキーワードが使われます。

  • var: 変数を宣言するための古い方法で、関数スコープを持ちます。
  • let: ブロックスコープを持つ変数を宣言するための方法で、varよりも安全に使用できます。
  • const: 一度値を代入すると再代入できない変数を宣言するための方法です。
var name = "Alice";
let age = 30;
const isStudent = true;

上記の例では、nameという文字列型の変数、ageという数値型の変数、isStudentというブーリアン型の変数が宣言されています。

主なデータ型

JavaScriptには、以下のような主なデータ型があります。

  • 文字列（String）: テキストデータを保持します。例: "Hello, world!"
  • 数値（Number）: 整数や浮動小数点数を保持します。例: 42, 3.14
  • ブーリアン（Boolean）: trueまたはfalseのいずれかを表します。
  • オブジェクト（Object）: 複雑なデータ構造を保持するための型です。配列や関数もオブジェクトの一種です。
  • 未定義（Undefined）: 変数が宣言されたが値が割り当てられていない状態を示します。
  • ヌル（Null）: 意図的に値がないことを示すための特殊な値です。
let message = "Hello, world!"; // 文字列
let number = 42; // 数値
let isOpen = false; // ブーリアン
let user = { name: "Bob", age: 25 }; // オブジェクト
let items = [1, 2, 3]; // 配列
let func = function() { return "Hello!"; }; // 関数

変数のスコープ

スコープとは、変数が有効な範囲のことです。varで宣言された変数は関数スコープを持ち、letとconstで宣言された変数はブロックスコープを持ちます。

function example() {
  var x = 10;
  if (true) {
    let y = 20;
    const z = 30;
    console.log(x); // 10
    console.log(y); // 20
    console.log(z); // 30
  }
  console.log(x); // 10
  console.log(y); // エラー: y is not defined
  console.log(z); // エラー: z is not defined
}

上記の例では、yとzはブロック内でのみ有効です。

3. 演算子と式

算術演算子

JavaScriptには、基本的な算術演算子が用意されています。

  • +: 加算
  • -: 減算
  • *: 乗算
  • /: 除算
  • %: 剰余（余り）
  • ++: インクリメント（1増加）
  • --: デクリメント（1減少）
let a = 10;
let b = 5;

console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2
console.log(a % b); // 0

a++;
console.log(a); // 11

b--;
console.log(b); // 4

比較演算子

比較演算子は、二つの値を比較してブーリアン値を返します。

  • ==: 等価（型変換を行う）
  • ===: 厳密等価（型変換を行わない）
  • !=: 不等価（型変換を行う）
  • !==: 厳密不等価（型変換を行わない）
  • >: 大なり
  • <: 小なり
  • >=: 大なりイコール
  • <=: 小なりイコール
let x = 10;
let y = "10";

console.log(x == y); // true
console.log(x === y); // false
console.log(x != y); // false
console.log(x !== y); // true
console.log(x > 5); // true
console.log(x <= 10); // true

論理演算子

論理演算子は、複数の条件を組み合わせて評価します。

  • &&: 論理積（AND）
  • ||: 論理和（OR）
  • !: 否定（NOT）
let a = true;
let b = false;

console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false
console.log(!b); // true

4. 条件分岐

if文とelse文

if文は、条件が真の場合に特定のコードブロックを実行するために使用されます。else文は、条件が偽の場合に実行されるコードブロックを指定します。

let age = 18;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

また、else ifを使用して複数の条件を評価することもできます。

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 {
  console.log("Grade F");
}

switch文

switch文は、複数の条件を評価するための別の方法です。caseラベルを使って各条件を指定し、条件に一致する場合のコードブロックを実行します。

let color = "red";

switch (color) {
  case "red":
    console.log("Color is red");
    break;
  case "blue":
    console.log("Color is blue");
    break;
  default:
    console.log("Color is unknown");
}

break文は、switch文の処理を終了するために使われます。

5. ループ処理

forループ

forループは、特定の回数だけコードを繰り返し実行するために使用されます。ループの開始条件、終了条件、反復処理を指定できます。

for (let i = 0; i < 5; i++) {
  console.log("Iteration:", i);
}

whileループとdo...whileループ

whileループは、条件が真の間、コードを繰り返し実行します。

let count = 0;

while (count < 5) {
  console.log("Count:", count);
  count++;
}

do...whileループは、少なくとも一度はコードが実行され、その後条件が評価されます。

let num = 0;

do {
  console.log("Number:", num);
  num++;
} while (num < 3);

6. 関数

関数の定義と呼び出し

関数は、一連のコードブロックを定義し、再利用するための方法です。functionキーワードを使用して定義します。

function greet(name) {
  console.log("Hello, " + name + "!");
}

greet("Alice"); // "Hello, Alice!"
greet("Bob"); // "Hello, Bob!"

関数式とアロー関数

関数は、式としても定義できます。また、アロー関数を使用すると、より簡潔に関数を定義できます。

// 関数式
let add = function(a, b) {
  return a + b;
};
console.log(add(2, 3)); // 5

// アロー関数
let multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 6

関数のスコープとクロージャ

関数内で宣言された変数は、その関数内でのみ有効です。また、関数が定義されたスコープを記憶しているクロージャを作成することができます。

function outer() {
  let outerVar = "I'm outside!";

  function inner() {
    let innerVar = "I'm inside!";
    console.log(outerVar); // "I'm outside!"
    console.log(innerVar); // "I'm inside!"
  }

  inner();
  console.log(innerVar); // エラー: innerVar is not defined
}

outer();

7. オブジェクトと配列

オブジェクトの基本

オブジェクトは、キーと値のペアを持つデータ構造です。複数のプロパティやメソッドを持つことができます。

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

console.log(person.name); // "Alice"
console.log(person.age); // 30
person.greet(); // "Hello, I'm Alice"

配列の基本

配列は、複数の値を順序付けて格納するデータ構造です。インデックスを使用して要素にアクセスします。

let fruits = ["apple", "banana", "cherry"];

console.log(fruits[0]); // "apple"
console.log(fruits[2]); // "cherry"

fruits.push("date");
console.log(fruits); // ["apple", "banana", "cherry", "date"]

fruits.pop();
console.log(fruits); // ["apple", "banana", "cherry"]

8. まとめ

JavaScriptの基礎構文を理解することは、ウェブ開発の第一歩です。このガイドでは、変数、データ型、条件分岐、ループ、関数、オブジェクト、配列といった基本的な要素について詳しく解説しました。これらの知識をもとに、さらに高度なJavaScriptの機能や技術を学び、実際のプロジェクトで応用していくことが重要です。

JavaScriptは非常に柔軟で強力な言語であり、ウェブ開発における可能性は無限です。基礎をしっかりと押さえた上で、継続的に学びを深めていくことで、より豊かな開発スキルを身に付けてください。

JavaScript配列の基礎と応用：完全ガイド02　※ここで必ず理解してください※

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

JavaScript配列の基礎と応用：完全ガイド02　※ここで…

次の記事

2024年楽天スーパーセール事前準備：最大限の恩恵を受ける