【ECMAScript編】第2回：プログラミングの基本要素

目次

導入：情報を扱うための「箱」と「種類」を知ろう

前回の学習で、JavaScriptを実行するための開発環境が整いました。いよいよ今回から、実際にコードを書いてプログラミングの第一歩を踏み出します。

プログラミングとは、コンピュータに指示を与え、様々な処理を実行させることです。その処理の多くは、「情報」を扱います。例えば、ユーザーの名前、商品の価格、計算結果など、多種多様な情報が存在します。

これらの情報をコンピュータの中で一時的に保存したり、種類に応じて適切に扱ったりするために不可欠なのが、「変数」と「データ型」です。今回は、このプログラミングの最も基本的な要素について、手を動かしながらじっくりと学んでいきましょう。

エンジニア

前回は開発環境の準備でしたね。今回はその環境を使って、いよいよコードを書き始めるための土台、変数とデータ型を学びますよ！

メイン解説：変数とデータ型を理解する

1. 変数：情報を格納する「名前付きの箱」

変数は、プログラミングにおいてデータを一時的に保存するための「名前付きの箱」のようなものです。この箱に名前（変数名）を付けておくことで、後からそのデータを取り出したり、新しいデータに置き換えたりすることができます。

JavaScriptでは、主にletとconstというキーワードを使って変数を宣言します。

letで宣言する変数

letは、後から値を変更（再代入）できる変数を宣言する際に使用します。

let userName = "Alice"; // userNameという変数に"Alice"という文字列を代入
console.log(userName);  // "Alice"が出力される

userName = "Bob";       // userNameの値を"Bob"に変更
console.log(userName);  // "Bob"が出力される
constで宣言する変数

constは、一度値を代入したら、後から変更できない「定数」を宣言する際に使用します。変更されることがない値、例えば円周率やアプリケーションの固定設定値などに適しています。

const PI = 3.14159; // PIという定数に円周率を代入
console.log(PI);    // 3.14159が出力される

// PI = 3.14; // この行を実行するとエラーになります（定数は再代入できないため）

letとconstの使い分け:
原則として、変更する必要がない値にはconstを使い、変更する可能性がある値にのみletを使うのが良いプラクティスです。これにより、意図しない値の変更を防ぎ、コードの信頼性を高めることができます。

変数名の命名規則

変数名には、その変数がどのような情報を格納しているのかが分かりやすい名前を付けることが重要です。

  • 英字、数字、アンダースコア（_）、ドル記号（$）が使えます。
  • 数字で始めることはできません。
  • JavaScriptの予約語（let, const, functionなど）は使えません。
  • 一般的に、複数の単語を組み合わせる場合は、最初の単語は小文字、それ以降の単語の先頭を大文字にする「キャメルケース（camelCase）」が使われます（例: firstName, itemCount）。
デザイナー

変数名って、後からコードを見返したときに何を意味しているか一目でわかるように、適切な名前を付けるのが大切なんですね。

2. データ型：情報の「種類」を理解する

コンピュータが扱う情報には、数字、文字、真偽など、様々な「種類」があります。これらの情報の種類を「データ型」と呼びます。JavaScriptでは、変数を宣言する際に明示的に型を指定する必要はありませんが、JavaScriptの内部ではそれぞれの値が特定のデータ型として扱われます。

主要なデータ型をいくつか見ていきましょう。

Number（数値型）

整数や小数点を問わず、数値を扱うための型です。

let age = 30;         // 整数
let price = 19.99;    // 浮動小数点数
let temperature = -5; // 負の数

let sum = age + 5;        // 四則演算も可能
console.log(sum);         // 35
console.log(typeof age);  // number
String（文字列型）

テキストデータを扱うための型です。シングルクォート（'）、ダブルクォート（"）、バッククォート（`）のいずれかで囲んで表現します。バッククォートで囲む「テンプレートリテラル」を使うと、変数や式を文字列の中に埋め込むことができます。

let greeting = "Hello";
let name = 'World';
let message = `${greeting}, ${name}!`; // テンプレートリテラル

console.log(message);       // "Hello, World!"
console.log(message.length); // 文字列の長さを取得できる (13)
console.log(typeof greeting); // string
Boolean（真偽値型）

true（真）またはfalse（偽）のいずれかの値を持つ型です。主に条件分岐などの制御構造で使われます。

let isActive = true;
let hasPermission = false;

console.log(isActive);      // true
console.log(typeof isActive); // boolean
UndefinedとNull

これらの特別な値もデータ型と見なされます。

  • undefined: 変数が宣言されたものの、まだ値が代入されていない状態を示します。 
    let favoriteColor; // 値を代入していない
console.log(favoriteColor); // undefined
console.log(typeof favoriteColor); // undefined
  • null: 意図的に「値がない」ことを示す際に使用します。 
    let userAddress = null; // ユーザーの住所は不明、または設定されていない
console.log(userAddress); // null
typeof演算子でデータ型を確認する

typeof演算子を使うと、指定した値や変数がどのデータ型に属するかを確認できます。

let myNumber = 100;
let myString = "JavaScript";
let myBoolean = true;
let myUndefined;
let myNull = null;

console.log(typeof myNumber);    // number
console.log(typeof myString);    // string
console.log(typeof myBoolean);   // boolean
console.log(typeof myUndefined); // undefined
console.log(typeof myNull);      // object （nullは歴史的な理由によりobjectと表示されますが、プリミティブ型の一種です）
エンジニア

JavaScriptは型を明示しないですが、内部的には厳密に型が管理されています。特にtypeof nullがobjectになるのは、よく知られた仕様なので覚えておくといいでしょう。

まとめ：プログラミングの土台を築く

今回は、プログラミングの最も基本的な要素である「変数」と「データ型」について学びました。

  • 変数は、情報を一時的に格納するための「名前付きの箱」です。letで再代入可能な変数を、constで再代入不可能な定数を宣言します。
  • データ型は、情報がどのような種類であるかを示します。Number（数値）、String（文字列）、Boolean（真偽値）などが主なものです。typeof演算子を使って、値の型を確認できます。

これらの概念は、今後のプログラミング学習において常に登場する非常に重要な土台です。今回学んだことを活用すれば、簡単な計算や文字列の表示など、身の回りの情報をJavaScriptで表現できるようになります。

次回は、これらの変数やデータ型を実際に操作するための「演算子」や、処理の流れを制御する「条件分岐」について学んでいきましょう。

デザイナー

変数とデータ型はプログラミングの基本中の基本なんですね！これらをしっかり理解していれば、次のステップに進むのが楽しみです！

チャンネル登録 よろしくお願いします

こんにちわ！JS太郎です‼
このチャンネルでは、はじめてプログラミングをする人はもちろん、小学生からでも理解出来るように判りやすく解説しています。
是非、一緒にプログラミングを学んでご自身の付加価値を高めていきましょう。

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。