JavaScript基礎(2)~JavaScript 基本構文とデータ型~

1. コンソールでのコード実行
2. 変数と定数
- 変数
3. var, let, constの違い
4. データ型
- 基本型 (Primitive Types)
- オブジェクト型 (Object Types)
5. 基本的な演算子
- 1. 算術演算子
- 2. 比較演算子
  - 3. 論理演算子
  - 演算子を組み合わせた例
まとめ

JavaScriptは、ウェブ開発において最も重要なプログラミング言語の一つであり、フロントエンドやバックエンドで幅広く活用されています。

本カリキュラムでは、JavaScriptの基礎となる「基本構文」と「データ型」に焦点を当て、言語の仕組みを正確に理解するための基礎を学びます。

特に変数の宣言方法やデータ型の扱い方をしっかりと身につけることで、より効率的でエラーの少ないコードを書く力を養います。

1. コンソールでのコード実行

ブラウザの開発者ツール紹介

開発者ツール（DevTools）は、モダンなブラウザ（Google ChromeやFirefoxなど）に標準搭載されている機能で、以下のような用途に役立ちます：

HTMLやCSS、JavaScriptのコードをデバッグする。
ネットワーク通信状況を確認する。
ページのパフォーマンスやエラーを検出する。

今回の焦点は「Console」タブの使い方です。

ここでは、JavaScriptコードを直接入力してその場で実行できるため、プログラミングの学習やテストに非常に便利です。

Chromeでの開発者ツールの開き方

以下の手順でChromeの開発者ツールを開くことができます：

1. キーボードショートカットを使用

Windows/Linux: Ctrl + Shift + I
Mac: Cmd + Option + I

2. 右クリックメニューを使用

Webページの任意の部分を右クリック。
メニューから「検証（Inspect）」を選択。

3. メニューバーから開く

Chromeの右上にあるメニュー（三点アイコン）をクリック。
「その他のツール」 > 「デベロッパーツール」を選択。

4. 開発者ツールのタブ

開発者ツールが開いたら、上部のタブから「Console」を選択します。

「Console」タブでコードを入力

「Console」タブを使うと、以下のことができます：

JavaScriptコードを直接入力して結果を確認。
エラーの詳細を確認。
デバッグ時に変数の値を確認。

例: 簡単なコードを試してみる

「Console」タブ内で次のコードを入力してEnterキーを押します：

console.log("Hello, JavaScript!");

2. 変数と定数

変数

変数は値を保存し、その値をプログラム内で操作するために使われます。

JavaScriptでは、以下の2つのキーワードを使って変数を宣言します。

1. var

古い形式の変数宣言。

• 特性:

関数スコープ:
変数は関数内でのみ有効。それ以外のスコープ（ブロックなど）は無視されます。
再宣言可能:
同じ名前の変数を再び宣言できます（非推奨）。
グローバル汚染のリスクが高い（非推奨理由の一つ）。

• 例:

function testVar() {
  var x = 10;
  if (true) {
    var x = 20; // 同じ変数 x を再宣言
    console.log(x); // 出力: 20
  }
  console.log(x); // 出力: 20
}
testVar();

2. let

• 推奨される変数宣言方法。

• 特性:

ブロックスコープ: 変数は宣言されたブロック内でのみ有効。
再宣言不可: 同じスコープ内で再宣言できません。

• 例:

function testLet() {
  let x = 10;
  if (true) {
    let x = 20; // ブロック内で新しい変数 x を宣言
    console.log(x); // 出力: 20
  }
  console.log(x); // 出力: 10
}
testLet();

3.定数: const

定数は、再代入が許可されない変数です。

不変の値を保持する場合に使用します。

• 特性:

再代入不可:
一度値を設定したら変更できません。
ブロックスコープ:
let と同様に、宣言されたブロック内でのみ有効。

• 注意:
オブジェクトや配列の場合、内容の変更は可能（定数が参照するアドレスは固定されるが、内容は可変）。

• 使用例:

数学的な定数値（例: 円周率）。
一度設定後、変更しない設定値。

• 例:

const PI = 3.14;
console.log(PI); // 出力: 3.14

// 再代入するとエラー
// PI = 3.14159; // エラー: Assignment to constant variable.

var, let, constの使い分け

原則:
const を優先的に使用し、再代入が必要な場合のみ let を使う。
varは非推奨:
古いコードとの互換性が必要な場合を除き、使用しない。

3. var, let, constの違い

スコープの違い

スコープは、変数がどの範囲で有効かを示します。

1. var (関数スコープ)

• 特性:

変数は宣言された関数内で有効です。
ブロック（例: if 文や for 文）を無視してスコープが関数全体に広がります。

• 例:

function exampleVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 出力: 10
}
exampleVar();

2. let と const (ブロックスコープ)

• 特性:

変数は宣言されたブロック（例: {}）内でのみ有効です。

• 例 (let の場合):

function exampleLet() {
  if (true) {
    let x = 10;
    console.log(x); // 出力: 10
  }
  // console.log(x); // エラー: x は未定義
}
exampleLet();

• 例 (const の場合):

function exampleConst() {
  if (true) {
    const y = 20;
    console.log(y); // 出力: 20
  }
  // console.log(y); // エラー: y は未定義
}
exampleConst();

再宣言の可否

再宣言が許可されるかどうかは、コードの意図を誤解なく表現するために重要です。

1. var

再宣言可能:
同じスコープ内で再度変数を宣言できます。

• 例:

var x = 10;
var x = 20; // 問題なし
console.log(x); // 出力: 20

2. let と const

再宣言不可:
同じスコープ内で再度宣言するとエラーが発生します。

• 例 (let の場合):

let y = 10;
// let y = 20; // エラー: Identifier 'y' has already been declared
y = 20; // 再代入は可能
console.log(y); // 出力: 20

• 例 (const の場合):

const z = 30;
// const z = 40; // エラー: Identifier 'z' has already been declared
// z = 40; // エラー: Assignment to constant variable
console.log(z); // 出力: 30

使い分けの指針

JavaScriptでは、以下の使い分けを推奨します：

1. const を優先

変更しない値を保持する場合は、常に const を使います。
不変の意図を明確にし、意図しない変更を防ぐことができます。

• 例:

const TAX_RATE = 0.1; // 税率は固定
const PI = 3.14;      // 円周率も固定

2. let を必要に応じて使用

• 値の再代入が必要な場合のみ let を使います。

特にループでのカウンタや、後で値を更新する変数に有用です。

• 例:

let counter = 0;
counter++;
console.log(counter); // 出力: 1

3. var は非推奨

古いJavaScriptコードとの互換性が必要な場合を除き、使用しないのがベストプラクティスです。
不意のバグを招きやすいため、新しいプロジェクトでは避けましょう。

実例

// const の使用例
const PI = 3.14;
const TAX_RATE = 0.08;

// let の使用例
let total = 100;
total = total + total * TAX_RATE; // 税込み計算
console.log(total); // 出力: 108

// var の例（非推奨）
function demoVar() {
  var x = 10;
  var x = 20; // 再宣言可能だが混乱を招く
  console.log(x); // 出力: 20
}
demoVar();

4. データ型

基本型 (Primitive Types)

基本型は、単一の値を保持する不変のデータ型です。

1. Number (数値型)

整数と浮動小数点数を表現。

• 例:

let age = 25;          // 整数
let temperature = 36.6; // 小数
console.log(age, temperature);

2. String (文字列型)

テキストデータを表現。
ダブルクォート、シングルクォート、テンプレートリテラルを使用可能。

• 例:

let name = "JavaScript";
let message = `Hello, ${name}!`; // テンプレートリテラル
console.log(message);

3. Boolean (真偽値)

true または false の2つの値のみ。
条件判定やフラグに使用。

• 例:

let isStudent = true;
console.log(isStudent);

4. Undefined (未定義)

値が割り当てられていない変数の初期値。

• 例:

let x; // 初期値は undefined
console.log(x);

5. Null (値なし)

明示的に「値がない」ことを表現。

• 例:

let empty = null;
console.log(empty);

6. Symbol (一意の識別子)

一意の値を作成するためのデータ型。

• 例:

let sym = Symbol('unique');
console.log(sym);

7. BigInt (大きな整数)

2^53-1 を超える数値を表現可能。
数値の後ろに n を付けて表記。

• 例:

let bigNum = 123456789012345678901234567890n;
console.log(bigNum);

オブジェクト型 (Object Types)

オブジェクト型は、複雑なデータや振る舞いを保持します。

1. Object

キーと値のペアを保持するプロパティのコレクション。

• 例:

let person = { name: "Alice", age: 25 };
console.log(person.name); // 出力: Alice

2. Array (配列)

順序付きデータのリストを保持。
配列のインデックスは0から始まります。

• 例:

let colors = ["red", "blue", "green"];
console.log(colors[1]); // 出力: blue

3. Function

実行可能なコードのブロック。

• 例:

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice")); // 出力: Hello, Alice!

実例

基本型とオブジェクト型を組み合わせる例:

const student = {
  name: "John",
  age: 20,
  isEnrolled: true,
  courses: ["Math", "Science", "History"],
  greet: function() {
    return `Hello, my name is ${this.name}.`;
  }
};
console.log(student.greet()); // 出力: Hello, my name is John.

5. 基本的な演算子

1. 算術演算子

数値を操作するための基本的な演算子です。

演算子	説明	例	結果
+	加算	10 + 5	15
-	減算	10 - 5	5
*	乗算	10 * 5	50
/	除算	10 / 5	2
%	剰余(あまり)	10 % 3	1

例:

let a = 10;
let b = 5;
console.log(a + b); // 出力: 15
console.log(a % b); // 出力: 0

2. 比較演算子

値同士を比較して、true または false を返します。

演算子	説明	例	結果
==	等しい(型変換あり)	10 == "10"	true
!=	等しくない(型変換あり)	10 != "10"	false
===	厳密に等しい(型変換なし)	10 === "10"	false
!==	厳密に等しくない	10 !== "10"	true
<	小さい	5 < 10	true
>	大きい	10 > 5	true
<=	以上	10 <= 10	true
=>	以下	10 >= 5	true

例:

console.log(10 == "10");  // 出力: true (型を無視して比較)
console.log(10 === "10"); // 出力: false (型も比較)
console.log(10 > 5);      // 出力: true

3. 論理演算子

複数の条件を組み合わせたり、条件を反転させたりする際に使用します。

演算子	説明	例	結果
&&	AND(かつ)	true && false	false
\|\|	OR(または)	true \|\| false	true
!	NOT(反転)	!true	false

例:

let isStudent = true;
let isMember = false;

console.log(isStudent && isMember); // 出力: false (両方が true でないと false)
console.log(isStudent || isMember); // 出力: true (どちらかが true なら true)
console.log(!isStudent);            // 出力: false (反転)

演算子を組み合わせた例

演算子を組み合わせて複雑な条件を作ることができます。

例:

let age = 20;
let hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("You can enter."); // 条件が true の場合、出力
} else {
  console.log("You cannot enter.");
}

まとめ

JavaScriptの基本構文とデータ型を学ぶことで、プログラムの土台となるロジック構築が可能になります。

この知識を活かし、今後のより高度なトピック（例: 関数、非同期処理、オブジェクト指向プログラミングなど）へスムーズに進む準備が整います。

また、変数の適切なスコープ管理や型の理解は、エラーの少ない効率的なコーディングの鍵です。

これから実際の開発でこの知識を活用し、さらに深い理解を目指しましょう！

1. コンソールでのコード実行

ブラウザの開発者ツール紹介

Chromeでの開発者ツールの開き方

「Console」タブでコードを入力

2. 変数と定数

変数

1. var

2. let

3.定数: const

var, let, constの使い分け

3. var, let, constの違い

スコープの違い

1. var (関数スコープ)

2. let と const (ブロックスコープ)

再宣言の可否

1. var

2. let と const

使い分けの指針

1. const を優先

2. let を必要に応じて使用

3. var は非推奨

4. データ型

基本型 (Primitive Types)

1. Number (数値型)

2. String (文字列型)

3. Boolean (真偽値)

4. Undefined (未定義)

5. Null (値なし)

6. Symbol (一意の識別子)

7. BigInt (大きな整数)

オブジェクト型 (Object Types)

1. Object

2. Array (配列)

3. Function

実例

5. 基本的な演算子

1. 算術演算子

2. 比較演算子

3. 論理演算子

演算子を組み合わせた例

まとめ

カテゴリ

blog 関連記事

JavaScript基礎(3)~JavaScriptの制御構文~

Webサイト基礎(3)~CSS入門~

PaizaとAtCoderのプログラミングテスト比較~自分に最適な学習方法を見つけよう~