HTML、CSS、JavaScriptJavaScriptの基礎

JavaScriptの基礎:変数とデータ型を解説(let,const)

JavaScript変数とデータ型解説ページのアイキャッチ画像 HTML、CSS、JavaScript

この記事では、プログラミングの基本的な概念である変数とデータ型について学びます。特に、変数と定数の違い、プリミティブ型とオブジェクト型の各データ型の特徴と使用方法を理解できます。これらの知識は、効果的なプログラミングの基礎となります。

はじめに

この記事のコードをコピペして出力してみよう。

VSCodeでコードを書き、Node.jsでコンソール出力する方法がおすすめです。

プログラムの基本

JavaScriptの let count = 10; という文について、各要素の解説します:

JavaScript
let count = 10;
  • let: 変数宣言のキーワード
    • ブロックスコープを持つ変数を宣言する
    • 再宣言は不可能だが、再代入は可能
    • 変数の寿命はそのブロック内に限定される
  • count: 変数名
    • プログラマーが自由に選択できる識別子
    • この場合、何かを数える目的で使用されることが予想される
    • キャメルケースの命名規則に従っている
  • =: 代入演算子
    • 右側の値を左側の変数に代入する
    • 初期化と呼ばれる操作を行う
  • 10: 値(リテラル)
    • この場合、数値型の整数10
    • 変数countの初期値として設定される
  • ;: 文の終わりを示すセミコロン
    • JavaScriptでは省略可能だが、付けることが推奨される

変数

変数と定数

JavaScriptでは、変数と定数を宣言するのにletconstを使用します。

  • let: 再代入可能な変数を宣言
  • const: 再代入不可能な定数を宣言

変数と定数は、JavaScriptプログラムの基本的な構成要素です。適切なスコープで変数を宣言することが重要です。constを使用することで、意図しない変更を防ぐことができます。

JavaScriptの変数は、データを一時的に保存するための「箱」です。動的型付けの言語であるため、変数にどのようなデータ型でも格納できます。

  • プログラム例1:
JavaScript
let pet = "ネコ"; // 変数petに文字列"ネコ"を代入
let count = 10; // 変数countに数値10を代入

console.log(pet); //コンソール出力
console.log(count); //コンソール出力

出力結果:

ネコ
10

文字列と数値を代入してそれぞれコンソール出力しています。

  • プログラム例2:
JavaScript
let age = 25; // 数値型の変数

console.log(age); //コンソール出力

age = "twenty-five"; // 文字列型に変更可能

console.log(age); //コンソール出力

出力結果:

25
twenty-five

数値を代入後、文字列型を代入して変数「age」の内容を変更しています。

  • プログラム例3:
JavaScript
const pi = 3.14; // 定数piに値3.14を代入(変更不可)
let pet = "ネコ";
let message = "Hello, " + pet; // 文字列結合で新しい文字列を作成
//コンソール出力
console.log(pi);
console.log(message);

出力結果:

3.14
Hello, ネコ

「+」を使用して、文字列と変数を結合しています。

  • プログラム例4:
JavaScript
const person = { name: "Alice" };
person.age = 30; // オブジェクトのプロパティは変更可能
//コンソール出力
console.log(person);
console.log(person.name);
console.log(person.age);

出力結果:

{ name: 'Alice', age: 30 }
Alice
30

const person = { name: "Alice" }; でオブジェクトを作成しています。このオブジェクトには name というプロパティがあり、その値は “Alice” です。

次に、person.age = 30; という行でオブジェクトに新しいプロパティを追加しています。これは、オブジェクトのプロパティが変更可能であることを示しています。const で宣言されたオブジェクトであっても、オブジェクト自体の再代入はできませんが、そのプロパティの追加や変更は可能です。

データ型

JavaScriptの主要なデータ型には、数値文字列ブーリアン配列オブジェクトがあります。

  • 数値: 整数や小数点数を表現
  • 文字列: テキストデータを表現
  • ブーリアン: true/falseの論理値
  • 配列: 複数の値をリストとして格納
  • オブジェクト: キーと値のペアを持つ複合データ型

JavaScriptは動的型付け言語であり、変数の型は自動的に決定されます。データ型を理解することで、適切なデータ操作と型変換が可能になります。

プリミティブ型

プリミティブ型:単一の値を持つ最も単純なデータ型です。これ以上分解できません。

文字列 (String)

  • テキストデータを表現します。
JavaScript
let userName = "Alice";
let greeting = "Hello, World!";
let template = `Welcome, ${userName}!`;
//コンソール出力
console.log(userName);
console.log(greeting);
console.log(template);

出力結果:

Alice
Hello, World!
Welcome, Alice!
  • userNamegreetingは通常の文字列です。二重引用符(“)または単一引用符(‘)で囲みます。
  • templateはテンプレートリテラルです。バッククォートで囲み、${}`を使用して変数を埋め込めます。
  • ${userName}は変数展開と呼ばれ、userNameの値が文字列に挿入されます。

数値 (Number)

  • 整数と浮動小数点数を含みます。
JavaScript
let integer = 42;
let float = 3.14;
let scientific = 2.998e8; // 科学的記数法
//コンソール出力
console.log(integer);
console.log(float);
console.log(scientific);

出力結果:

42
3.14
299800000

e8 が指数部で、10の8乗(100,000,000)を意味します。
2.998×10の8乗=299,800,000

BigInt

  • 非常に大きな整数を表現します。9007199254740991n の末尾にある n は、この数値が BigInt 型であることを示すリテラル表記です。
JavaScript
let bigNumber = 9007199254740991n;
//コンソール出力
console.log(bigNumber);

出力結果:

9007199254740991n

論理型 (Boolean)

  • true または false の値を持ちます。
JavaScript
let isActive = true;
let hasPermission = false;
//コンソール出力
console.log(isActive);
console.log(hasPermission);

出力結果:

true
false

Undefined(未定義)

  • 値が割り当てられていない変数の初期値です。
JavaScript
let undefinedVar;
//コンソール出力
console.log(undefinedVar);

出力結果:

undefined

Null

  • 意図的に「値がない」ことを示します。
JavaScript
let emptyValue = null;
//コンソール出力
console.log(emptyValue);

出力結果:

null

シンボル (Symbol)

  • 一意の識別子として使用されます。
JavaScript
let uniqueKey = Symbol("description");
//コンソール出力
console.log(uniqueKey);

出力結果:

Symbol(description)

オブジェクト型

オブジェクト型:複数のデータや機能(メソッド)を含むことができる複雑な構造です。

オブジェクト (Object)

  • キーと値のペアを持つ複合データ型です。
JavaScript
let person = {
  name: "John",
  age: 30,
  isStudent: false,
};
//コンソール出力
console.log(person);
console.log(person.name);
console.log(person.age);
console.log(person.isStudent);

出力結果:

{ name: 'John', age: 30, isStudent: false }
John
30
false

配列 (Array)

  • 複数の値をリストとして格納します。
JavaScript
let fruits = ["apple", "banana", "orange"];
//コンソール出力
console.log(fruits);

出力結果:

[ 'apple', 'banana', 'orange' ]

まとめ

  • 変数はプログラム内でデータを保存し操作するための基本的な要素です。
  • 定数は値が変更できない変数で、プログラムの安全性を高めます。
  • データ型はプリミティブ型オブジェクト型に大別されます。
  • 各データ型の特性を理解することで、適切なデータ構造の選択が可能になります。

プログラミングにおいて、変数とデータ型の理解は非常に重要です。変数を使うことで、プログラム内でデータを効率的に管理し、操作することができます。また、適切なデータ型を選択することで、メモリの効率的な使用やバグの防止につながります。

コメント

タイトルとURLをコピーしました